From bab8c8ac6cd2ec3a484e5f93be68295c4805ea3d Mon Sep 17 00:00:00 2001
From: Bram Suurd <78373894+BramSuurdje@users.noreply.github.com>
Date: Sun, 3 Nov 2024 21:20:33 +0100
Subject: [PATCH] Remove ScriptPage component and integrate its functionality
 into the Script page, updating loading and category fetching logic

---
 src/app/scripts/_components/ScriptPage.tsx |  85 ----------------
 src/app/scripts/page.tsx                   | 111 ++++++++++++++++-----
 2 files changed, 86 insertions(+), 110 deletions(-)
 delete mode 100644 src/app/scripts/_components/ScriptPage.tsx

diff --git a/src/app/scripts/_components/ScriptPage.tsx b/src/app/scripts/_components/ScriptPage.tsx
deleted file mode 100644
index 315cc52..0000000
--- a/src/app/scripts/_components/ScriptPage.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-"use client";
-
-import ScriptBrowser from "@/app/scripts/_components/ScriptBrowser";
-import ScriptItem from "@/app/scripts/_components/ScriptItem";
-import { Category } from "@/lib/types";
-import { Loader2 } from "lucide-react";
-import { useEffect, useState } from "react";
-
-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);
-    }
-  });
-};
-
-export default function ScriptPage() {
-  const [links, setLinks] = useState<Category[]>([]);
-  const [selectedScript, setSelectedScript] = useState<string | null>(null);
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    const fetchCategories = async (): Promise<void> => {
-      try {
-        const response = await fetch("api/categories");
-        if (!response.ok) {
-          throw new Error("Failed to fetch categories");
-        }
-        const categories: Category[] = await response.json();
-        if (categories.length === 0) {
-          throw new Error("Empty response");
-        }
-        const sortedCategories = sortCategories(categories);
-        setLinks(sortedCategories);
-        setLoading(false);
-      } catch (error) {
-        console.error(error);
-        setLoading(false);
-      }
-    };
-
-    fetchCategories();
-  }, []);
-
-  if (loading) {
-    return (
-      <div className="flex h-screen w-full flex-col items-center justify-center gap-5 bg-background px-4 md:px-6">
-        <div className="space-y-2 text-center">
-          <Loader2 className="h-10 w-10 animate-spin" />
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="mb-3">
-      <div className="mt-20 flex sm:px-4 xl:px-0">
-        <div className="hidden sm:flex">
-          <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}
-          />
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/app/scripts/page.tsx b/src/app/scripts/page.tsx
index 26198e2..341ce3c 100644
--- a/src/app/scripts/page.tsx
+++ b/src/app/scripts/page.tsx
@@ -1,37 +1,98 @@
-// import { Metadata } from "next";
-import ScriptPage from "./_components/ScriptPage";
+"use client";
 
 export const dynamic = "force-static";
 
-// type Props = {
-//   searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
-// };
+import ScriptItem from "@/app/scripts/_components/ScriptItem";
+import { Category } from "@/lib/types";
+import { Loader2 } from "lucide-react";
+import { useSearchParams } from "next/navigation";
+import { useEffect, useState } from "react";
+import Sidebar from "./_components/Sidebar";
 
-// export async function generateMetadata(props: Props): Promise<Metadata | null> {
-//   const searchParams = await props.searchParams;
-//   const scriptName = searchParams.id;
+export default function Page() {
+  const [links, setLinks] = useState<Category[]>([]);
+  const [selectedScript, setSelectedScript] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+  const searchParams = useSearchParams();
 
-//   if (!scriptName || typeof scriptName !== "string") {
-//     return null;
-//   }
+  useEffect(() => {
+    const fetchCategories = async (): Promise<void> => {
+      try {
+        const response = await fetch("api/categories");
+        if (!response.ok) {
+          throw new Error("Failed to fetch categories");
+        }
+        const categories: Category[] = await response.json();
+        if (categories.length === 0) {
+          throw new Error("Empty response");
+        }
+        const sortedCategories = sortCategories(categories);
+        setLinks(sortedCategories);
+        setLoading(false);
+      } catch (error) {
+        console.error(error);
+        setLoading(false);
+      }
+    };
 
+    fetchCategories();
+  }, []);
 
-//   return {
-//     title: scriptName + " | Proxmox VE Helper-Scripts",
-//     description: `This script is used to install ${scriptName} on your Proxmox VE host. | Proxmox VE Helper-Scripts is a collection of scripts to help manage your Proxmox Virtual Environment. with over 150+ scripts, you are sure to find what you need.`,
+  useEffect(() => {
+    const id = searchParams.get("id");
+    if (id) {
+      setSelectedScript(id);
+    } else {
+      setSelectedScript(null);
+    }
+  }, [searchParams, setSelectedScript]);
 
-//     openGraph: {
-//       title: scriptName + " | Proxmox VE Helper-Scripts",
-//       description: `This script is used to install ${scriptName} on your Proxmox VE host. | Proxmox VE Helper-Scripts is a collection of scripts to help manage your Proxmox Virtual Environment. with over 150+ scripts, you are sure to find what you need.`,
-//       url: `https://proxmoxve-scripts.com/scripts?id=${scriptName}`,
-//     },
-//   };
-// }
+  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);
+      }
+    });
+  };
+
+  if (loading) {
+    return (
+      <div className="flex h-screen w-full flex-col items-center justify-center gap-5 bg-background px-4 md:px-6">
+        <div className="space-y-2 text-center">
+          <Loader2 className="h-10 w-10 animate-spin" />
+        </div>
+      </div>
+    );
+  }
 
-export default function page() {
   return (
-    <>
-      <ScriptPage />
-    </>
+    <div className="mb-3">
+      <div className="mt-20 flex sm:px-4 xl:px-0">
+        <div className="hidden sm:flex">
+          <Sidebar
+            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}
+          />
+        </div>
+      </div>
+    </div>
   );
 }