cleanup my poor choices

app/scripts/page.tsx

@@ -12,7 +12,6 @@ export default function Page() {
   const [selectedScript, setSelectedScript] = useState<string | null>(null);
   const [cacheExpiryTime, setCacheExpiryTime] = useState<Date | null>(null);
   const [isCacheEnabled, setIsCacheEnabled] = useState<boolean>(true);
-  const [showCacheControls, setShowCacheControls] = useState<boolean>(true);
 
   const fetchLinks = useCallback(async (forceUpdate: boolean = false) => {
     try {
@@ -81,10 +80,11 @@ export default function Page() {
       }
 
       setLinks(res as unknown as Category[]);
-      setIsLoading(false);
     } catch (error) {
       console.error("Error fetching links:", error);
       setIsLoading(false);
+    } finally {
+      setIsLoading(false);
     }
   }, [isCacheEnabled]);
 
@@ -100,20 +100,17 @@ export default function Page() {
     fetchLinks(true);
   };
 
-  const toggleCache = () => {
+  const toggleCache = async () => {
     const newCacheState = !isCacheEnabled;
     setIsCacheEnabled(newCacheState);
     localStorage.setItem("isCacheEnabled", String(newCacheState));
-  };
 
-  const handleScriptSelect = (script: string | null) => {
-    if (!selectedScript && script) {
-      setShowCacheControls(false);
-      setTimeout(() => {
-        setShowCacheControls(true);
-      }, 50);
+    if (!newCacheState) {
+      localStorage.removeItem("scripts");
+      localStorage.removeItem("cacheTime");
+    } else {
+      await fetchLinks(true);
     }
-    setSelectedScript(script);
   };
 
   return (
@@ -126,26 +123,28 @@ export default function Page() {
                 <ScriptBrowser
                   items={links}
                   selectedScript={selectedScript}
-                  setSelectedScript={handleScriptSelect}
+                  setSelectedScript={setSelectedScript}
                 />
               </div>
               <div className="mx-7 w-full sm:mx-0 sm:ml-7">
                 <ScriptItem
                   items={links}
                   selectedScript={selectedScript}
-                  setSelectedScript={handleScriptSelect}
+                  setSelectedScript={setSelectedScript}
                 />
-                {links.length > 0 && showCacheControls && (
-                  <CacheControls
-                    isCacheEnabled={isCacheEnabled}
-                    toggleCache={toggleCache}
-                    handleForceUpdate={handleForceUpdate}
-                    cacheExpiryTime={cacheExpiryTime}
-                  />
-                )}
               </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">

components/CacheControls.tsx

@@ -1,5 +1,4 @@
 import { Button } from "@/components/ui/button";
-import { useEffect, useState } from "react";
 
 interface CacheControlsProps {
   isCacheEnabled: boolean;
@@ -8,49 +7,50 @@ interface CacheControlsProps {
   cacheExpiryTime: Date | null;
 }
 
-const CacheControls: React.FC<CacheControlsProps> = ({ isCacheEnabled, toggleCache, handleForceUpdate, cacheExpiryTime }) => {
-  const [initialized, setInitialized] = useState(false);
-
-  useEffect(() => {
-    setInitialized(true);
-  }, []);
-
-  if (!initialized) return null;
-
+const CacheControls: React.FC<CacheControlsProps> = ({
+  isCacheEnabled,
+  toggleCache,
+  handleForceUpdate,
+  cacheExpiryTime,
+}) => {
   return (
-    <div className="mt-4 animate-fade-up">
-      {isCacheEnabled ? (
-        <>
-          <p className="text-xs text-muted-foreground">
-            The scripts are cached in your browser to optimize performance. Use the button below
-            to re-poll the server for changes.
-          </p>
-          {cacheExpiryTime && (
+    <div className="mt-4 grid animate-fade-up grid-cols-1 gap-4 px-4">
+      <div className="text-center">
+        {isCacheEnabled ? (
+          <>
             <p className="text-xs text-muted-foreground">
-              Cache will expire automatically at {cacheExpiryTime.toLocaleTimeString()}
+              The scripts are cached in your browser to optimize performance.
+              Use the button below to re-poll the server for changes.
             </p>
-          )}
-          <div className="flex space-x-2 px-2 py-4">
+            {cacheExpiryTime && (
+              <p className="text-xs text-muted-foreground">
+                Cache will expire automatically at{" "}
+                {cacheExpiryTime.toLocaleTimeString()}
+              </p>
+            )}
+          </>
+        ) : (
+          <p className="text-xs text-muted-foreground">
+            The cache is disabled. All data will be fetched from the server.
+          </p>
+        )}
+      </div>
+      <div className="flex justify-center space-x-2 py-4">
+        {isCacheEnabled ? (
+          <>
             <Button variant="outline" onClick={handleForceUpdate}>
               Reload via API
             </Button>
             <Button variant="outline" onClick={toggleCache}>
               Disable Cache
             </Button>
-          </div>
-        </>
-      ) : (
-        <div className="mt-4">
-          <p className="text-xs text-muted-foreground">
-            The cache is disabled. All data will be fetched from the server.
-          </p>
-          <div className="flex space-x-2 px-2 py-4">
-            <Button variant="outline" onClick={toggleCache}>
-              Enable Cache
-            </Button>
-          </div>
-        </div>
-      )}
+          </>
+        ) : (
+          <Button variant="outline" onClick={toggleCache}>
+            Enable Cache
+          </Button>
+        )}
+      </div>
     </div>
   );
 };