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

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", "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
"integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=" "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": { "v8-compile-cache": {
"version": "2.1.0", "version": "2.1.0",
"resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.1.0.tgz", "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", "axios": "^0.19.2",
"bootstrap": "^4.4.1", "bootstrap": "^4.4.1",
"firebase": "^7.14.1", "firebase": "^7.14.1",
"prop-types": "^15.7.2",
"react": "^16.13.1", "react": "^16.13.1",
"react-dom": "^16.13.1", "react-dom": "^16.13.1",
"react-jss": "^10.1.1", "react-jss": "^10.1.1",
@ -40,4 +41,4 @@
}, },
"proxy": "http://localhost:5000", "proxy": "http://localhost:5000",
"devDependencies": {} "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 { BrowserRouter as Router } from "react-router-dom";
import { useFirebase } from "../../services/auth";
import MainNavbar from "../MainNavbar"; import MainNavbar from "../MainNavbar";
import MainRouter from "../Router"; 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 ( return (
<Router> <Router>
<MainNavbar /> <MainNavbar authUser={authUser} />
<MainRouter /> <MainRouter />
</Router> </Router>
); );
} };
export default App; export default App;

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

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