Merge pull request #71 from CS3219-AY2425S1/feat/loading_page

Update files

Author: lsyurea

package.json

@@ -13,6 +13,7 @@
 		"matching-service"
 	],
 	"dependencies": {
-		"nuqs": "^1.19.3"
+		"nuqs": "^1.19.3",
+		"prettier": "^3.3.3"
 	}
 }

peerprep-fe/src/app/(main)/components/filter/FilterBar.tsx

@@ -15,16 +15,12 @@ interface FilterBarProps {
     value: string | string[] | null,
   ) => void;
   removeFilter: (key: keyof FilterState, value?: string) => void;
-  isAdmin?: boolean;
-  buttonCallback?: () => void;
 }
 
 export default function FilterBar({
   filters,
   updateFilter,
   removeFilter,
-  isAdmin = false,
-  buttonCallback,
 }: FilterBarProps) {
   const [searchTerm, setSearchTerm] = useState('');
   const debouncedSearchTerm = useDebounce(searchTerm, 300); // 300ms delay

peerprep-fe/src/app/(main)/match/page.tsx

@@ -1,57 +1,58 @@
-"use client"
+'use client';
 
-import { useState, useEffect } from "react"
-import { User, Code } from "lucide-react"
+import { useState, useEffect } from 'react';
+import { User, Code } from 'lucide-react';
 
 export default function LoadingPage() {
-  const [elapsedTime, setElapsedTime] = useState(0)
-  const [usersWaiting, setUsersWaiting] = useState(4)
+  const [elapsedTime, setElapsedTime] = useState(0);
+  const [usersWaiting, setUsersWaiting] = useState(4);
 
   useEffect(() => {
     const timer = setInterval(() => {
-      setElapsedTime((prevTime) => prevTime + 1)
-    }, 1000)
-
-    return () => clearInterval(timer)
-  }, [])
+      setElapsedTime((prevTime) => prevTime + 1);
+    }, 1000);
+    setUsersWaiting(5);
+    return () => clearInterval(timer);
+  }, []);
 
   return (
-    <div className="min-h-screen bg-[#1a1f2e] text-gray-300 flex flex-col">
-      <header className="p-4 flex justify-between items-center border-b border-gray-700">
+    <div className="flex min-h-screen flex-col bg-[#1a1f2e] text-gray-300">
+      <header className="flex items-center justify-between border-b border-gray-700 p-4">
         <div className="flex items-center space-x-2">
           <Code className="h-6 w-6" />
           <span className="text-lg font-semibold">PeerPrep</span>
         </div>
         <User className="h-6 w-6" />
       </header>
-      <main className="flex-grow flex flex-col items-center justify-center px-4 space-y-6">
-        <div className="animate-spin rounded-full h-16 w-16 border-t-4 border-b-4 border-purple-500"></div>
+      <main className="flex flex-grow flex-col items-center justify-center space-y-6 px-4">
+        <div className="h-16 w-16 animate-spin rounded-full border-b-4 border-t-4 border-purple-500"></div>
         <h1 className="text-2xl font-bold text-white">Finding a match</h1>
-        <p className="text-sm text-center max-w-md">
-          We&apos;re pairing you with another coder. This may take a few moments.
+        <p className="max-w-md text-center text-sm">
+          We&apos;re pairing you with another coder. This may take a few
+          moments.
         </p>
         <div className="w-full max-w-md space-y-2">
-          <div className="h-1 bg-gray-700 rounded-full overflow-hidden">
+          <div className="h-1 overflow-hidden rounded-full bg-gray-700">
             <div
-              className="h-full bg-purple-500 rounded-full"
-              style={{ width: `${(elapsedTime % 60) / 60 * 100}%` }}
+              className="h-full rounded-full bg-purple-500"
+              style={{ width: `${((elapsedTime % 60) / 60) * 100}%` }}
             ></div>
           </div>
-          <div className="text-sm text-center">
+          <div className="text-center text-sm">
             Time elapsed: {elapsedTime} seconds
           </div>
         </div>
         <div className="flex items-center space-x-2 text-sm">
           <User className="h-4 w-4" />
           <span>{usersWaiting} users waiting</span>
         </div>
-        <button className="px-4 py-2 bg-purple-600 text-white rounded-md hover:bg-purple-700 transition-colors w-full max-w-md">
+        <button className="w-full max-w-md rounded-md bg-purple-600 px-4 py-2 text-white transition-colors hover:bg-purple-700">
           Cancel Matching
         </button>
-        <p className="text-sm text-gray-500 mt-4">
+        <p className="mt-4 text-sm text-gray-500">
           Tip: While you wait, why not review some coding concepts?
         </p>
       </main>
     </div>
-  )
-}
+  );
+}

peerprep-fe/src/app/admin/page.tsx

@@ -117,8 +117,6 @@ function AdminPage() {
           filters={filters}
           updateFilter={updateFilter}
           removeFilter={removeFilter}
-          isAdmin
-          buttonCallback={() => setIsAddDialogOpen(true)}
         />
         <ProblemTable
           problems={problems}

peerprep-fe/src/components/navbar/Navbar.tsx

@@ -39,13 +39,18 @@ export default function Navbar() {
             Questions
           </Link>
           {/* Admin users should be able to add questions instead of match */}
-          {!user?.isAdmin ?
+          {!user?.isAdmin ? (
             <Link href="/match" className="text-gray-300 hover:text-white">
               Match
-            </Link> :
-            <Link href="/add-question" className="text-gray-300 hover:text-white">
+            </Link>
+          ) : (
+            <Link
+              href="/add-question"
+              className="text-gray-300 hover:text-white"
+            >
               Add Question
-            </Link>}
+            </Link>
+          )}
           {isAuth ? (
             <DropdownMenu>
               <DropdownMenuTrigger asChild>