Add next route for adding user and add functionality for user table

compass/app/admin/page.tsx

@@ -10,6 +10,7 @@ import { useEffect, useState } from "react";
 
 export default function Page() {
     const [users, setUsers] = useState<User[]>([]);
+    const [uuid, setUuid] = useState<string>("");
 
     useEffect(() => {
         async function getUser() {
@@ -22,8 +23,10 @@ export default function Page() {
                 return;
             }
 
+            setUuid(data.user.id);
+
             const userListData = await fetch(
-                `${process.env.NEXT_PUBLIC_HOST}/api/user/all?uuid=${data.user.id}`
+                `/api/user/all?uuid=${data.user.id}`
             );
 
             const users: User[] = await userListData.json();
@@ -38,7 +41,8 @@ export default function Page() {
         <div className="min-h-screen flex flex-col">
             {/* icon + title  */}
             <PageLayout title="Users" icon={<UsersIcon />}>
-                <UserTable data={users} setData={setUsers} />
+                {/* TODO: REPLACE UUID WITH HTTP BEARER TOKEN */}
+                <UserTable data={users} setData={setUsers} uuid={uuid} />
             </PageLayout>
         </div>
     );

compass/app/api/user/all/route.ts

@@ -9,7 +9,7 @@ export async function GET(request: Request) {
     const { searchParams } = new URL(request.url);
     const uuid = searchParams.get("uuid");
 
-    const data = await fetch(`${apiEndpoint}?user_id=${uuid}`);
+    const data = await fetch(`${apiEndpoint}?uuid=${uuid}`);
 
     const userData: User[] = await data.json();
     // TODO: Remove make every user visible

compass/app/api/user/create/route.ts

@@ -0,0 +1,41 @@
+import { NextResponse } from "next/server";
+import User from "@/utils/models/User";
+
+export async function POST(request: Request) {
+    const apiEndpoint = `${process.env.NEXT_PUBLIC_API_HOST}/api/user/create`;
+
+    try {
+        const userData = await request.json();
+        userData.role = userData.role.toUpperCase();
+        userData.program = userData.program.map((program: string) =>
+            program.toUpperCase()
+        );
+
+        console.log("USER DATA", JSON.stringify(userData));
+
+        const { searchParams } = new URL(request.url);
+        const uuid = searchParams.get("uuid");
+
+        // Send the POST request to the backend
+        const response = await fetch(`${apiEndpoint}?uuid=${uuid}`, {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+            },
+            body: JSON.stringify(userData),
+        });
+
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        const createdUser: User = await response.json();
+        return NextResponse.json(createdUser, { status: response.status });
+    } catch (error) {
+        console.error("Error creating user:", error);
+        return NextResponse.json(
+            { error: "Failed to create user" },
+            { status: 500 }
+        );
+    }
+}

compass/components/Drawer/CreateDrawer.tsx

@@ -26,8 +26,6 @@ const CreateDrawer: FunctionComponent<CreateDrawerProps> = ({
         e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
     ) => {
         const { name, value } = e.target;
-        console.log(newItemContent);
-        console.log(Object.keys(newItemContent).length);
         setNewItemContent((prev: any) => ({
             ...prev,
             [name]: value,
@@ -45,6 +43,7 @@ const CreateDrawer: FunctionComponent<CreateDrawerProps> = ({
 
     const handleCreate = () => {
         if (onCreate(newItemContent)) {
+            console.log("newItemContent", newItemContent);
             setNewItemContent({});
             setIsOpen(false);
         }

compass/components/Drawer/Drawer.tsx

@@ -79,13 +79,14 @@ const Drawer: FunctionComponent<DrawerProps> = ({
                     return row;
                 });
             });
+
+            console.log("Send API request to update row content");
         }
 
         setIsOpen(!isOpen);
         if (isFull) {
             setIsFull(!isFull);
         }
-        console.log("Send API request to update row content");
     };
 
     const toggleDrawerFullScreen = () => setIsFull(!isFull);

compass/components/Table/Table.tsx

@@ -27,6 +27,7 @@ type TableProps<T extends DataPoint> = {
     setData: Dispatch<SetStateAction<T[]>>;
     columns: ColumnDef<T, any>[];
     details: Details[];
+    createEndpoint: string;
 };
 
 /** Validates that all required fields in a new item have values */
@@ -76,9 +77,22 @@ export default function Table<T extends DataPoint>({
     setData,
     columns,
     details,
+    createEndpoint,
 }: TableProps<T>) {
     const columnHelper = createColumnHelper<T>();
 
+    const createRow = async (newItem: any) => {
+        const response = await fetch(createEndpoint, {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+            },
+            body: JSON.stringify(newItem),
+        });
+
+        return response;
+    };
+
     // /** Sorting function based on visibility */
     // const visibilitySort = (a: T, b: T) =>
     //     a.visible === b.visible ? 0 : a.visible ? -1 : 1;
@@ -224,8 +238,16 @@ export default function Table<T extends DataPoint>({
                                         return false;
                                     }
 
-                                    newItem.visible = true;
-                                    setData((prev) => [...prev, newItem]);
+                                    createRow(newItem).then((response) => {
+                                        if (response.ok) {
+                                            newItem.visible = true;
+                                            setData((prev) => [
+                                                ...prev,
+                                                newItem,
+                                            ]);
+                                        }
+                                    });
+
                                     return true;
                                 }}
                             />

compass/components/Table/UserTable.tsx

@@ -19,6 +19,7 @@ import { Tag } from "../TagsInput/Tag";
 type UserTableProps = {
     data: User[];
     setData: Dispatch<SetStateAction<User[]>>;
+    uuid: string;
 };
 
 /**
@@ -26,7 +27,7 @@ type UserTableProps = {
  * @param props.data Stateful list of users to be displayed by the table
  * @param props.setData State setter for the list of users
  */
-export default function UserTable({ data, setData }: UserTableProps) {
+export default function UserTable({ data, setData, uuid }: UserTableProps) {
     const columnHelper = createColumnHelper<User>();
 
     const [rolePresets, setRolePresets] = useState([
@@ -144,6 +145,7 @@ export default function UserTable({ data, setData }: UserTableProps) {
             setData={setData}
             columns={columns}
             details={userDetails}
+            createEndpoint={`/api/user/create?uuid=${uuid}`}
         />
     );
 }