Merge pull request #70 from CS3219-AY2425S1/ms3-frontend

MS3 Frontend features

Author: jmsandiegoo

frontend/package-lock.json

@@ -29,6 +29,7 @@
     "clsx": "^2.1.1",
     "cmdk": "^1.0.0",
     "date-fns": "^3.6.0",
+    "jsonwebtoken": "^9.0.2",
     "lucide-react": "^0.441.0",
     "next": "^14.2.10",
     "qs": "^6.13.0",

frontend/package.json

@@ -6,11 +6,19 @@ import { QuestionsResponse } from "@/types/Question";
 import { CategoriesResponse } from "@/types/Category";
 import { questionTableColumns } from "./column";
 import { DataTable } from "./data-table";
+import { redirect } from "next/navigation";
 
 export default async function QuestionTable() {
   const questionsResponse: QuestionsResponse = await getQuestions();
   const categoriesResponse: CategoriesResponse = await getQuestionCategories();
 
+  if (
+    questionsResponse.statusCode === 401 ||
+    categoriesResponse.statusCode === 401
+  ) {
+    redirect("/signin");
+  }
+
   if (!questionsResponse.data) {
     return <div>{questionsResponse.message}</div>;
   }

frontend/src/app/dashboard/_components/QuestionTable/QuestionTable.tsx

@@ -8,6 +8,8 @@ import { Table } from "@tanstack/react-table";
 import { CreateQuestionModal } from "../Forms/CreateQuestionModal";
 import { QuestionTableContext } from "@/contexts/QuestionTableContext";
 import { useContext } from "react";
+import { useUser } from "@/contexts/UserContext";
+import { RoleEnum } from "@/types/Role";
 
 interface DataTableToolbarProps<TData> {
   table: Table<TData>;
@@ -17,6 +19,7 @@ interface DataTableToolbarProps<TData> {
 export default function DataTableToolbar<TData>({
   table,
 }: DataTableToolbarProps<TData>) {
+  const user = useUser();
   const { categories } = useContext(QuestionTableContext);
 
   return (
@@ -62,10 +65,12 @@ export default function DataTableToolbar<TData>({
             />
           </div>
           <CreateQuestionModal>
-            <Button variant="soft">
-              <LucidePlus className="mr-2" />
-              Create question
-            </Button>
+            {user?.roles.includes(RoleEnum.enum.admin) && (
+              <Button variant="soft">
+                <LucidePlus className="mr-2" />
+                Create question
+              </Button>
+            )}
           </CreateQuestionModal>
         </div>
       </div>

frontend/src/app/dashboard/_components/QuestionTable/data-table-toolbar.tsx

@@ -21,14 +21,15 @@ import {
   TableRow,
 } from "@/components/ui/table";
 
-import { useState } from "react";
+import { useMemo, useState } from "react";
 
 import { DataTablePagination } from "./data-table-pagination";
 
 import DataTableToolbar from "./data-table-toolbar";
 
 import { Card } from "@/components/ui/card";
 import { QuestionTableProvider } from "@/contexts/QuestionTableContext";
+import { useUser } from "@/contexts/UserContext";
 
 interface DataTableProps<TData, TValue> {
   columns: ColumnDef<TData, TValue>[];
@@ -40,12 +41,22 @@ export function DataTable<TData, TValue>({
   columns,
   data,
 }: DataTableProps<TData, TValue>) {
+  const user = useUser();
+
+  const isAdmin = useMemo(() => {
+    return user?.roles.includes("admin");
+  }, [user]);
+
+  const filteredColumns = isAdmin
+    ? columns
+    : columns.filter((column) => column.id !== "Action");
+
   const [sorting, setSorting] = useState<SortingState>([]);
   const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
 
   const table = useReactTable({
     data,
-    columns,
+    columns: filteredColumns,
     getCoreRowModel: getCoreRowModel(),
     getPaginationRowModel: getPaginationRowModel(),
     onSortingChange: setSorting,

frontend/src/app/dashboard/_components/QuestionTable/data-table.tsx

@@ -1,3 +1,9 @@
+"use client";
+
+import { useUser } from "@/contexts/UserContext";
+
 export default function WelcomeMessage() {
-  return <h1 className="text-xl font-bold">Welcome Back, {"[user name]"}!</h1>;
+  const user = useUser();
+
+  return <h1 className="text-xl font-bold">Welcome Back, {user?.email}!</h1>;
 }

frontend/src/app/dashboard/_components/WelcomeMessage.tsx

@@ -1,13 +1,19 @@
+// "use client";
+
 import Navbar from "@/components/Navbar";
 import { Toaster } from "@/components/ui/toaster";
-import { ReactNode } from "react";
+import { UserProvider } from "@/contexts/UserContext";
+import React from "react";
+import { PropsWithChildren } from "react";
 
-export default function DashboardLayout({ children }: { children: ReactNode }) {
+export default function DashboardLayout({ children }: PropsWithChildren) {
   return (
     <>
-      <Navbar />
-      <main>{children}</main>
-      <Toaster />
+      <UserProvider>
+        <Navbar />
+        <main>{children}</main>
+        <Toaster />
+      </UserProvider>
     </>
   );
 }

frontend/src/app/dashboard/layout.tsx

@@ -72,6 +72,7 @@
     --destructive-foreground: #f7f9fb;
     --border: #2b3545;
     --input: #262626;
+    --input-background-100: #404040;
     --input-foreground: #f3f4f6;
     --input-foreground-100: #9ca3af;
     --input: #262626;
@@ -117,6 +118,7 @@
     --destructive-foreground: #f7f9fb;
     --border: #2b3545;
     --input: #262626;
+    --input-background-100: #404040;
     --input-foreground: #f3f4f6;
     --input-foreground-100: #9ca3af;
     --ring: #6f8ca4;