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

sets minimal session handling

Browse source
This commit is contained in:
Ruidy Nemausat 2020-04-24 09:26:05 +02:00
parent 90bd428d3f
commit 61b2480e67
4 changed files with 39 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
client/package-lock.json generated
View file

@ -14043,12 +14043,6 @@
"resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
"integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM="
},
"uuid": {
"version": "7.0.3",
"resolved": "https://registry.npmjs.org/uuid/-/uuid-7.0.3.tgz",
"integrity": "sha512-DPSke0pXhTZgoF/d+WSt2QaKMCFSfx7QegxEWT+JOuHF5aWrKEn0G+ztjuJg/gG8/ItK+rbPCD/yNv8yyih6Cg==",
"dev": true
},
"v8-compile-cache": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.1.0.tgz",

3
client/package.json
View file

@ -10,6 +10,7 @@
"axios": "^0.19.2",
"bootstrap": "^4.4.1",
"firebase": "^7.14.1",
"prop-types": "^15.7.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-jss": "^10.1.1",
@ -40,4 +41,4 @@
},
"proxy": "http://localhost:5000",
"devDependencies": {}
}
}

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

@ -1,15 +1,26 @@
import React from "react";
import React, { useState, useEffect } from "react";
import { BrowserRouter as Router } from "react-router-dom";
import { useFirebase } from "../../services/auth";
import MainNavbar from "../MainNavbar";
import MainRouter from "../Router";
function App() {
const App = () => {
// for testing only. Transfer Session to store.
const [authUser, setAuthUser] = useState(null);
const firebase = useFirebase();
useEffect(() => {
firebase.auth.onAuthStateChanged((authUser) =>
authUser ? setAuthUser(authUser) : setAuthUser(null)
);
}, [firebase.auth]);
return (
<Router>
<MainNavbar />
<MainNavbar authUser={authUser} />
<MainRouter />
</Router>
);
}
};
export default App;

41
client/src/components/MainNavbar/index.jsx
View file

@ -1,5 +1,6 @@
import React, { useState } from "react";
import { Link } from "react-router-dom";
import PropTypes from "prop-types";
import {
Collapse,
Container,
@ -13,7 +14,7 @@ import {
import SignOutButton from "../SignOutButton";
import * as ROUTES from "../../constants/routes";
export default function MainNavbar() {
const MainNavbar = ({ authUser }) => {
const [isOpen, setIsOpen] = useState(false);
const toggle = () => setIsOpen(!isOpen);
@ -21,26 +22,18 @@ export default function MainNavbar() {
<Navbar color="dark" dark expand="sm">
<Container>
<NavbarBrand>
<Link to={ROUTES.LANDING}>LandingPage</Link>
<Link to={authUser ? ROUTES.APP : ROUTES.LANDING}>App</Link>
</NavbarBrand>
<NavbarToggler onClick={toggle} />
<Collapse isOpen={isOpen} navbar>
<Nav className="ml-auto" navbar>
<NavItem>
<NavLink>
<Link to={ROUTES.SIGN_IN}>Sign In</Link>
</NavLink>
</NavItem>
<NavItem>
<NavLink>
<Link to={ROUTES.APP}>Home</Link>
</NavLink>
</NavItem>
<NavItem>
<NavLink>
<Link to={ROUTES.ACCOUNT}>Account</Link>
</NavLink>
</NavItem>
{authUser && (
<NavItem>
<NavLink>
<Link to={ROUTES.ACCOUNT}>Account</Link>
</NavLink>
</NavItem>
)}
<NavItem>
<NavLink>
<Link to={ROUTES.ADMIN}>Admin</Link>
@ -57,7 +50,11 @@ export default function MainNavbar() {
</NavItem>
<NavItem>
<NavLink>
<SignOutButton />
{authUser ? (
<SignOutButton />
) : (
<Link to={ROUTES.SIGN_IN}>Sign In</Link>
)}
</NavLink>
</NavItem>
</Nav>
@ -65,4 +62,10 @@ export default function MainNavbar() {
</Container>
</Navbar>
);
}
};
MainNavbar.propTypes = {
authUser: PropTypes.any.isRequired,
};
export default MainNavbar;