From 2fa983564bcfbd309ca88d6a10998e93b983b646 Mon Sep 17 00:00:00 2001
From: Nick A <nicolas.a.asanov@gmail.com>
Date: Tue, 22 Oct 2024 14:15:18 -0400
Subject: [PATCH] moved data manipulation logic into Table
---
compass/components/Table/ResourceIndex.tsx | 18 +++----
compass/components/Table/ResourceTable.tsx | 62 +++++-----------------
compass/components/Table/Table.tsx | 47 ++++++++++++----
compass/components/TagsInput/Index.tsx | 2 +-
4 files changed, 59 insertions(+), 70 deletions(-)
diff --git a/compass/components/Table/ResourceIndex.tsx b/compass/components/Table/ResourceIndex.tsx
index 99dcbd3..ae86863 100644
--- a/compass/components/Table/ResourceIndex.tsx
+++ b/compass/components/Table/ResourceIndex.tsx
@@ -112,15 +112,6 @@ export const ResourceTable = ({ users }: { users: Resource[] }) => {
};
const columns = [
- columnHelper.display({
- id: "options",
- cell: (props) => (
- <RowOptionMenu
- onDelete={() => {}}
- onHide={() => hideUser(props.row.original.id)}
- />
- ),
- }),
columnHelper.accessor("name", {
header: () => (
<>
@@ -157,7 +148,14 @@ export const ResourceTable = ({ users }: { users: Resource[] }) => {
<Bars2Icon className="inline align-top h-4" /> Program
</>
),
- cell: (info) => <TagsInput presetValue={info.getValue()} />,
+ cell: (info) => (
+ <TagsInput
+ presetValue={info.getValue()}
+ presetOptions={presetOptions}
+ setPresetOptions={setPresetOptions}
+ getTagColor={getTagColor}
+ />
+ ),
}),
columnHelper.accessor("summary", {
diff --git a/compass/components/Table/ResourceTable.tsx b/compass/components/Table/ResourceTable.tsx
index a416273..d873c7d 100644
--- a/compass/components/Table/ResourceTable.tsx
+++ b/compass/components/Table/ResourceTable.tsx
@@ -1,51 +1,17 @@
import { PageLayout } from "@/components/PageLayout";
import { RowOpenAction } from "@/components/Table/RowOpenAction";
-import { RowOptionMenu } from "@/components/Table/RowOptionMenu";
import { Table } from "@/components/Table/Table";
import TagsInput from "@/components/TagsInput/Index";
import Resource from "@/utils/models/Resource";
-import { createClient } from "@/utils/supabase/client";
-
import { Bars2Icon, BookmarkIcon } from "@heroicons/react/24/solid";
import { ColumnDef, createColumnHelper } from "@tanstack/react-table";
-import { useEffect, useState } from "react";
+import { useState } from "react";
+import { DataPoint } from "@/components/Table/Table";
export function ResourceTable({ resources }: { resources: Resource[] }) {
- const columnHelper = createColumnHelper<Resource>();
-
- const [data, setData] = useState<Resource[]>([...resources]);
-
- // TODO: Connect data manipulation methods to the database (deleteResource, hideResource, addResource)
- const deleteUser = (userId: number) => {
- console.log(data);
- setData((currentData) =>
- currentData.filter((user) => user.id !== userId)
- );
- };
-
- const hideUser = (userId: number) => {
- console.log(`Toggling visibility for user with ID: ${userId}`);
- setData((currentData) => {
- const newData = currentData
- .map((user) => {
- if (user.id === userId) {
- return { ...user, visible: !user.visible };
- }
- return user;
- })
- .sort((a, b) =>
- a.visible === b.visible ? 0 : a.visible ? -1 : 1
- );
-
- console.log(newData);
- return newData;
- });
- };
-
- const addUser = () => {
- setData([...data]);
- };
-
+ const columnHelper = createColumnHelper<Resource>();
+ const [data, setData] = useState<DataPoint[]>([...resources]);
+
const [presetOptions, setPresetOptions] = useState([
"administrator",
"volunteer",
@@ -79,15 +45,6 @@ export function ResourceTable({ resources }: { resources: Resource[] }) {
};
const columns: ColumnDef<Resource, any>[] = [
- columnHelper.display({
- id: "options",
- cell: (props) => (
- <RowOptionMenu
- onDelete={() => {}}
- onHide={() => hideUser(props.row.original.id)}
- />
- ),
- }),
columnHelper.accessor("name", {
header: () => (
<>
@@ -125,7 +82,12 @@ export function ResourceTable({ resources }: { resources: Resource[] }) {
</>
),
cell: (info) => (
- <TagsInput presetValue={info.getValue()} />
+ <TagsInput
+ presetValue={info.getValue()}
+ presetOptions={presetOptions}
+ setPresetOptions={setPresetOptions}
+ getTagColor={getTagColor}
+ />
),
}),
@@ -145,7 +107,7 @@ export function ResourceTable({ resources }: { resources: Resource[] }) {
<div className="min-h-screen flex flex-col">
{/* icon + title */}
<PageLayout title="Resources" icon={<BookmarkIcon />}>
- <Table initialData={resources} columns={columns}/>
+ <Table data={resources} setData={setData} columns={columns}/>
</PageLayout>
</div>
);
diff --git a/compass/components/Table/Table.tsx b/compass/components/Table/Table.tsx
index fb843fe..af798c2 100644
--- a/compass/components/Table/Table.tsx
+++ b/compass/components/Table/Table.tsx
@@ -1,18 +1,34 @@
-import { Row, ColumnDef, useReactTable, getCoreRowModel, flexRender } from "@tanstack/react-table";
+import {
+ Row,
+ ColumnDef,
+ useReactTable,
+ getCoreRowModel,
+ flexRender,
+ createColumnHelper
+ } from "@tanstack/react-table";
import {
ChangeEvent,
useState,
useEffect,
Key,
+ Dispatch,
+ SetStateAction
} from "react";
import { TableAction } from "./TableAction";
-import {
- PlusIcon,
-} from "@heroicons/react/24/solid";
+import { PlusIcon } from "@heroicons/react/24/solid";
import { rankItem } from "@tanstack/match-sorter-utils";
import Resource from "@/utils/models/Resource";
import Service from "@/utils/models/Service";
-import User from "@/utils/models/User"
+import User from "@/utils/models/User";
+import { RowOptionMenu } from "./RowOptionMenu";
+
+export type DataPoint = Resource | User | Service;
+
+type TableProps = {
+ data: DataPoint[],
+ setData: Dispatch<SetStateAction<DataPoint[]>>
+ columns: ColumnDef<any, any>[]
+};
// For search
const fuzzyFilter = (
@@ -31,15 +47,15 @@ const fuzzyFilter = (
return itemRank.passed;
};
-export const Table = ({ initialData, columns }: { initialData: Resource[], columns: ColumnDef<any, any>[] }) => {
+export const Table = ({ data, columns, setData }: TableProps) => {
+ const columnHelper = createColumnHelper<Resource>();
useEffect(() => {
- const sortedData = [...initialData].sort((a, b) =>
+ const sortedData = [...data].sort((a, b) =>
a.visible === b.visible ? 0 : a.visible ? -1 : 1
);
setData(sortedData);
- }, [initialData]);
+ }, [data, setData]);
- const [data, setData] = useState<(Resource | User | Service)[]>([...initialData]);
// Data manipulation
// TODO: Connect data manipulation methods to the database (deleteResource, hideResource, addResource)
@@ -73,6 +89,19 @@ export const Table = ({ initialData, columns }: { initialData: Resource[], colum
setData([...data]);
};
+ // Add data manipulation options to the first column
+ columns.unshift(
+ columnHelper.display({
+ id: "options",
+ cell: (props) => (
+ <RowOptionMenu
+ onDelete={() => deleteData(props.row.original.id)}
+ onHide={() => hideData(props.row.original.id)}
+ />
+ ),
+ })
+ )
+
// Searching
const [query, setQuery] = useState("");
const handleSearchChange = (e: ChangeEvent) => {
diff --git a/compass/components/TagsInput/Index.tsx b/compass/components/TagsInput/Index.tsx
index 0ddd1c5..f4b021e 100644
--- a/compass/components/TagsInput/Index.tsx
+++ b/compass/components/TagsInput/Index.tsx
@@ -7,7 +7,7 @@ import { CreateNewTagAction } from "./CreateNewTagAction";
interface TagsInputProps {
presetOptions: string[];
presetValue: string | string[];
- setPresetOptions: Dispatch<SetStateAction<string | string[]>>;
+ setPresetOptions: Dispatch<SetStateAction<string[]>>;
getTagColor(tag: string): string;
}