From 598b9dd784889494f647da4a6b8298004ab9cf86 Mon Sep 17 00:00:00 2001
From: Nick A <nicolas.a.asanov@gmail.com>
Date: Tue, 22 Oct 2024 14:39:13 -0400
Subject: [PATCH] added useTagsHandler custom hook to consolidate getTagColor
and presetOptions state into one function
---
compass/components/Table/ResourceTable.tsx | 26 ++++---------------
compass/components/TagsInput/TagsHandler.tsx | 27 ++++++++++++++++++++
2 files changed, 32 insertions(+), 21 deletions(-)
create mode 100644 compass/components/TagsInput/TagsHandler.tsx
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<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) {
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<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 }
+}
\ No newline at end of file