From dfed92816d64863f917bfef84fd5f4f0cb9c20e8 Mon Sep 17 00:00:00 2001 From: pmoharana-cmd Date: Wed, 24 Apr 2024 19:36:28 -0400 Subject: [PATCH] Intialize resource, service, and training-manual routes --- compass/app/admin/layout.tsx | 4 +- compass/app/auth/actions.ts | 10 +- compass/app/auth/login/page.tsx | 2 +- compass/app/home/layout.tsx | 89 ++++++ compass/app/home/page.tsx | 61 ++++ compass/app/resource/layout.tsx | 13 +- compass/app/resource/page.tsx | 81 +++--- compass/app/service/layout.tsx | 100 +++++++ compass/app/service/page.tsx | 45 +++ compass/app/training-manual/page.tsx | 40 +++ compass/components/Sidebar/Sidebar.tsx | 5 +- compass/components/Table/ResourceIndex.tsx | 306 +++++++++++++++++++++ compass/components/TagsInput/Index.tsx | 4 +- compass/components/TagsInput/TagsArray.tsx | 2 + 14 files changed, 701 insertions(+), 61 deletions(-) create mode 100644 compass/app/home/layout.tsx create mode 100644 compass/app/home/page.tsx create mode 100644 compass/app/service/layout.tsx create mode 100644 compass/app/service/page.tsx create mode 100644 compass/app/training-manual/page.tsx create mode 100644 compass/components/Table/ResourceIndex.tsx diff --git a/compass/app/admin/layout.tsx b/compass/app/admin/layout.tsx index bfe3717..8d00539 100644 --- a/compass/app/admin/layout.tsx +++ b/compass/app/admin/layout.tsx @@ -28,7 +28,7 @@ export default function RootLayout({ if (error) { console.log("Accessed admin page but not logged in"); - router.push("auth/login"); + router.push("/auth/login"); return; } @@ -42,7 +42,7 @@ export default function RootLayout({ console.log( `Accessed admin page but incorrect permissions: ${user.username} ${user.role}` ); - router.push("auth/login"); + router.push("/auth/login"); return; } diff --git a/compass/app/auth/actions.ts b/compass/app/auth/actions.ts index ee4d717..3e05957 100644 --- a/compass/app/auth/actions.ts +++ b/compass/app/auth/actions.ts @@ -21,8 +21,8 @@ export async function login(email: string, password: string) { const supabaseUser = await supabase.auth.getUser(); if (!supabaseUser.data.user) { - revalidatePath("/resource", "layout"); - redirect("/resource"); + revalidatePath("/home", "layout"); + redirect("/home"); } const apiData = await fetch( @@ -37,8 +37,8 @@ export async function login(email: string, password: string) { redirect("/admin"); } - revalidatePath("/resource", "layout"); - redirect("/resource"); + revalidatePath("/home", "layout"); + redirect("/home"); } export async function signOut() { @@ -53,6 +53,6 @@ export async function signOut() { await supabase.auth.signOut(); - revalidatePath("/resource", "layout"); + revalidatePath("/auth/login", "layout"); redirect("/auth/login"); } diff --git a/compass/app/auth/login/page.tsx b/compass/app/auth/login/page.tsx index e196e04..fa945c9 100644 --- a/compass/app/auth/login/page.tsx +++ b/compass/app/auth/login/page.tsx @@ -25,7 +25,7 @@ export default function Page() { async function checkUser() { const { data } = await supabase.auth.getUser(); if (data.user) { - router.push("/resource"); + router.push("/home"); } } checkUser(); diff --git a/compass/app/home/layout.tsx b/compass/app/home/layout.tsx new file mode 100644 index 0000000..eb054de --- /dev/null +++ b/compass/app/home/layout.tsx @@ -0,0 +1,89 @@ +"use client"; +import Sidebar from "@/components/Sidebar/Sidebar"; +import React, { useState } from "react"; +import { ChevronDoubleRightIcon } from "@heroicons/react/24/outline"; +import { createClient } from "@/utils/supabase/client"; +import { useEffect } from "react"; +import { useRouter } from "next/navigation"; +import User, { Role } from "@/utils/models/User"; +import Loading from "@/components/auth/Loading"; + +export default function RootLayout({ + children, +}: { + children: React.ReactNode; +}) { + const [isSidebarOpen, setIsSidebarOpen] = useState(false); + const [user, setUser] = useState(); + const router = useRouter(); + + useEffect(() => { + async function getUser() { + const supabase = createClient(); + + const { data, error } = await supabase.auth.getUser(); + + console.log(data, error); + + if (error) { + console.log("Accessed home page but not logged in"); + router.push("/auth/login"); + return; + } + + const userData = await fetch( + `${process.env.NEXT_PUBLIC_HOST}/api/user?uuid=${data.user.id}` + ); + + setUser(await userData.json()); + } + + getUser(); + }, [router]); + + return ( +
+ {user ? ( +
+ {/* button to open sidebar */} + + {/* sidebar */} +
+ +
+ {/* page ui */} +
+ {children} +
+
+ ) : ( + + )} +
+ ); +} diff --git a/compass/app/home/page.tsx b/compass/app/home/page.tsx new file mode 100644 index 0000000..86be3ef --- /dev/null +++ b/compass/app/home/page.tsx @@ -0,0 +1,61 @@ +"use client"; +import Callout from "@/components/resource/Callout"; +import Card from "@/components/resource/Card"; +import { LandingSearchBar } from "@/components/resource/LandingSearchBar"; +import { + BookOpenIcon, + BookmarkIcon, + ClipboardIcon, +} from "@heroicons/react/24/solid"; +import Image from "next/image"; +import Link from "next/link"; + +export default function Page() { + return ( +
+ {/* icon + title */} +
+
+ Compass Center logo. +

+ Compass Center Advocate Landing Page +

+
+ + Welcome! Below you will find a list of resources for the + Compass Center's trained advocates. These materials + serve to virtually provide a collection of advocacy, + resource, and hotline manuals and information. + + {" "} + If you are an advocate looking for the contact + information of a particular Compass Center employee, + please directly contact your staff back-up or the person + in charge of your training. + + +
+
+ {/* link to different pages */} +
+ + } text="Resources" /> + + + } text="Services" /> + + + } text="Training Manuals" /> + +
+ {/* search bar */} + +
+
+ ); +} diff --git a/compass/app/resource/layout.tsx b/compass/app/resource/layout.tsx index 589448e..9d1dbd8 100644 --- a/compass/app/resource/layout.tsx +++ b/compass/app/resource/layout.tsx @@ -1,10 +1,11 @@ "use client"; + import Sidebar from "@/components/Sidebar/Sidebar"; import React, { useState } from "react"; import { ChevronDoubleRightIcon } from "@heroicons/react/24/outline"; import { createClient } from "@/utils/supabase/client"; -import { useEffect } from "react"; import { useRouter } from "next/navigation"; +import { useEffect } from "react"; import User, { Role } from "@/utils/models/User"; import Loading from "@/components/auth/Loading"; @@ -14,8 +15,8 @@ export default function RootLayout({ children: React.ReactNode; }) { const [isSidebarOpen, setIsSidebarOpen] = useState(false); - const [user, setUser] = useState(); const router = useRouter(); + const [user, setUser] = useState(); useEffect(() => { async function getUser() { @@ -27,7 +28,7 @@ export default function RootLayout({ if (error) { console.log("Accessed resource page but not logged in"); - router.push("auth/login"); + router.push("/auth/login"); return; } @@ -35,7 +36,9 @@ export default function RootLayout({ `${process.env.NEXT_PUBLIC_HOST}/api/user?uuid=${data.user.id}` ); - setUser(await userData.json()); + const user: User = await userData.json(); + + setUser(user); } getUser(); @@ -66,9 +69,9 @@ export default function RootLayout({ } w-64 transition duration-300 ease-in-out`} > diff --git a/compass/app/resource/page.tsx b/compass/app/resource/page.tsx index 18842ea..fede31d 100644 --- a/compass/app/resource/page.tsx +++ b/compass/app/resource/page.tsx @@ -1,54 +1,45 @@ "use client"; -import Callout from "@/components/resource/Callout"; -import Card from "@/components/resource/Card"; -import { LandingSearchBar } from "@/components/resource/LandingSearchBar"; -import { - BookOpenIcon, - BookmarkIcon, - ClipboardIcon, -} from "@heroicons/react/24/solid"; -import Image from "next/image"; + +import { PageLayout } from "@/components/PageLayout"; +import { Table } from "@/components/Table/Index"; +import User from "@/utils/models/User"; +import { createClient } from "@/utils/supabase/client"; + +import { UsersIcon } from "@heroicons/react/24/solid"; +import { useEffect, useState } from "react"; export default function Page() { + const [users, setUsers] = useState([]); + + useEffect(() => { + async function getUser() { + 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/user/all?uuid=${data.user.id}` + ); + + const users: User[] = await userListData.json(); + + setUsers(users); + } + + getUser(); + }, []); + return (
{/* icon + title */} -
-
- Compass Center logo. -

- Compass Center Advocate Landing Page -

-
- - Welcome! Below you will find a list of resources for the - Compass Center's trained advocates. These materials - serve to virtually provide a collection of advocacy, - resource, and hotline manuals and information. - - {" "} - If you are an advocate looking for the contact - information of a particular Compass Center employee, - please directly contact your staff back-up or the person - in charge of your training. - - -
-
- {/* link to different pages */} -
- } text="Resources" /> - } text="Services" /> - } text="Training Manuals" /> -
- {/* search bar */} - -
+ }> + + ); } diff --git a/compass/app/service/layout.tsx b/compass/app/service/layout.tsx new file mode 100644 index 0000000..8d00539 --- /dev/null +++ b/compass/app/service/layout.tsx @@ -0,0 +1,100 @@ +"use client"; + +import Sidebar from "@/components/Sidebar/Sidebar"; +import React, { useState } from "react"; +import { ChevronDoubleRightIcon } from "@heroicons/react/24/outline"; +import { createClient } from "@/utils/supabase/client"; +import { useRouter } from "next/navigation"; +import { useEffect } from "react"; +import User, { Role } from "@/utils/models/User"; +import Loading from "@/components/auth/Loading"; + +export default function RootLayout({ + children, +}: { + children: React.ReactNode; +}) { + const [isSidebarOpen, setIsSidebarOpen] = useState(false); + const router = useRouter(); + const [user, setUser] = useState(); + + useEffect(() => { + async function getUser() { + const supabase = createClient(); + + const { data, error } = await supabase.auth.getUser(); + + console.log(data, error); + + if (error) { + console.log("Accessed admin page but not logged in"); + router.push("/auth/login"); + return; + } + + const userData = await fetch( + `${process.env.NEXT_PUBLIC_HOST}/api/user?uuid=${data.user.id}` + ); + + const user: User = await userData.json(); + + if (user.role !== Role.ADMIN) { + console.log( + `Accessed admin page but incorrect permissions: ${user.username} ${user.role}` + ); + router.push("/auth/login"); + return; + } + + setUser(user); + } + + getUser(); + }, [router]); + + return ( +
+ {user ? ( +
+ {/* button to open sidebar */} + + {/* sidebar */} +
+ +
+ {/* page ui */} +
+ {children} +
+
+ ) : ( + + )} +
+ ); +} diff --git a/compass/app/service/page.tsx b/compass/app/service/page.tsx new file mode 100644 index 0000000..fede31d --- /dev/null +++ b/compass/app/service/page.tsx @@ -0,0 +1,45 @@ +"use client"; + +import { PageLayout } from "@/components/PageLayout"; +import { Table } from "@/components/Table/Index"; +import User from "@/utils/models/User"; +import { createClient } from "@/utils/supabase/client"; + +import { UsersIcon } from "@heroicons/react/24/solid"; +import { useEffect, useState } from "react"; + +export default function Page() { + const [users, setUsers] = useState([]); + + useEffect(() => { + async function getUser() { + 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/user/all?uuid=${data.user.id}` + ); + + const users: User[] = await userListData.json(); + + setUsers(users); + } + + getUser(); + }, []); + + return ( +
+ {/* icon + title */} + }> +
+ + + ); +} diff --git a/compass/app/training-manual/page.tsx b/compass/app/training-manual/page.tsx new file mode 100644 index 0000000..c8263e2 --- /dev/null +++ b/compass/app/training-manual/page.tsx @@ -0,0 +1,40 @@ +// page.tsx +import React from "react"; +import Head from "next/head"; +import Link from "next/link"; + +const ComingSoonPage: React.FC = () => { + return ( + <> + + Training Manuals - Coming Soon + + +
+
+

+ Training Manuals +

+

+ Our training manuals page is under construction. +

+

+ Stay tuned for updates! +

+
+ + + +
+
+
+ + ); +}; + +export default ComingSoonPage; diff --git a/compass/components/Sidebar/Sidebar.tsx b/compass/components/Sidebar/Sidebar.tsx index 0a7fa63..2208035 100644 --- a/compass/components/Sidebar/Sidebar.tsx +++ b/compass/components/Sidebar/Sidebar.tsx @@ -5,6 +5,7 @@ import { BookmarkIcon, ClipboardIcon, BookOpenIcon, + LockClosedIcon, } from "@heroicons/react/24/solid"; import { SidebarItem } from "./SidebarItem"; import { UserProfile } from "../resource/UserProfile"; @@ -47,7 +48,7 @@ const Sidebar: React.FC = ({
+ + {table.getHeaderGroups().map((headerGroup) => ( + + {headerGroup.headers.map((header, i) => ( + + ))} + + ))} + + + {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 ( + + {row.getVisibleCells().map((cell, i) => ( + + ))} + + ); + })} + + + + + + +
+ {header.isPlaceholder + ? null + : flexRender( + header.column.columnDef.header, + header.getContext() + )} +
+ {flexRender( + cell.column.columnDef.cell, + cell.getContext() + )} +
+ + + New + +
+
+ ); +}; diff --git a/compass/components/TagsInput/Index.tsx b/compass/components/TagsInput/Index.tsx index 94c6c34..e4252ca 100644 --- a/compass/components/TagsInput/Index.tsx +++ b/compass/components/TagsInput/Index.tsx @@ -17,7 +17,9 @@ const TagsInput: React.FC = ({ const [inputValue, setInputValue] = useState(""); const [cellSelected, setCellSelected] = useState(false); const [tags, setTags] = useState>( - new Set(presetValue ? [presetValue] : []) + typeof presetValue === "string" + ? new Set([presetValue]) + : new Set(presetValue) ); const [options, setOptions] = useState>(new Set(presetOptions)); const dropdown = useRef(null); diff --git a/compass/components/TagsInput/TagsArray.tsx b/compass/components/TagsInput/TagsArray.tsx index c655441..973ddf8 100644 --- a/compass/components/TagsInput/TagsArray.tsx +++ b/compass/components/TagsInput/TagsArray.tsx @@ -7,6 +7,8 @@ export interface Tags { } export const TagsArray = ({ tags, handleDelete, active = false }: Tags) => { + console.log(tags); + return (
{Array.from(tags).map((tag, index) => {