diff --git a/compass/components/Table/ResourceTable.tsx b/compass/components/Table/ResourceTable.tsx index d873c7d..2eedc65 100644 --- a/compass/components/Table/ResourceTable.tsx +++ b/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(); const [data, setData] = useState([...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) { diff --git a/compass/components/TagsInput/TagsHandler.tsx b/compass/components/TagsInput/TagsHandler.tsx new file mode 100644 index 0000000..0deba6b --- /dev/null +++ b/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()); + + 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 } +} \ No newline at end of file