From 5d6b85cf54d703f155a9c01822e9d7eb7b852dc8 Mon Sep 17 00:00:00 2001
From: Mike Sawka <mike@commandline.dev>
Date: Tue, 8 Oct 2024 16:54:41 -0700
Subject: [PATCH] implement back/forward for help view (#991)

---
 frontend/app/view/helpview/helpview.tsx | 40 +++++++++++++++----------
 frontend/app/view/webview/webview.tsx   | 12 ++++----
 2 files changed, 30 insertions(+), 22 deletions(-)

diff --git a/frontend/app/view/helpview/helpview.tsx b/frontend/app/view/helpview/helpview.tsx
index 85a5a67e2..724cdcfb5 100644
--- a/frontend/app/view/helpview/helpview.tsx
+++ b/frontend/app/view/helpview/helpview.tsx
@@ -4,33 +4,41 @@
 import { getApi } from "@/app/store/global";
 import { WebView, WebViewModel } from "@/app/view/webview/webview";
 import { NodeModel } from "@/layout/index";
-import { WebviewTag } from "electron";
 import { atom } from "jotai";
-import { createRef } from "react";
 import "./helpview.less";
 
 class HelpViewModel extends WebViewModel {
-    viewType: string;
-    blockId: string;
-    webviewRef: React.RefObject<WebviewTag>;
-
     constructor(blockId: string, nodeModel: NodeModel) {
         super(blockId, nodeModel);
         this.getSettingsMenuItems = undefined;
-        this.viewText = atom([
-            {
-                elemtype: "iconbutton",
-                icon: "house",
-                click: this.handleHome.bind(this),
-                disabled: this.shouldDisabledHomeButton(),
-            },
-        ]);
+        this.viewText = atom((get) => {
+            // force a dependency on meta.url so we re-render the buttons when the url changes
+            let url = get(this.blockAtom)?.meta?.url || get(this.homepageUrl);
+            return [
+                {
+                    elemtype: "iconbutton",
+                    icon: "chevron-left",
+                    click: this.handleBack.bind(this),
+                    disabled: this.shouldDisableBackButton(),
+                },
+                {
+                    elemtype: "iconbutton",
+                    icon: "chevron-right",
+                    click: this.handleForward.bind(this),
+                    disabled: this.shouldDisableForwardButton(),
+                },
+                {
+                    elemtype: "iconbutton",
+                    icon: "house",
+                    click: this.handleHome.bind(this),
+                    disabled: this.shouldDisableHomeButton(),
+                },
+            ];
+        });
         this.homepageUrl = atom(getApi().getDocsiteUrl());
         this.viewType = "help";
-        this.blockId = blockId;
         this.viewIcon = atom("circle-question");
         this.viewName = atom("Help");
-        this.webviewRef = createRef<WebviewTag>();
     }
 }
 
diff --git a/frontend/app/view/webview/webview.tsx b/frontend/app/view/webview/webview.tsx
index f770f907c..d92b2d83a 100644
--- a/frontend/app/view/webview/webview.tsx
+++ b/frontend/app/view/webview/webview.tsx
@@ -81,19 +81,19 @@ export class WebViewModel implements ViewModel {
                     elemtype: "iconbutton",
                     icon: "chevron-left",
                     click: this.handleBack.bind(this),
-                    disabled: this.shouldDisabledBackButton(),
+                    disabled: this.shouldDisableBackButton(),
                 },
                 {
                     elemtype: "iconbutton",
                     icon: "chevron-right",
                     click: this.handleForward.bind(this),
-                    disabled: this.shouldDisabledForwardButton(),
+                    disabled: this.shouldDisableForwardButton(),
                 },
                 {
                     elemtype: "iconbutton",
                     icon: "house",
                     click: this.handleHome.bind(this),
-                    disabled: this.shouldDisabledHomeButton(),
+                    disabled: this.shouldDisableHomeButton(),
                 },
                 {
                     elemtype: "div",
@@ -142,7 +142,7 @@ export class WebViewModel implements ViewModel {
      * Whether the back button in the header should be disabled.
      * @returns True if the WebView cannot go back or if the WebView call fails. False otherwise.
      */
-    shouldDisabledBackButton() {
+    shouldDisableBackButton() {
         try {
             return !this.webviewRef.current?.canGoBack();
         } catch (_) {}
@@ -153,7 +153,7 @@ export class WebViewModel implements ViewModel {
      * Whether the forward button in the header should be disabled.
      * @returns True if the WebView cannot go forward or if the WebView call fails. False otherwise.
      */
-    shouldDisabledForwardButton() {
+    shouldDisableForwardButton() {
         try {
             return !this.webviewRef.current?.canGoForward();
         } catch (_) {}
@@ -164,7 +164,7 @@ export class WebViewModel implements ViewModel {
      * Whether the home button in the header should be disabled.
      * @returns True if the current url is the pinned url or the pinned url is not set. False otherwise.
      */
-    shouldDisabledHomeButton() {
+    shouldDisableHomeButton() {
         try {
             const homepageUrl = globalStore.get(this.homepageUrl);
             return !homepageUrl || this.getUrl() === homepageUrl;