rushilwiz/compass
1
0
Fork 0
mirror of https://github.com/cssgunc/compass.git synced 2025-04-09 14:00:15 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Nick A 2024-10-22 14:39:13 -04:00
parent 2fa983564b
commit d027efc434
2 changed files with 32 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
compass/components/Table/ResourceTable.tsx
View File

@ -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) {

27
compass/components/TagsInput/TagsHandler.tsx Normal file
View File

@ -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 }
}