trying to add refresh button

1 files changed, 81 insertions, 44 deletions

diff --git a/src/index.tsx b/src/index.tsx
index c5b9e1a..b2934e4 100755
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,51 +1,63 @@
-import { definePlugin } from "decky-frontend-lib";
 import React, { useEffect, useState } from "react";
 import { FaClipboardList } from "react-icons/fa";
+import { definePlugin } from "decky-frontend-lib";
 import { marked } from "marked";
 import DOMPurify from "dompurify";
 
 function Content() {
   const [changelog, setChangelog] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
+  const [isRefreshing, setIsRefreshing] = useState<boolean>(false); // For button state feedback
 
-  useEffect(() => {
+  const fetchChangelog = async (signal?: AbortSignal) => {
     const url =
       "https://api.github.com/repos/ublue-os/bazzite/releases/tags/41.20250106.2";
-    const controller = new AbortController();
-    const signal = controller.signal;
-
-    const fetchChangelog = async () => {
-      try {
-        const response = await fetch(url, {
-          headers: {
-            Accept: "application/vnd.github.v3+json",
-          },
-          signal,
-        });
-
-        if (!response.ok) {
-          throw new Error(`Failed to fetch: ${response.statusText}`);
-        }
+    try {
+      const response = await fetch(url, {
+        headers: {
+          Accept: "application/vnd.github.v3+json",
+        },
+        signal,
+      });
 
-        const data = await response.json();
-        setChangelog(data.body);
-      } catch (err) {
-        if (err instanceof DOMException && err.name === "AbortError") return;
-        const errorMessage =
-          err instanceof Error
-            ? err.message
-            : "An unknown error occurred while fetching the changelog.";
-        setError(errorMessage);
+      if (!response.ok) {
+        throw new Error(`Failed to fetch: ${response.statusText}`);
       }
-    };
 
-    fetchChangelog();
+      const data = await response.json();
+      setChangelog(data.body);
+      setError(null); // Clear previous errors
+    } catch (err) {
+      if (err instanceof DOMException && err.name === "AbortError") return;
+      const errorMessage =
+        err instanceof Error
+          ? err.message
+          : "An unknown error occurred while fetching the changelog.";
+      setError(errorMessage);
+    }
+  };
+
+  useEffect(() => {
+    const controller = new AbortController();
+    fetchChangelog(controller.signal);
 
     return () => {
       controller.abort(); // Cleanup on unmount
     };
   }, []);
 
+  const refreshChangelog = async () => {
+    setIsRefreshing(true); // Start refresh animation or feedback
+    setChangelog(null); // Clear existing changelog to show loading
+    setError(null); // Clear any errors
+
+    try {
+      await fetchChangelog();
+    } finally {
+      setIsRefreshing(false); // End refresh animation
+    }
+  };
+
   return (
     <div
       style={{
@@ -59,21 +71,42 @@ function Content() {
       }}
     >
       <h2>Bazzite Release Notes</h2>
-      <button
-        style={{
-          padding: "10px 20px",
-          marginBottom: "15px",
-          backgroundColor: "#0078D7",
-          color: "#ffffff",
-          border: "none",
-          borderRadius: "5px",
-          cursor: "pointer",
-          fontSize: "16px",
-        }}
-        onClick={() => window.open("https://github.com/ublue-os/bazzite/releases", "_blank")}
-      >
-        View All Release Notes
-      </button>
+      <div style={{ display: "flex", gap: "10px", marginBottom: "15px" }}>
+        <button
+          style={{
+            padding: "10px 20px",
+            backgroundColor: "#0078D7",
+            color: "#ffffff",
+            border: "none",
+            borderRadius: "5px",
+            cursor: "pointer",
+            fontSize: "16px",
+          }}
+          onClick={() =>
+            window.open(
+              "https://github.com/ublue-os/bazzite/releases",
+              "_blank"
+            )
+          }
+        >
+          View All Release Notes
+        </button>
+        <button
+          style={{
+            padding: "10px 20px",
+            backgroundColor: isRefreshing ? "#CCCCCC" : "#28A745",
+            color: "#ffffff",
+            border: "none",
+            borderRadius: "5px",
+            cursor: isRefreshing ? "not-allowed" : "pointer",
+            fontSize: "16px",
+          }}
+          onClick={refreshChangelog}
+          disabled={isRefreshing} // Disable while refreshing
+        >
+          {isRefreshing ? "Refreshing..." : "Refresh"}
+        </button>
+      </div>
       {error ? (
         <p style={{ color: "red" }} aria-live="polite">
           {error}
@@ -121,7 +154,11 @@ function Content() {
               }
             `}
           </style>
-          <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(marked(changelog)) }}></div>
+          <div
+            dangerouslySetInnerHTML={{
+              __html: DOMPurify.sanitize(marked(changelog)),
+            }}
+          ></div>
         </div>
       ) : (
         <p aria-live="polite">Loading...</p>