Archive: Merge final presentation frontend (#171)

This PR merges the presentation day frontend, Thanks @AnnsAnns for
reminding me...

frontend/package.json

@@ -19,6 +19,7 @@
     "react-oidc-context": "^3.1.0",
     "react-progressbar-fancy": "^1.1.4",
     "react-router-dom": "^6.23.1",
+    "react-toastify": "^10.0.5",
     "reactjs-popup": "^2.0.6"
   },
   "devDependencies": {

frontend/src/App.css

@@ -1,14 +1,23 @@
 #root {
     display: flex;
-    flex-grow: 1;
     flex-direction: column;
+    width: 100%;
     min-height: 100vh;
-    flex-grow: 1;
+}
+
+.navbar-nav .nav-item.active .nav-link {
+  color: #ffffff; /* Change to the desired color */
+  text-shadow: 0 0 10px #ffffff;
+}
+
+.main-content {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  margin-bottom: 2em;
 }
 
 .footer {
   display: flex;
   width: 100%;
-  position: fixed;
-  bottom: 0;
 }

frontend/src/App.tsx

@@ -1,41 +1,97 @@
 import { useAuth } from "react-oidc-context";
-import "./App.css";
 import Footer from "./Components/Footer";
-import Navbar from "./Components/Navbar/Navbar";
+import Navbar from "./Components/Navbar";
 import LandingPage from "./Components/LandingPage";
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+import ProtectedRoute from "./lib/ProtectedRoute";
+import Settings from "./Components/Settings";
+import PetPage from "./Components/PetPage";
+import NotFound from "./Components/NotFound";
+import { ToastContainer, toast } from "react-toastify";
+
+import "./App.css";
 
 function App() {
     const auth = useAuth();
 
     switch (auth.activeNavigator) {
         case "signinSilent":
-            return <div>Signing you in...</div>;
+            return;
         case "signoutRedirect":
-            return <div>Signing you out...</div>;
+            return;
     }
 
     if (auth.isLoading) {
-        return <div>Loading...</div>;
+        toast("Logging in...");
+        return;
+        // return <div>Loading...</div>;
     }
 
     if (auth.error) {
         console.error(auth.error);
-        return <div>Oops... {auth.error.message}</div>;
+        toast(auth.error.message);
+        return;
+        // return <div>Oops... {auth.error.message}</div>;
+    }
+
+    if (!auth.isAuthenticated) {
+        return (
+            <>
+            <div style={{height: "100vh"}}>
+                <Navbar />
+                <LandingPage />
+            </div>
+            <div>
+                <Footer />
+            </div>
+            </>
+        );
     }
 
-  if (auth.isAuthenticated) {
     return (
-      <div style={{ backgroundColor: "#FFFFFF" }}>
-        <div>
-          <div>
+        <>
+        <BrowserRouter basename="/">
             <Navbar />
-          </div>
-        </div>
-        <Footer />
-      </div>
+            <div className="main-content" style={{ backgroundColor: "#FFFFFF" }}>
+                <Routes>
+                    <Route
+                        path="/"
+                        element={<LandingPage />}
+                    />
+                    <Route
+                        path="/PetPage"
+                        element={
+                            <ProtectedRoute>
+                                <PetPage />
+                            </ProtectedRoute>
+                        }
+                    />
+                    <Route
+                        path="/Settings"
+                        element={
+                        <ProtectedRoute>
+                            <Settings
+                                username={auth.user?.profile?.preferred_username || "User"}
+                            />
+                        </ProtectedRoute>
+                        }
+                    />
+
+                    <Route
+                        path="*"
+                        element={
+                            <ProtectedRoute>
+                                <NotFound />
+                            </ProtectedRoute>
+                        }
+                    />
+                </Routes>
+            </div>
+            <Footer />
+        </BrowserRouter>
+        <ToastContainer />
+        </>
     );
-  }
-  return [<Navbar />, <LandingPage />,<Footer />];
 }
 
 export default App;