moved data manipulation logic into Table

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", {

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>
     );

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

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