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

Loading Page Skeleton

Author: lsyurea

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

@@ -1,7 +1,5 @@
 'use client';
-import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
-import { Settings } from 'lucide-react';
 import { FilterSelect } from './FilterSelect';
 import { FilterBadge } from './FilterBadge';
 import { TopicsPopover } from './TopicsPopover';
@@ -70,25 +68,6 @@ export default function FilterBar({
             onChange={handleSearch}
           />
         </div>
-        <Button
-          variant="outline"
-          size="icon"
-          className="border-gray-700 bg-gray-800"
-        >
-          <Settings className="h-4 w-4" />
-        </Button>
-        {!isAdmin ? (
-          <Button className="bg-green-600 text-white hover:bg-green-700">
-            Match
-          </Button>
-        ) : (
-          <Button
-            className="bg-blue-600 text-white hover:bg-blue-700"
-            onClick={buttonCallback}
-          >
-            Add
-          </Button>
-        )}
       </div>
       <div className="flex flex-wrap gap-2">
         {filters.difficulty && (

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

@@ -0,0 +1,57 @@
+"use client"
+
+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)
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setElapsedTime((prevTime) => prevTime + 1)
+    }, 1000)
+
+    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 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>
+        <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>
+        <div className="w-full max-w-md space-y-2">
+          <div className="h-1 bg-gray-700 rounded-full overflow-hidden">
+            <div
+              className="h-full bg-purple-500 rounded-full"
+              style={{ width: `${(elapsedTime % 60) / 60 * 100}%` }}
+            ></div>
+          </div>
+          <div className="text-sm text-center">
+            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">
+          Cancel Matching
+        </button>
+        <p className="text-sm text-gray-500 mt-4">
+          Tip: While you wait, why not review some coding concepts?
+        </p>
+      </main>
+    </div>
+  )
+}

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

@@ -30,17 +30,22 @@ export default function Navbar() {
           PeerPrep
         </Link>
         <div className="flex items-center space-x-4">
-          {user?.isAdmin && (
+          {user!.isAdmin && (
             <Link href="/admin" className="text-gray-300 hover:text-white">
               Admin
             </Link>
           )}
           <Link href="/" className="text-gray-300 hover:text-white">
             Questions
           </Link>
-          <Link href="/match" className="text-gray-300 hover:text-white">
-            Match
-          </Link>
+          {/* Admin users should be able to add questions instead of match */}
+          {!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">
+              Add Question
+            </Link>}
           {isAuth ? (
             <DropdownMenu>
               <DropdownMenuTrigger asChild>