Fixes the Router situation

React/real-estate/src/App.js

@@ -10,25 +10,13 @@ import userManager, { loadUserFromStorage } from "./services/userService";
 import AuthProvider from "./utils/authProvider";
 import PrivateRoute from "./utils/protectedRoute";
 import "./index.css";
-import { storeUser } from "./actions/authActions";
 
 function App() {
   useEffect(() => {
-    // Commented out not to check the localStorage for the user's existence ** Temporary **
     // fetch current user from cookies
     loadUserFromStorage(store);
   }, []);
 
-  // Should be removed ** Temporary **
-  //const logUserIn = () => {
-  //  const user = { profile: { given_name: "John Doe" } };
-  //  console.log(`User logged in!`);
-  //  store.dispatch(storeUser(user));
-  // };
-
-  // ** Temporary **
-  // logUserIn();
-
   return (
     <Provider store={store}>
       <AuthProvider userManager={userManager} store={store}>

React/real-estate/src/pages/components/VehicleRegisterForm.js

@@ -28,7 +28,7 @@ const VehicleRegisterForm = () => {
   }
 
   return (
-    <Card styles={{ padding: "100px 90px 100px 90px" }} classes="xl:w-2/5">
+    <Card styles={{ padding: "50px" }} classes="xl:w-2/5">
       <form onSubmit={(e) => e.preventDefault()} className="m-0 flex flex-col">
         <Heading3 styles={{ marginTop: "0" }} classes="font-playfair">
           Register Real Estate

React/real-estate/src/pages/home.js

@@ -1,20 +1,18 @@
 import React from "react";
-import { Switch, Route, BrowserRouter as Router } from "react-router-dom";
+import { Switch, Route } from "react-router-dom";
 import RegisterVehicle from "./RegisterVehicle";
 import YourVehicles from "./YourVehicles";
 
 function Home() {
   return (
-    <Router>
+    <Switch>
-      <Switch>
+      <Route path="/register">
-        <Route path="/register">
+        <RegisterVehicle />
-          <RegisterVehicle />
+      </Route>
-        </Route>
+      <Route path="/">
-        <Route path="/">
+        <YourVehicles />
-          <YourVehicles />
+      </Route>
-        </Route>
+    </Switch>
-      </Switch>
-    </Router>
   );
 }
 

React/real-estate/src/pages/login.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { Redirect } from "react-router-dom";
+import { useLocation, useHistory } from "react-router-dom";
 import { useSelector } from "react-redux";
 import Navbar from "./components/Navbar";
 import Main from "./components/Main";
@@ -8,13 +8,22 @@ import LoginWindow from "./components/LoginWindow";
 function Login() {
   const user = useSelector((state) => state.auth.user);
 
-  return user ? (
+  const location = useLocation();
-    <Redirect to={"/"} />
+  const history = useHistory();
-  ) : (
+
-    <div>
+  let { from } = location.state || { from: { pathname: "/" } };
-      <Navbar />
+
-      <Main Component={LoginWindow} />
+  if (user) {
-    </div>
+    history.replace(from);
+  }
+
+  return (
+    !user && (
+      <div>
+        <Navbar />
+        <Main Component={LoginWindow} />
+      </div>
+    )
   );
 }
 

React/real-estate/src/utils/protectedRoute.js

@@ -1,13 +1,27 @@
-import React from 'react'
+import React from "react";
-import { Route, Redirect } from 'react-router-dom'
+import { Route, Redirect } from "react-router-dom";
-import { useSelector } from 'react-redux'
+import { useSelector } from "react-redux";
 
 function ProtectedRoute({ children, component: Component, ...rest }) {
-  const user = useSelector(state => state.auth.user)
+  const user = useSelector((state) => state.auth.user);
 
-  return user
+  return (
-    ? (<Route {...rest} component={Component} />)
+    <Route
-    : (<Redirect to={'/login'} />)
+      {...rest}
+      render={({ location }) =>
+        user ? (
+          <Component />
+        ) : (
+          <Redirect
+            to={{
+              pathname: "/login",
+              state: { from: location },
+            }}
+          />
+        )
+      }
+    />
+  );
 }
 
-export default ProtectedRoute
+export default ProtectedRoute;