added useTagsHandler custom hook to consolidate getTagColor and presetOptions state into one function

compass/components/Table/ResourceTable.tsx

@@ -7,34 +7,18 @@ import { Bars2Icon, BookmarkIcon } from "@heroicons/react/24/solid";
 import { ColumnDef, createColumnHelper } from "@tanstack/react-table";
 import { useState } from "react";
 import { DataPoint } from "@/components/Table/Table";
+import useTagsHandler from "@/components/TagsInput/TagsHandler";
 
 export function ResourceTable({ resources }: { resources: Resource[] }) {
     const columnHelper = createColumnHelper<Resource>();    
     const [data, setData] = useState<DataPoint[]>([...resources]);
-    
+
-    const [presetOptions, setPresetOptions] = useState([
+    const { presetOptions, setPresetOptions, getTagColor } = useTagsHandler([
         "administrator",
         "volunteer",
         "employee",
-    ]);
+    ])
-    const [tagColors, setTagColors] = useState(new Map());
+    
-
-    const getTagColor = (tag: string) => {
-        if (!tagColors.has(tag)) {
-            const colors = [
-                "bg-cyan-100",
-                "bg-blue-100",
-                "bg-green-100",
-                "bg-yellow-100",
-                "bg-purple-100",
-            ];
-            const randomColor =
-                colors[Math.floor(Math.random() * colors.length)];
-            setTagColors(new Map(tagColors).set(tag, randomColor));
-        }
-        return tagColors.get(tag);
-    };
-
     const handleRowUpdate = (updatedRow: Resource) => {
         const dataIndex = data.findIndex((row) => row.id === updatedRow.id);
         if (dataIndex !== -1) {

compass/components/TagsInput/TagsHandler.tsx

@@ -0,0 +1,27 @@
+import { useState } from 'react';
+
+export default function useTagsHandler(initialOptions: string[]) {
+    const [presetOptions, setPresetOptions] = useState(initialOptions);
+    const [tagColors, setTagColors] = useState(new Map<string, string>());
+
+    const getTagColor = (tag: string): string => {
+        if (!tagColors.has(tag)) {
+            const colors = [
+                "bg-cyan-100",
+                "bg-blue-100",
+                "bg-green-100",
+                "bg-yellow-100",
+                "bg-purple-100",
+            ];
+            const randomColor =
+                colors[Math.floor(Math.random() * colors.length)];
+            setTagColors(new Map(tagColors).set(tag, randomColor));
+            return randomColor;
+        }
+        // Since we populate any missing keys, .get will never return undefined,
+        // so we are safe to typecast to prevent a type error
+        return tagColors.get(tag) as string;
+    };
+
+    return { presetOptions, setPresetOptions, getTagColor }
+}