From 022288ef8e6b1767310282b3017692448682f4c7 Mon Sep 17 00:00:00 2001
From: Bram Suurd <78373894+BramSuurdje@users.noreply.github.com>
Date: Wed, 22 Jan 2025 21:16:21 +0100
Subject: [PATCH] Refactor Sidebar component to display unique scripts count
 (#1681)

---
 .../src/app/scripts/_components/Sidebar.tsx   | 60 +++++++++++--------
 1 file changed, 34 insertions(+), 26 deletions(-)

diff --git a/frontend/src/app/scripts/_components/Sidebar.tsx b/frontend/src/app/scripts/_components/Sidebar.tsx
index 24f9dce2..3680210f 100644
--- a/frontend/src/app/scripts/_components/Sidebar.tsx
+++ b/frontend/src/app/scripts/_components/Sidebar.tsx
@@ -1,35 +1,43 @@
 "use client";
 
-import { Category } from "@/lib/types";
+import type { Category, Script } from "@/lib/types";
 import ScriptAccordion from "./ScriptAccordion";
 
 const Sidebar = ({
-  items,
-  selectedScript,
-  setSelectedScript,
+	items,
+	selectedScript,
+	setSelectedScript,
 }: {
-  items: Category[];
-  selectedScript: string | null;
-  setSelectedScript: (script: string | null) => void;
+	items: Category[];
+	selectedScript: string | null;
+	setSelectedScript: (script: string | null) => void;
 }) => {
-  return (
-    <div className="flex min-w-72 flex-col sm:max-w-72">
-      <div className="flex items-end justify-between pb-4">
-        <h1 className="text-xl font-bold">Categories</h1>
-        <p className="text-xs italic text-muted-foreground">
-          {items.reduce((acc, category) => acc + category.scripts.length, 0)}{" "}
-          Total scripts
-        </p>
-      </div>
-      <div className="rounded-lg">
-        <ScriptAccordion
-          items={items}
-          selectedScript={selectedScript}
-          setSelectedScript={setSelectedScript}
-        />
-      </div>
-    </div>
-  );
+	const uniqueScripts = items.reduce((acc, category) => {
+		for (const script of category.scripts) {
+			if (!acc.some((s) => s.name === script.name)) {
+				acc.push(script);
+			}
+		}
+		return acc;
+	}, [] as Script[]);
+
+	return (
+		<div className="flex min-w-72 flex-col sm:max-w-72">
+			<div className="flex items-end justify-between pb-4">
+				<h1 className="text-xl font-bold">Categories</h1>
+				<p className="text-xs italic text-muted-foreground">
+					{uniqueScripts.length} Total scripts
+				</p>
+			</div>
+			<div className="rounded-lg">
+				<ScriptAccordion
+					items={items}
+					selectedScript={selectedScript}
+					setSelectedScript={setSelectedScript}
+				/>
+			</div>
+		</div>
+	);
 };
 
-export default Sidebar;
+export default Sidebar;
\ No newline at end of file