From c700d0442213f86231ba2c5742761d82476a4cb0 Mon Sep 17 00:00:00 2001
From: Bram Suurd <contact@bramsuurd.nl>
Date: Wed, 6 Nov 2024 19:01:53 +0100
Subject: [PATCH] Refactor category fetching in `ScriptContent` and
 `CommandMenu` to utilize centralized `fetchCategories` for improved
 maintainability

---
 frontend/src/app/scripts/page.tsx       | 14 ++++++-------
 frontend/src/components/CommandMenu.tsx | 28 ++++++++++++-------------
 frontend/src/lib/pocketbase.ts          | 24 +++++++++++++++++++++
 3 files changed, 43 insertions(+), 23 deletions(-)

diff --git a/frontend/src/app/scripts/page.tsx b/frontend/src/app/scripts/page.tsx
index 0d899aca..fb64d0cd 100644
--- a/frontend/src/app/scripts/page.tsx
+++ b/frontend/src/app/scripts/page.tsx
@@ -12,6 +12,7 @@ import {
   LatestScripts,
   // MostViewedScripts,
 } from "./_components/ScriptInfoBlocks";
+import { fetchCategories } from "@/lib/pocketbase";
 
 function ScriptContent() {
   const [selectedScript, setSelectedScript] = useQueryState("id");
@@ -29,14 +30,11 @@ function ScriptContent() {
   }, [selectedScript, links]);
 
   useEffect(() => {
-      fetch(
-        `api/categories`,
-      )
-        .then((response) => response.json())
-        .then((categories) => {
-          setLinks(categories);
-        })
-        .catch((error) => console.error(error));
+    fetchCategories()
+      .then((categories) => {
+        setLinks(categories);
+      })
+      .catch((error) => console.error(error));
   }, []);
 
   return (
diff --git a/frontend/src/components/CommandMenu.tsx b/frontend/src/components/CommandMenu.tsx
index f7171b28..d64e5d8f 100644
--- a/frontend/src/components/CommandMenu.tsx
+++ b/frontend/src/components/CommandMenu.tsx
@@ -6,11 +6,12 @@ import {
   CommandItem,
   CommandList,
 } from "@/components/ui/command";
+import { fetchCategories } from "@/lib/pocketbase";
 import { Category } from "@/lib/types";
 import { cn } from "@/lib/utils";
 import Image from "next/image";
 import { useRouter } from "next/navigation";
-import React, { useEffect } from "react";
+import React from "react";
 import { Button } from "./ui/button";
 import { DialogTitle } from "./ui/dialog";
 
@@ -32,20 +33,17 @@ export default function CommandMenu() {
     return () => document.removeEventListener("keydown", down);
   }, []);
 
-  const fetchCategories = async () => {
+  const fetchSortedCategories = () => {
     setIsLoading(true);
-      fetch(
-        `api/categories?_=${process.env.NEXT_PUBLIC_BUILD_TIME || Date.now()}`,
-      )
-        .then((response) => response.json())
-        .then((categories) => {
-          setLinks(categories);
-          setIsLoading(false);
-        })
-        .catch((error) => {
-          setIsLoading(false);
-          console.error(error);
-        });
+    fetchCategories()
+      .then((categories) => {
+        setLinks(categories);
+        setIsLoading(false);
+      })
+      .catch((error) => {
+        setIsLoading(false);
+        console.error(error);
+      });
   };
 
   return (
@@ -56,7 +54,7 @@ export default function CommandMenu() {
           "relative h-9 w-full justify-start rounded-[0.5rem] bg-muted/50 text-sm font-normal text-muted-foreground shadow-none sm:pr-12 md:w-40 lg:w-64",
         )}
         onClick={() => {
-          fetchCategories();
+          fetchSortedCategories();
           setOpen(true)
         }}
       >
diff --git a/frontend/src/lib/pocketbase.ts b/frontend/src/lib/pocketbase.ts
index 86dcbace..5f291344 100644
--- a/frontend/src/lib/pocketbase.ts
+++ b/frontend/src/lib/pocketbase.ts
@@ -1,4 +1,5 @@
 import PocketBase from "pocketbase";
+import { Category } from "./types";
 
 export const pb = new PocketBase(process.env.NEXT_PUBLIC_POCKETBASE_URL);
 export const pbBackup = new PocketBase(
@@ -8,3 +9,26 @@ export const pbBackup = new PocketBase(
 export const getImageURL = (recordId: string, fileName: string) => {
   return `${process.env.NEXT_PUBLIC_POCKETBASE_URL}/${recordId}/${fileName}`;
 };
+
+const sortCategories = (categories: Category[]) => {
+  const sortedCategories = categories.sort((a, b) => {
+    if (a.name === "Proxmox VE Tools") {
+      return -1;
+    } else if (b.name === "Proxmox VE Tools") {
+      return 1;
+    } else if (a.name === "Miscellaneous") {
+      return 1;
+    } else if (b.name === "Miscellaneous") {
+      return -1;
+    } else {
+      return a.name.localeCompare(b.name);
+    }
+  });
+
+  return sortedCategories;
+};
+
+export const fetchCategories = async () => {
+  const categories = await fetch(`api/categories`).then((response) => response.json());
+  return sortCategories(categories)
+}