Add routes

package-lock.json

@@ -16,6 +16,7 @@
         "@testing-library/user-event": "^13.5.0",
         "react": "^18.1.0",
         "react-dom": "^18.1.0",
+        "react-router-dom": "^6.3.0",
         "react-scripts": "5.0.1",
         "web-vitals": "^2.1.4"
       },
@@ -8016,6 +8017,14 @@
         "he": "bin/he"
       }
     },
+    "node_modules/history": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz",
+      "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.7.6"
+      }
+    },
     "node_modules/hoist-non-react-statics": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
@@ -12250,6 +12259,30 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.3.0.tgz",
+      "integrity": "sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==",
+      "dependencies": {
+        "history": "^5.2.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.3.0.tgz",
+      "integrity": "sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==",
+      "dependencies": {
+        "history": "^5.2.0",
+        "react-router": "6.3.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
@@ -20721,6 +20754,14 @@
       "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
       "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
     },
+    "history": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz",
+      "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==",
+      "requires": {
+        "@babel/runtime": "^7.7.6"
+      }
+    },
     "hoist-non-react-statics": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
@@ -23666,6 +23707,23 @@
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
       "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
     },
+    "react-router": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.3.0.tgz",
+      "integrity": "sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==",
+      "requires": {
+        "history": "^5.2.0"
+      }
+    },
+    "react-router-dom": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.3.0.tgz",
+      "integrity": "sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==",
+      "requires": {
+        "history": "^5.2.0",
+        "react-router": "6.3.0"
+      }
+    },
     "react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",

package.json

@@ -11,6 +11,7 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
+    "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

src/App.js

@@ -1,6 +1,7 @@
-import { lazy } from 'react';
+import { lazy, Suspense } from 'react';
 import { Container } from '@mui/material';
 import { useUser } from './context/user';
+import LoadingIndicator from './components/LoadingIndicator';
 
 const AuthenticatedApp = lazy(() => import('./AuthenticatedApp'));
 const UnauthenticatedApp = lazy(() => import('./UnauthenticatedApp'));
@@ -9,9 +10,11 @@ function App() {
   const user = useUser();
 
   return (
+    <Suspense fallback={<LoadingIndicator isLoading />}>
       <Container maxWidth="false" sx={container}>
         {user ? <AuthenticatedApp /> : <UnauthenticatedApp />}
       </Container>
+    </Suspense>
   );
 }
 

src/AuthenticatedApp.js

@@ -1,14 +1,12 @@
-import { useAuthState } from './context/auth';
+import { Navigate, Route, Routes } from 'react-router-dom';
+import Home from './screens/Home';
 
 function AuthenticatedApp() {
-  const { logout, isPending } = useAuthState();
-
   return (
-    <div>
+    <Routes>
-      <h2>You're logged in!</h2>
+      <Route path="/" element={<Home />} />
-      <button onClick={logout}>Logout</button>
+      <Route path="/login" element={<Navigate to="/" />} />
-      {isPending && <h1>Loading...</h1>}
+    </Routes>
-    </div>
   );
 }
 

src/UnauthenticatedApp.js

@@ -1,11 +1,17 @@
 import { Fragment } from 'react';
+import { Route, Routes } from 'react-router-dom';
 
 import Login from './screens/Login';
+import UnauthenticatedHome from './screens/UnauthenticatedHome';
 
 function UnauthenticatedApp() {
   return (
     <Fragment>
-      <Login />
+      <Routes>
+        <Route path="/" element={<UnauthenticatedHome />} />
+        <Route path="/login" element={<Login />} />
+        <Route path="*" element={<h1>Route not found!</h1>} />
+      </Routes>
     </Fragment>
   );
 }

src/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 
+import { BrowserRouter } from 'react-router-dom';
 import { createTheme } from '@mui/material';
 import { ThemeProvider } from '@mui/system';
 
@@ -30,11 +31,13 @@ const theme = createTheme({
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
+    <BrowserRouter>
       <ThemeProvider theme={theme}>
         <AppProviders>
           <App />
         </AppProviders>
       </ThemeProvider>
+    </BrowserRouter>
   </React.StrictMode>
 );
 

src/screens/Home/index.js

@@ -0,0 +1,15 @@
+import { useAuthState } from '../../context/auth';
+
+function Home() {
+  const { logout, isPending } = useAuthState();
+
+  return (
+    <div>
+      <h2>You're logged in!</h2>
+      <button onClick={logout}>Logout</button>
+      {isPending && <h1>Loading...</h1>}
+    </div>
+  );
+}
+
+export default Home;

src/screens/UnauthenticatedHome/index.js

@@ -0,0 +1,17 @@
+import { Link } from '@mui/material';
+import { Container } from '@mui/system';
+
+import styles from './styles';
+
+function UnauthenticatedHome() {
+  const { container } = styles.desktop;
+
+  return (
+    <Container sx={container} maxWidth="false">
+      <h1>Seja bem-vindo!</h1>
+      <Link href="/login">Ir para login</Link>
+    </Container>
+  );
+}
+
+export default UnauthenticatedHome;

src/screens/UnauthenticatedHome/styles.js

@@ -0,0 +1,16 @@
+const desktopContainer = {
+  height: '100vh',
+  margin: 0,
+  padding: 0,
+  display: 'flex',
+  justifyContent: 'center',
+  flexDirection: 'column',
+  alignItems: 'center',
+};
+
+const desktop = {
+  container: desktopContainer,
+};
+
+const styles = { desktop };
+export default styles;