Implement Basic Version of Favourites Page (SE310-1#57)

* Created Favourites button in navbar

Also set up the Favourites page folder, following the convention established by the previous group. The index and css files are yet to be implemented.

* Placeholder implementation of favourites page

* Created route for favourites page

* /fix - route to favourites page

Fixed the route, was previously incorrectly set so that only unauthenticated users could access the favourites page, and authenticated users were redirected to login. Fixed to now be vice versa

* Fixed typo in App.jsx

Author: vdav02

.vs/ProjectSettings.json

@@ -0,0 +1,3 @@
+{
+  "CurrentProjectSetting": null
+}

.vs/VSWorkspaceState.json

@@ -0,0 +1,6 @@
+{
+  "ExpandedNodes": [
+    ""
+  ],
+  "PreviewInSolutionExplorer": false
+}

.vs/slnx.sqlite

@@ -1,44 +1,49 @@
-import {BrowserRouter, Navigate, Route, Routes,} from 'react-router-dom'
-import {useAuthContext} from './hooks/useAuthContext'
+import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";
+import { useAuthContext } from "./hooks/useAuthContext";
 import Navbar from "./Components/Navbar/index.jsx";
 import Login from "./Pages/Login/index.jsx";
 import Signup from "./Pages/Signup/index.jsx";
 import Home from "./Pages/Home/index.jsx";
-import './App.css'
-import MovieDetailsPage from './Pages/Details';
+import "./App.css";
+import MovieDetailsPage from "./Pages/Details";
 import Search from "./Pages/Search/Search.jsx";
+import Favourites from "./Pages/Favourites";
 
 function App() {
-    const {user} = useAuthContext()
+  const { user } = useAuthContext();
 
-    return (
-        <div className="App">
-            <BrowserRouter>
-                <Navbar/>
-                <div className="pages">
-                    <Routes>
-                        <Route
-                            path="/"
-                            element={user ? <Home/> : <Navigate to="/login"/>}
-                        />
-                        <Route
-                            path="/search"
-                            element={user ? <Search/> : <Navigate to="/login"/>}
-                        />
-                        <Route path="/detail/:id" element={<MovieDetailsPage/>} />
-                        <Route
-                            path="/login"
-                            element={!user ? <Login/> : <Navigate to="/"/>}
-                        />
-                        <Route
-                            path="/signup"
-                            element={!user ? <Signup/> : <Navigate to="/"/>}
-                        />
-                    </Routes>
-                </div>
-            </BrowserRouter>
+  return (
+    <div className="App">
+      <BrowserRouter>
+        <Navbar />
+        <div className="pages">
+          <Routes>
+            <Route
+              path="/"
+              element={user ? <Home /> : <Navigate to="/login" />}
+            />
+            <Route
+              path="/search"
+              element={user ? <Search /> : <Navigate to="/login" />}
+            />
+            <Route path="/detail/:id" element={<MovieDetailsPage />} />
+            <Route
+              path="/login"
+              element={!user ? <Login /> : <Navigate to="/" />}
+            />
+            <Route
+              path="/signup"
+              element={!user ? <Signup /> : <Navigate to="/" />}
+            />
+            <Route
+              path="/favourites"
+              element={user ? <Favourites /> : <Navigate to="/signup" />}
+            />
+          </Routes>
         </div>
-    )
+      </BrowserRouter>
+    </div>
+  );
 }
 
 export default App;

client/src/App.jsx

@@ -21,6 +21,9 @@ const Navbar = () => {
                     {user ? (
                         <div>
                             <span>Welcome {user.username}</span>
+                            <button className="button-13">
+                                <Link to="/favourites">Favourites</Link>
+                            </button>
                             <button className="button-13">
                                 <Link to="/search" className="search-button">
                                     <i className="fas fa-search"></i> Search
@@ -29,7 +32,6 @@ const Navbar = () => {
                             <button className="button-13" onClick={handleClick}>
                                 <i className="fas fa-sign-out-alt"></i> Logout
                             </button>
-                            
                         </div>
                     ) : (
                         <div>

client/src/Components/Navbar/index.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+const Favourites = () => {
+    // The actual list component content goes here
+    return (
+        <div>
+            <h1>Favourites</h1>
+            <ul>
+                <li>Item 1</li>
+                <li>Item 2</li>
+                <li>Item 3</li>
+                {/* Add more list items as needed */}
+            </ul>
+        </div>
+    );
+}
+
+export default Favourites;