From 3b7d22b20d68268ca4ddfcc9c61b8878ccfdd63b Mon Sep 17 00:00:00 2001
From: Bram Suurd <78373894+BramSuurdje@users.noreply.github.com>
Date: Thu, 1 Aug 2024 21:47:00 +0200
Subject: [PATCH] feat: Add Footer component to layout. and remove caching of
 scripts

---
 app/layout.tsx        |   2 +
 app/scripts/page.tsx  | 167 +++++++++++-------------------------------
 components/Footer.tsx |  30 ++++++++
 3 files changed, 74 insertions(+), 125 deletions(-)
 create mode 100644 components/Footer.tsx

diff --git a/app/layout.tsx b/app/layout.tsx
index c1efe63..e699419 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -4,6 +4,7 @@ import { ThemeProvider } from "@/components/theme-provider";
 import { Toaster } from "@/components/ui/sonner";
 import Navbar from "@/components/Navbar";
 import React from "react";
+import Footer from "@/components/Footer";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -77,6 +78,7 @@ export default function RootLayout({
                 <Toaster richColors />
               </div>
             </div>
+            <Footer />
           </div>
         </ThemeProvider>
       </body>
diff --git a/app/scripts/page.tsx b/app/scripts/page.tsx
index 548cad3..ad7054b 100644
--- a/app/scripts/page.tsx
+++ b/app/scripts/page.tsx
@@ -4,122 +4,57 @@ import ScriptBrowser from "@/components/ScriptBrowser";
 import { pb } from "@/lib/pocketbase";
 import { Category } from "@/lib/types";
 import { useEffect, useState, useCallback } from "react";
-import CacheControls from "@/components/CacheControls";
-import { toast } from "sonner";
+
+const getFullList = async (): Promise<Category[]> => {
+  const response = await pb.collection("categories").getFullList({
+    expand: "items",
+    sort: "order",
+    requestKey: "desktop",
+  });
+  return response as unknown as Category[];
+};
+
+const sortCategories = (categories: Category[]): Category[] => {
+  return categories.sort((a: Category, b: Category) => {
+    if (a.catagoryName === "Proxmox VE Tools" && b.catagoryName !== "Proxmox VE Tools") {
+      return -1;
+    } else if (a.catagoryName !== "Proxmox VE Tools" && b.catagoryName === "Proxmox VE Tools") {
+      return 1;
+    } else {
+      return a.catagoryName.localeCompare(b.catagoryName);
+    }
+  });
+};
+
+const fetchAndSortLinks = async (setLinks: (links: Category[]) => void, setIsLoading: (isLoading: boolean) => void) => {
+  try {
+    setIsLoading(true);
+    const categories = await getFullList();
+    if (categories.length === 0) {
+      throw new Error("Empty response");
+    }
+    const sortedCategories = sortCategories(categories);
+    setLinks(sortedCategories);
+  } catch (error) {
+    console.error("Error fetching links:", error);
+  } finally {
+    setIsLoading(false);
+  }
+};
 
 export default function Page() {
   const [links, setLinks] = useState<Category[]>([]);
   const [isLoading, setIsLoading] = useState(true);
   const [selectedScript, setSelectedScript] = useState<string | null>(null);
-  const [cacheExpiryTime, setCacheExpiryTime] = useState<Date | null>(null);
-  const [isCacheEnabled, setIsCacheEnabled] = useState<boolean>(true);
 
-  const fetchLinks = useCallback(
-    async (forceUpdate: boolean = false) => {
-      try {
-        setIsLoading(true);
-        let res;
-
-        if (isCacheEnabled) {
-          const cachedLinks = localStorage.getItem("scripts");
-          const cacheTime = localStorage.getItem("cacheTime");
-
-          if (!forceUpdate && cachedLinks && cacheTime) {
-            const now = new Date().getTime();
-            const timeDiff = Math.abs(now - Number(cacheTime));
-            const diffInMinutes = Math.floor(timeDiff / 1000 / 60);
-
-            if (diffInMinutes < 30) {
-              setLinks(JSON.parse(cachedLinks));
-              setCacheExpiryTime(
-                new Date(Number(cacheTime) + 1440 * 60 * 1000),
-              );
-              setIsLoading(false);
-              return;
-            }
-          }
-        }
-
-        try {
-          res = await (pb.collection("categories").getFullList({
-            expand: "items",
-            sort: "order",
-            requestKey: "desktop",
-          }) as Promise<Category[]>);
-          if (res.length === 0) {
-            throw new Error("Empty response");
-          }
-        } catch (error) {
-          const cachedLinks = localStorage.getItem("scripts");
-          if (cachedLinks) {
-            res = JSON.parse(cachedLinks);
-          } else {
-            throw error;
-          }
-          throw error;
-        }
-        res = res.sort((a: Category, b: Category) => {
-          if (
-            a.catagoryName === "Proxmox VE Tools" &&
-            b.catagoryName !== "Proxmox VE Tools"
-          ) {
-            return -1;
-          } else if (
-            a.catagoryName !== "Proxmox VE Tools" &&
-            b.catagoryName === "Proxmox VE Tools"
-          ) {
-            return 1;
-          } else {
-            return a.catagoryName.localeCompare(b.catagoryName);
-          }
-        });
-
-        if (isCacheEnabled) {
-          localStorage.setItem("scripts", JSON.stringify(res));
-          const newCacheTime = new Date().getTime();
-          localStorage.setItem("cacheTime", String(newCacheTime));
-          setCacheExpiryTime(new Date(newCacheTime + 1440 * 60 * 1000));
-        }
-
-        setLinks(res as unknown as Category[]);
-      } catch (error) {
-        console.error("Error fetching links:", error);
-        setIsLoading(false);
-      } finally {
-        setIsLoading(false);
-      }
-    },
-    [isCacheEnabled],
-  );
+  const fetchLinks = useCallback(() => {
+    fetchAndSortLinks(setLinks, setIsLoading);
+  }, []);
 
   useEffect(() => {
-    const cacheEnabled = localStorage.getItem("isCacheEnabled");
-    if (cacheEnabled !== null) {
-      setIsCacheEnabled(cacheEnabled === "true");
-    }
     fetchLinks();
   }, [fetchLinks]);
 
-  const handleForceUpdate = () => {
-    fetchLinks(true);
-    toast.success("Cache has been refreshed!");
-  };
-
-  const toggleCache = async () => {
-    const newCacheState = !isCacheEnabled;
-    setIsCacheEnabled(newCacheState);
-    localStorage.setItem("isCacheEnabled", String(newCacheState));
-
-    if (!newCacheState) {
-      localStorage.removeItem("scripts");
-      localStorage.removeItem("cacheTime");
-      toast.warning("Cache has been disabled!");
-    } else {
-      await fetchLinks(true);
-      toast.info("Cache has been enabled!");
-    }
-  };
-
   return (
     <>
       {!isLoading ? (
@@ -128,31 +63,13 @@ export default function Page() {
           <div className="mb-3 min-h-screen">
             <div className="mt-20 flex sm:px-7 xl:px-0">
               <div className="hidden sm:flex">
-                <ScriptBrowser
-                  items={links}
-                  selectedScript={selectedScript}
-                  setSelectedScript={setSelectedScript}
-                />
+                <ScriptBrowser items={links} selectedScript={selectedScript} setSelectedScript={setSelectedScript} />
               </div>
               <div className="mx-7 w-full sm:mx-0 sm:ml-7">
-                <ScriptItem
-                  items={links}
-                  selectedScript={selectedScript}
-                  setSelectedScript={setSelectedScript}
-                />
+                <ScriptItem items={links} selectedScript={selectedScript} setSelectedScript={setSelectedScript} />
               </div>
             </div>
           </div>
-          {links.length > 0 && (
-            <div className="mb-10 flex justify-center">
-              <CacheControls
-                isCacheEnabled={isCacheEnabled}
-                toggleCache={toggleCache}
-                handleForceUpdate={handleForceUpdate}
-                cacheExpiryTime={cacheExpiryTime}
-              />
-            </div>
-          )}
         </>
       ) : (
         <div className="flex h-screen items-center justify-center">
diff --git a/components/Footer.tsx b/components/Footer.tsx
new file mode 100644
index 0000000..6e8449d
--- /dev/null
+++ b/components/Footer.tsx
@@ -0,0 +1,30 @@
+import Link from "next/link";
+import React from "react";
+
+export default function Footer() {
+  return (
+    <div className="supports-backdrop-blur:bg-background/90 mt-auto flex justify-center border-t border-border bg-background/40 py-6 backdrop-blur-lg">
+      <div className="max-w-7xl mx-6 w-full text-sm">
+        Build by{" "}
+        <Link
+          href="https://github.com/BramSuurdje"
+          className="font-semibold underline-offset-2 duration-300 hover:underline"
+          target="_blank"
+          rel="noreferrer"
+        >
+          Bram Suurd
+        </Link>
+        . The source code is avaliable on{" "}
+        <Link
+          href="https://github.com/BramSuurdje/proxmox-helper-scripts"
+          target="_blank"
+          rel="noreferrer"
+          className="font-semibold underline-offset-2 duration-300 hover:underline "
+        >
+          GitHub
+        </Link>
+        .
+      </div>
+    </div>
+  );
+}