leomurca/if-salas-web
leomurca/if-salas-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add routes

Browse source
This commit is contained in:
Leonardo Murça 2022-06-01 15:35:34 -03:00
parent c1bde64266
commit 89f13961ec
9 changed files with 135 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

58
package-lock.json generated
View file

@ -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",

1
package.json
View file

@ -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"
},

11
src/App.js
View file

@ -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 (
<Container maxWidth="false" sx={container}>
{user ? <AuthenticatedApp /> : <UnauthenticatedApp />}
</Container>
<Suspense fallback={<LoadingIndicator isLoading />}>
<Container maxWidth="false" sx={container}>
{user ? <AuthenticatedApp /> : <UnauthenticatedApp />}
</Container>
</Suspense>
);
}

14
src/AuthenticatedApp.js
View file

@ -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>
<h2>You're logged in!</h2>
<button onClick={logout}>Logout</button>
{isPending && <h1>Loading...</h1>}
</div>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/login" element={<Navigate to="/" />} />
</Routes>
);
}

8
src/UnauthenticatedApp.js
View file

@ -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>
);
}

13
src/index.js
View file

@ -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>
<ThemeProvider theme={theme}>
<AppProviders>
<App />
</AppProviders>
</ThemeProvider>
<BrowserRouter>
<ThemeProvider theme={theme}>
<AppProviders>
<App />
</AppProviders>
</ThemeProvider>
</BrowserRouter>
</React.StrictMode>
);

15
src/screens/Home/index.js Normal file
View file

@ -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;

17
src/screens/UnauthenticatedHome/index.js Normal file
View file

@ -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;

16
src/screens/UnauthenticatedHome/styles.js Normal file
View file

@ -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;