Navigation

package.json

@@ -3,12 +3,15 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@reduxjs/toolkit": "^2.2.1",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.6.7",
+    "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-redux": "^9.1.0",
     "react-router-dom": "^6.22.1",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"

src/App.css

@@ -1,5 +1,8 @@
 * {
-  margin: 0;
+  /* margin: 0;
   padding: 0;
-  box-sizing: border-box;
+  box-sizing: border-box; */
+  list-style: none;
+  text-decoration: none;
+  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif, Geneva, Tahoma;
 }

src/App.js

@@ -1,17 +1,38 @@
-import { Routes, Route } from 'react-router-dom';
-import UserAuth from './Component/UserAuth';
-import UserSignUp from './Component/UserSignUp';
+import React, { useState, useEffect } from 'react';
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import UserAuth from './Components/UserAuth';
+import UserSignUp from './Components/UserSignUp';
+import Layout from './Components/Layout';
+import PlaceList from './Components/PlaceList';
+import MyReservations from './Components/MyReservations';
+import './App.css';
 
 function App() {
+  const [loggedIn, setLoggedIn] = useState(false);
+
+  useEffect(() => {
+    const authToken = localStorage.getItem('authToken');
+    if (authToken) {
+      setLoggedIn(true);
+    }
+  }, []);
+
   return (
-    <>
-      <div className="App">
-        <Routes>
-          <Route path="/" element={<UserAuth />} />
-          <Route path="/signup" element={<UserSignUp />} />
-        </Routes>
-      </div>
-    </>
+    <Router>
+      <Routes>
+        <Route path="/" element={<UserAuth setLoggedIn={setLoggedIn} />} />
+        <Route path="/signup" element={<UserSignUp />} />
+        {loggedIn ? (
+          <Route
+            path="/layout"
+            element={<Layout />}
+          >
+            <Route path="placelist" element={<PlaceList />} />
+            <Route path="myreservations" element={<MyReservations />} />
+          </Route>
+        ) : null}
+      </Routes>
+    </Router>
   );
 }
 

src/Components/Layout.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Outlet } from 'react-router-dom';
+import Navigation from './Navigation';
+
+function Layout() {
+  return (
+    <div className="container">
+      <Navigation />
+      {/* Start of Main Content */}
+      <Outlet />
+      {/* End of Main Content */}
+
+    </div>
+  );
+}
+
+export default Layout;

src/Components/MyReservations.js

@@ -0,0 +1,13 @@
+import React from 'react';
+
+function MyReservations() {
+  return (
+    <div>
+      {/* <h1>StaySpare</h1>
+             <p>This is the main Content of the Hotel application</p> */}
+      This is my reservations page
+    </div>
+  );
+}
+
+export default MyReservations;