ruidy/MERN_sample_app
1
0
Fork 0
mirror of https://github.com/rjNemo/MERN_sample_app synced 2026-06-12 03:26:40 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

adds private route component and updates router

Browse source
This commit is contained in:
Ruidy Nemausat 2020-04-24 11:21:34 +02:00
parent 9bec74669f
commit 0262465acc
7 changed files with 93 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
client/src/components/App/index.jsx
View file

@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react";
import { BrowserRouter as Router } from "react-router-dom"; import { BrowserRouter as Router } from "react-router-dom";
import { useFirebase } from "../../services/auth"; import { useFirebase } from "../../services/auth";
import MainNavbar from "../MainNavbar"; import MainNavbar from "../MainNavbar";
import MainRouter from "../Router"; import MainRouter from "../../routes";
const App = () => { const App = () => {
// for testing only. Transfer Session to store. // for testing only. Transfer Session to store.

24
client/src/components/Router/index.jsx
View file

@ -1,24 +0,0 @@
import React from "react";
import { Route, Switch } from "react-router-dom";
import * as ROUTES from "../../constants/routes";
import AppPage from "../../pages/App";
import LandingPage from "../../pages/Landing";
import SignUpPage from "../../pages/SignUp";
import SignInPage from "../../pages/SignIn";
import PasswordForgetPage from "../../pages/PasswordForget";
import AccountPage from "../../pages/Account";
import AdminPage from "../../pages/Admin";
export default function MainRouter() {
return (
<Switch>
<Route exact path={ROUTES.LANDING} component={LandingPage} />
<Route path={ROUTES.SIGN_UP} component={SignUpPage} />
<Route path={ROUTES.SIGN_IN} component={SignInPage} />
<Route path={ROUTES.PASSWORD_FORGET} component={PasswordForgetPage} />
<Route path={ROUTES.APP} component={AppPage} />
<Route path={ROUTES.ACCOUNT} component={AccountPage} />
<Route path={ROUTES.ADMIN} component={AdminPage} />
</Switch>
);
}

1
client/src/constants/authConditions.js Normal file
View file

@ -0,0 +1 @@
export const AUTHENTICATED = (authUser) => !!authUser;

15
client/src/pages/App/index.jsx
View file

@ -3,11 +3,20 @@ import { Container } from "reactstrap";
import ItemModal from "../../components/ItemModal"; import ItemModal from "../../components/ItemModal";
import List from "../../components/List"; import List from "../../components/List";
export default function AppPage() { const useStyles = () => ({
root: {
paddingTop: "1rem",
paddingBottom: "1rem",
},
});
const AppPage = () => {
const styles = useStyles();
return ( return (
<Container> <Container style={styles.root}>
<ItemModal /> <ItemModal />
<List /> <List />
</Container> </Container>
); );
} };
export default AppPage;

21
client/src/pages/Landing/index.jsx
View file

@ -1,13 +1,20 @@
import React from "react"; import React from "react";
import { Container } from "reactstrap"; import { Container } from "reactstrap";
import ItemModal from "../../components/ItemModal";
import List from "../../components/List";
export default function LandingPage() { const useStyles = () => ({
root: {
paddingTop: "1rem",
paddingBottom: "1rem",
},
});
const LandingPage = () => {
const styles = useStyles();
return ( return (
<Container> <Container style={styles.root}>
<ItemModal /> <h1>Home Page</h1>
<List /> <p>The Home Page is accessible by everyone.</p>
</Container> </Container>
); );
} };
export default LandingPage;

27
client/src/routes/PrivateRoute.jsx Normal file
View file

@ -0,0 +1,27 @@
import React, { useEffect } from "react";
import { withRouter, Route } from "react-router-dom";
import { useFirebase } from "../services/auth";
import * as ROUTES from "../constants/routes";
const PrivateRoute = ({
component: Component,
condition,
path,
history,
...rest
}) => {
const firebase = useFirebase();
useEffect(() => {
firebase.auth.onAuthStateChanged((authUser) => {
if (!condition(authUser)) {
history.push(ROUTES.SIGN_IN);
}
});
}, [firebase.auth, condition, history]);
const render = (props) => <Component {...props} />;
return <Route path={path} render={render} {...rest} />;
};
export default withRouter(PrivateRoute);

38
client/src/routes/index.jsx Normal file
View file

@ -0,0 +1,38 @@
import React from "react";
import { Route, Switch } from "react-router-dom";
import * as ROUTES from "../constants/routes";
import * as CONDITIONS from "../constants/authConditions";
import PrivateRoute from "../routes/PrivateRoute";
import AppPage from "../pages/App";
import LandingPage from "../pages/Landing";
import SignUpPage from "../pages/SignUp";
import SignInPage from "../pages/SignIn";
import PasswordForgetPage from "../pages/PasswordForget";
import AccountPage from "../pages/Account";
import AdminPage from "../pages/Admin";
export default function MainRouter() {
return (
<Switch>
<Route exact path={ROUTES.LANDING} component={LandingPage} />
<Route path={ROUTES.SIGN_UP} component={SignUpPage} />
<Route path={ROUTES.SIGN_IN} component={SignInPage} />
<Route path={ROUTES.PASSWORD_FORGET} component={PasswordForgetPage} />
<PrivateRoute
path={ROUTES.APP}
condition={CONDITIONS.AUTHENTICATED}
component={AppPage}
/>
<PrivateRoute
path={ROUTES.ACCOUNT}
condition={CONDITIONS.AUTHENTICATED}
component={AccountPage}
/>
<PrivateRoute
path={ROUTES.ADMIN}
condition={CONDITIONS.AUTHENTICATED}
component={AdminPage}
/>
</Switch>
);
}