From 14eebbefba598e518dee6e6ab6f9810bef25b841 Mon Sep 17 00:00:00 2001
From: Nick A <nicolas.a.asanov@gmail.com>
Date: Tue, 15 Oct 2024 19:15:08 -0400
Subject: [PATCH] Created mock/test table and resource page to see if
 implementation works

---
 compass/app/resource_test/page.tsx         | 177 ++++++++++++++++++++
 compass/components/Table/ResourceIndex.tsx |  13 +-
 compass/components/Table/TestIndex.tsx     | 180 +++++++++++++++++++++
 compass/components/TagsInput/TagsArray.tsx |   2 +-
 4 files changed, 365 insertions(+), 7 deletions(-)
 create mode 100644 compass/app/resource_test/page.tsx
 create mode 100644 compass/components/Table/TestIndex.tsx

diff --git a/compass/app/resource_test/page.tsx b/compass/app/resource_test/page.tsx
new file mode 100644
index 0000000..519391e
--- /dev/null
+++ b/compass/app/resource_test/page.tsx
@@ -0,0 +1,177 @@
+"use client";
+
+import { PageLayout } from "@/components/PageLayout";
+import { RowOpenAction } from "@/components/Table/RowOpenAction";
+import { RowOptionMenu } from "@/components/Table/RowOptionMenu";
+import { TestTable } from "@/components/Table/TestIndex";
+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";
+
+export default function Page() {
+    const [resources, setResources] = useState<Resource[]>([]);
+    const columnHelper = createColumnHelper<Resource>();
+    
+    useEffect(() => {
+        async function getResources() {
+            const supabase = createClient();
+
+            const { data, error } = await supabase.auth.getUser();
+
+            if (error) {
+                console.log("Accessed admin page but not logged in");
+                return;
+            }
+
+            const userListData = await fetch(
+                `${process.env.NEXT_PUBLIC_HOST}/api/resource/all?uuid=${data.user.id}`
+            );
+
+            const resourcesAPI: Resource[] = await userListData.json();
+            
+            setResources(resourcesAPI);
+        }
+
+        getResources();
+    }, []);
+
+    const [data, setData] = useState<Resource[]>([]);
+
+    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 [presetOptions, setPresetOptions] = useState([
+        "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) {
+            const updatedData = [...data];
+            updatedData[dataIndex] = updatedRow;
+            setData(updatedData);
+        }
+    };
+
+    const columns: ColumnDef<Resource, any>[] = [
+        columnHelper.display({
+            id: "options",
+            cell: (props) => (
+                <RowOptionMenu
+                    onDelete={() => {}}
+                    onHide={() => hideUser(props.row.original.id)}
+                />
+            ),
+        }),
+        columnHelper.accessor("name", {
+            header: () => (
+                <>
+                    <Bars2Icon className="inline align-top h-4" /> Name
+                </>
+            ),
+            cell: (info) => (
+                <RowOpenAction
+                    title={info.getValue()}
+                    rowData={info.row.original}
+                    onRowUpdate={handleRowUpdate}
+                />
+            ),
+        }),
+        columnHelper.accessor("link", {
+            header: () => (
+                <>
+                    <Bars2Icon className="inline align-top h-4" /> Link
+                </>
+            ),
+            cell: (info) => (
+                <a
+                    href={info.getValue()}
+                    target={"_blank"}
+                    className="ml-2 text-gray-500 underline hover:text-gray-400"
+                >
+                    {info.getValue()}
+                </a>
+            ),
+        }),
+        columnHelper.accessor("program", {
+            header: () => (
+                <>
+                    <Bars2Icon className="inline align-top h-4" /> Program
+                </>
+            ),
+            cell: (info) => (
+                <TagsInput presetValue={info.getValue()} />
+            ),
+        }),
+
+        columnHelper.accessor("summary", {
+            header: () => (
+                <>
+                    <Bars2Icon className="inline align-top h-4" /> Summary
+                </>
+            ),
+            cell: (info) => (
+                <span className="ml-2 text-gray-500">{info.getValue()}</span>
+            ),
+        }),
+    ];
+
+    return (
+        <div className="min-h-screen flex flex-col">
+            {/* icon + title  */}
+            <PageLayout title="Resources" icon={<BookmarkIcon />}>
+                <TestTable initialData={resources} columns={columns}/>
+            </PageLayout>
+        </div>
+    );
+}
diff --git a/compass/components/Table/ResourceIndex.tsx b/compass/components/Table/ResourceIndex.tsx
index a714836..99dcbd3 100644
--- a/compass/components/Table/ResourceIndex.tsx
+++ b/compass/components/Table/ResourceIndex.tsx
@@ -61,7 +61,13 @@ export const ResourceTable = ({ users }: { users: Resource[] }) => {
         );
         setData(sortedUsers);
     }, [users]);
-
+    
+    const [presetOptions, setPresetOptions] = useState([
+        "administrator",
+        "volunteer",
+        "employee",
+    ]);
+    
     const deleteUser = (userId: number) => {
         console.log(data);
         setData((currentData) =>
@@ -87,11 +93,6 @@ export const ResourceTable = ({ users }: { users: Resource[] }) => {
             return newData;
         });
     };
-    const [presetOptions, setPresetOptions] = useState([
-        "administrator",
-        "volunteer",
-        "employee",
-    ]);
     const [tagColors, setTagColors] = useState(new Map());
 
     const getTagColor = (tag: string) => {
diff --git a/compass/components/Table/TestIndex.tsx b/compass/components/Table/TestIndex.tsx
new file mode 100644
index 0000000..11c446d
--- /dev/null
+++ b/compass/components/Table/TestIndex.tsx
@@ -0,0 +1,180 @@
+// for showcasing to compass
+import {
+    Cell,
+    ColumnDef,
+    Row,
+    createColumnHelper,
+    flexRender,
+    getCoreRowModel,
+    getFilteredRowModel,
+    sortingFns,
+    useReactTable,
+} from "@tanstack/react-table";
+import {
+    ChangeEvent,
+    useState,
+    useEffect,
+    FunctionComponent,
+    useRef,
+    ChangeEventHandler,
+    Key,
+} from "react";
+import { RowOptionMenu } from "./RowOptionMenu";
+import { RowOpenAction } from "./RowOpenAction";
+import { TableAction } from "./TableAction";
+import {
+    AtSymbolIcon,
+    Bars2Icon,
+    ArrowDownCircleIcon,
+    PlusIcon,
+} from "@heroicons/react/24/solid";
+import TagsInput from "../TagsInput/Index";
+import { rankItem } from "@tanstack/match-sorter-utils";
+import Resource from "@/utils/models/Resource";
+
+// For search
+const fuzzyFilter = (
+    row: Row<any>,
+    columnId: string,
+    value: any,
+    addMeta: (meta: any) => void
+) => {
+    // Rank the item
+    const itemRank = rankItem(row.getValue(columnId), value);
+
+    // Store the ranking info
+    addMeta(itemRank);
+
+    // Return if the item should be filtered in/out
+    return itemRank.passed;
+};
+
+// TODO: Rename everything to resources
+export const TestTable = ({ initialData, columns }: { initialData: Resource[], columns: ColumnDef<any, any>[] }) => {
+    useEffect(() => {
+        const sortedData = [...initialData].sort((a, b) =>
+            a.visible === b.visible ? 0 : a.visible ? -1 : 1
+        );
+        setData(sortedData);
+    }, [initialData]);
+
+    const [data, setData] = useState<Resource[]>([...initialData]);
+
+    // Searching
+    const [query, setQuery] = useState("");
+    const handleSearchChange = (e: ChangeEvent) => {
+        const target = e.target as HTMLInputElement;
+        setQuery(String(target.value));
+    };
+
+    const handleCellChange = (e: ChangeEvent, key: Key) => {
+        const target = e.target as HTMLInputElement;
+        console.log(key);
+    };
+
+    // TODO: Filtering
+
+    // TODO: Sorting
+
+    // added this fn for editing rows
+
+
+    const table = useReactTable({
+        columns,
+        data,
+        filterFns: {
+            fuzzy: fuzzyFilter,
+        },
+        state: {
+            globalFilter: query,
+        },
+        onGlobalFilterChange: setQuery,
+        globalFilterFn: fuzzyFilter,
+        getCoreRowModel: getCoreRowModel(),
+    });
+
+    const handleRowData = (row: any) => {
+        const rowData: any = {};
+        row.cells.forEach((cell: any) => {
+            rowData[cell.column.id] = cell.value;
+        });
+        // Use rowData object containing data from all columns for the current row
+        console.log(rowData);
+        return rowData;
+    };
+
+    return (
+        <div className="flex flex-col">
+            <div className="flex flex-row justify-end">
+                <TableAction query={query} handleChange={handleSearchChange} />
+            </div>
+            <table className="w-full text-xs text-left rtl:text-right">
+                <thead className="text-xs text-gray-500 capitalize">
+                    {table.getHeaderGroups().map((headerGroup) => (
+                        <tr key={headerGroup.id}>
+                            {headerGroup.headers.map((header, i) => (
+                                <th
+                                    scope="col"
+                                    className={
+                                        "p-2 border-gray-200 border-y font-medium " +
+                                        (1 < i && i < columns.length - 1
+                                            ? "border-x"
+                                            : "")
+                                    }
+                                    key={header.id}
+                                >
+                                    {header.isPlaceholder
+                                        ? null
+                                        : flexRender(
+                                              header.column.columnDef.header,
+                                              header.getContext()
+                                          )}
+                                </th>
+                            ))}
+                        </tr>
+                    ))}
+                </thead>
+                <tbody>
+                    {table.getRowModel().rows.map((row) => {
+                        // Individual row
+                        const isUserVisible = row.original.visible;
+                        const rowClassNames = `text-gray-800 border-y lowercase hover:bg-gray-50 ${
+                            !isUserVisible ? "bg-gray-200 text-gray-500" : ""
+                        }`;
+                        return (
+                            <tr className={rowClassNames} key={row.id}>
+                                {row.getVisibleCells().map((cell, i) => (
+                                    <td
+                                        key={cell.id}
+                                        className={
+                                            "[&:nth-child(n+3)]:border-x relative first:text-left first:px-0 last:border-none"
+                                        }
+                                    >
+                                        {flexRender(
+                                            cell.column.columnDef.cell,
+                                            cell.getContext()
+                                        )}
+                                    </td>
+                                ))}
+                            </tr>
+                        );
+                    })}
+                </tbody>
+                <tfoot>
+                    <tr>
+                        <td
+                            className="p-3 border-y border-gray-200 text-gray-600 hover:bg-gray-50"
+                            colSpan={100}
+                            onClick={addUser}
+                        >
+                            <span className="flex ml-1 text-gray-500">
+                                <PlusIcon className="inline h-4 mr-1" />
+                                New
+                            </span>
+                        </td>
+                    </tr>
+                </tfoot>
+            </table>
+        </div>
+    );
+};
diff --git a/compass/components/TagsInput/TagsArray.tsx b/compass/components/TagsInput/TagsArray.tsx
index c014e7c..845e739 100644
--- a/compass/components/TagsInput/TagsArray.tsx
+++ b/compass/components/TagsInput/TagsArray.tsx
@@ -7,7 +7,7 @@ export interface Tags {
 }
 
 export const TagsArray = ({ tags, handleDelete, active = false }: Tags) => {
-    console.log(tags);
+    // console.log(tags);
 
     return (
         <div className="flex ml-2 flex-wrap gap-2 items-center">