From 38f07ae3f9a1066593ab40b196520301858db594 Mon Sep 17 00:00:00 2001
From: Evan Simkowitz <esimkowitz@users.noreply.github.com>
Date: Fri, 20 Sep 2024 13:29:37 -0700
Subject: [PATCH] Dismiss update banner after 10s on error (#800)

---
 frontend/app/tab/tabbar.tsx                   |  2 +-
 .../{updatestatus.less => updatebanner.less}  |  0
 frontend/app/tab/updatebanner.tsx             | 71 +++++++++++++++++++
 frontend/app/tab/updatestatus.tsx             | 49 -------------
 4 files changed, 72 insertions(+), 50 deletions(-)
 rename frontend/app/tab/{updatestatus.less => updatebanner.less} (100%)
 create mode 100644 frontend/app/tab/updatebanner.tsx
 delete mode 100644 frontend/app/tab/updatestatus.tsx

diff --git a/frontend/app/tab/tabbar.tsx b/frontend/app/tab/tabbar.tsx
index 6efec59bc..51482fc4f 100644
--- a/frontend/app/tab/tabbar.tsx
+++ b/frontend/app/tab/tabbar.tsx
@@ -11,7 +11,7 @@ import React, { createRef, useCallback, useEffect, useRef, useState } from "reac
 import { debounce } from "throttle-debounce";
 import { Tab } from "./tab";
 import "./tabbar.less";
-import { UpdateStatusBanner } from "./updatestatus";
+import { UpdateStatusBanner } from "./updatebanner";
 
 const TAB_DEFAULT_WIDTH = 130;
 const TAB_MIN_WIDTH = 100;
diff --git a/frontend/app/tab/updatestatus.less b/frontend/app/tab/updatebanner.less
similarity index 100%
rename from frontend/app/tab/updatestatus.less
rename to frontend/app/tab/updatebanner.less
diff --git a/frontend/app/tab/updatebanner.tsx b/frontend/app/tab/updatebanner.tsx
new file mode 100644
index 000000000..a8a7a72c0
--- /dev/null
+++ b/frontend/app/tab/updatebanner.tsx
@@ -0,0 +1,71 @@
+import { Button } from "@/element/button";
+import { atoms, getApi } from "@/store/global";
+import { useAtomValue } from "jotai";
+import { memo, useEffect, useState } from "react";
+import "./updatebanner.less";
+
+const UpdateStatusBannerComponent = ({ buttonRef }: { buttonRef: React.RefObject<HTMLButtonElement> }) => {
+    const appUpdateStatus = useAtomValue(atoms.updaterStatusAtom);
+    const [updateStatusMessage, setUpdateStatusMessage] = useState<string>();
+    const [dismissBannerTimeout, setDismissBannerTimeout] = useState<NodeJS.Timeout>();
+
+    useEffect(() => {
+        let message: string;
+        let dismissBanner = false;
+        switch (appUpdateStatus) {
+            case "ready":
+                message = "Update Available";
+                break;
+            case "downloading":
+                message = "Downloading Update";
+                break;
+            case "installing":
+                message = "Installing Update";
+                break;
+            case "error":
+                message = "Updater Error: Try Checking Again";
+                dismissBanner = true;
+                break;
+            default:
+                break;
+        }
+        setUpdateStatusMessage(message);
+
+        // Clear any existing timeout
+        if (dismissBannerTimeout) {
+            clearTimeout(dismissBannerTimeout);
+        }
+
+        // If we want to dismiss the banner, set the new timeout, otherwise clear the state
+        if (dismissBanner) {
+            setDismissBannerTimeout(
+                setTimeout(() => {
+                    setUpdateStatusMessage(null);
+                    setDismissBannerTimeout(null);
+                })
+            );
+        } else {
+            setDismissBannerTimeout(null);
+        }
+    }, [appUpdateStatus]);
+
+    function onClick() {
+        getApi().installAppUpdate();
+    }
+
+    if (updateStatusMessage) {
+        return (
+            <Button
+                ref={buttonRef}
+                className="update-available-button"
+                title={appUpdateStatus === "ready" ? "Click to Install Update" : updateStatusMessage}
+                onClick={onClick}
+                disabled={appUpdateStatus !== "ready"}
+            >
+                {updateStatusMessage}
+            </Button>
+        );
+    }
+};
+
+export const UpdateStatusBanner = memo(UpdateStatusBannerComponent) as typeof UpdateStatusBannerComponent;
diff --git a/frontend/app/tab/updatestatus.tsx b/frontend/app/tab/updatestatus.tsx
deleted file mode 100644
index 75f6ad68c..000000000
--- a/frontend/app/tab/updatestatus.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import { Button } from "@/element/button";
-import { atoms, getApi } from "@/store/global";
-import { useAtomValue } from "jotai";
-import { memo } from "react";
-import "./updatestatus.less";
-
-const UpdateStatusBannerComponent = ({ buttonRef }: { buttonRef: React.RefObject<HTMLButtonElement> }) => {
-    const appUpdateStatus = useAtomValue(atoms.updaterStatusAtom);
-    function onClick() {
-        getApi().installAppUpdate();
-    }
-
-    let buttonText: string;
-    switch (appUpdateStatus) {
-        case "ready":
-            buttonText = "Update Available";
-            break;
-        case "checking":
-            buttonText = "Checking for Updates";
-            break;
-        case "downloading":
-            buttonText = "Downloading Update";
-            break;
-        case "installing":
-            buttonText = "Installing Update";
-            break;
-        case "error":
-            buttonText = "Updater Error: Try Checking Again";
-            break;
-        default:
-            break;
-    }
-
-    if (buttonText) {
-        return (
-            <Button
-                ref={buttonRef}
-                className="update-available-button"
-                title={appUpdateStatus === "ready" ? "Click to Install Update" : buttonText}
-                onClick={onClick}
-                disabled={appUpdateStatus !== "ready"}
-            >
-                {buttonText}
-            </Button>
-        );
-    }
-};
-
-export const UpdateStatusBanner = memo(UpdateStatusBannerComponent) as typeof UpdateStatusBannerComponent;