update mainnavbar routing displays profile picture

This commit is contained in:
Ruidy Nemausat 2020-05-05 14:57:09 +02:00
parent e6bcba84ac
commit df38a0b74e
3 changed files with 83 additions and 40 deletions

View file

@ -1288,22 +1288,35 @@
}
},
"@material-ui/core": {
"version": "4.9.8",
"resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.9.8.tgz",
"integrity": "sha512-4cslpG6oLoPWUfwPkX+hvbak4hAGiOfgXOu/UIYeeMrtsTEebC0Mirjoby7zhS4ny86YI3rXEFW6EZDmlj5n5w==",
"version": "4.9.13",
"resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.9.13.tgz",
"integrity": "sha512-GEXNwUr+laZ0N+F1efmHB64Fyg+uQIRXLqbSejg3ebSXgLYNpIjnMOPRfWdu4rICq0dAIgvvNXGkKDMcf3AMpA==",
"requires": {
"@babel/runtime": "^7.4.4",
"@material-ui/styles": "^4.9.6",
"@material-ui/system": "^4.9.6",
"@material-ui/types": "^5.0.0",
"@material-ui/utils": "^4.9.6",
"@material-ui/react-transition-group": "^4.3.0",
"@material-ui/styles": "^4.9.13",
"@material-ui/system": "^4.9.13",
"@material-ui/types": "^5.0.1",
"@material-ui/utils": "^4.9.12",
"@types/react-transition-group": "^4.2.0",
"clsx": "^1.0.2",
"clsx": "^1.0.4",
"hoist-non-react-statics": "^3.3.2",
"popper.js": "^1.14.1",
"popper.js": "^1.16.1-lts",
"prop-types": "^15.7.2",
"react-is": "^16.8.0",
"react-transition-group": "^4.3.0"
},
"dependencies": {
"@material-ui/utils": {
"version": "4.9.12",
"resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.9.12.tgz",
"integrity": "sha512-/0rgZPEOcZq5CFA4+4n6Q6zk7fi8skHhH2Bcra8R3epoJEYy5PL55LuMazPtPH1oKeRausDV/Omz4BbgFsn1HQ==",
"requires": {
"@babel/runtime": "^7.4.4",
"prop-types": "^15.7.2",
"react-is": "^16.8.0"
}
}
}
},
"@material-ui/icons": {
@ -1326,16 +1339,27 @@
"react-is": "^16.8.0"
}
},
"@material-ui/react-transition-group": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/@material-ui/react-transition-group/-/react-transition-group-4.3.0.tgz",
"integrity": "sha512-CwQ0aXrlUynUTY6sh3UvKuvye1o92en20VGAs6TORnSxUYeRmkX8YeTUN3lAkGiBX1z222FxLFO36WWh6q73rQ==",
"requires": {
"@babel/runtime": "^7.5.5",
"dom-helpers": "^5.0.1",
"loose-envify": "^1.4.0",
"prop-types": "^15.6.2"
}
},
"@material-ui/styles": {
"version": "4.9.6",
"resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.9.6.tgz",
"integrity": "sha512-ijgwStEkw1OZ6gCz18hkjycpr/3lKs1hYPi88O/AUn4vMuuGEGAIrqKVFq/lADmZUNF3DOFIk8LDkp7zmjPxtA==",
"version": "4.9.13",
"resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.9.13.tgz",
"integrity": "sha512-lWlXJanBdHQ18jW/yphedRokHcvZD1GdGzUF/wQxKDsHwDDfO45ZkAxuSBI202dG+r1Ph483Z3pFykO2obeSRA==",
"requires": {
"@babel/runtime": "^7.4.4",
"@emotion/hash": "^0.8.0",
"@material-ui/types": "^5.0.0",
"@material-ui/types": "^5.0.1",
"@material-ui/utils": "^4.9.6",
"clsx": "^1.0.2",
"clsx": "^1.0.4",
"csstype": "^2.5.2",
"hoist-non-react-statics": "^3.3.2",
"jss": "^10.0.3",
@ -1350,9 +1374,9 @@
}
},
"@material-ui/system": {
"version": "4.9.6",
"resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.9.6.tgz",
"integrity": "sha512-QtfoAePyqXoZ2HUVSwGb1Ro0kucMCvVjbI0CdYIR21t0Opgfm1Oer6ni9P5lfeXA39xSt0wCierw37j+YES48Q==",
"version": "4.9.13",
"resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.9.13.tgz",
"integrity": "sha512-6AlpvdW6KJJ5bF1Xo2OD13sCN8k+nlL36412/bWnWZOKIfIMo/Lb8c8d1DOIaT/RKWxTEUaWnKZjabVnA3eZjA==",
"requires": {
"@babel/runtime": "^7.4.4",
"@material-ui/utils": "^4.9.6",
@ -1360,9 +1384,9 @@
}
},
"@material-ui/types": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/@material-ui/types/-/types-5.0.0.tgz",
"integrity": "sha512-UeH2BuKkwDndtMSS0qgx1kCzSMw+ydtj0xx/XbFtxNSTlXydKwzs5gVW5ZKsFlAkwoOOQ9TIsyoCC8hq18tOwg=="
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/@material-ui/types/-/types-5.0.1.tgz",
"integrity": "sha512-wURPSY7/3+MAtng3i26g+WKwwNE3HEeqa/trDBR5+zWKmcjO+u9t7Npu/J1r+3dmIa/OeziN9D/18IrBKvKffw=="
},
"@material-ui/utils": {
"version": "4.9.6",
@ -3779,11 +3803,11 @@
"integrity": "sha1-2bkoGtz9jO2TW9urqDeGiX9k6ZY="
},
"css-vendor": {
"version": "2.0.7",
"resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.7.tgz",
"integrity": "sha512-VS9Rjt79+p7M0WkPqcAza4Yq1ZHrsHrwf7hPL/bjQB+c1lwmAI+1FXxYTYt818D/50fFVflw0XKleiBN5RITkg==",
"version": "2.0.8",
"resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.8.tgz",
"integrity": "sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==",
"requires": {
"@babel/runtime": "^7.6.2",
"@babel/runtime": "^7.8.3",
"is-in-browser": "^1.0.2"
}
},
@ -4223,9 +4247,9 @@
},
"dependencies": {
"@babel/runtime": {
"version": "7.9.2",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.9.2.tgz",
"integrity": "sha512-NE2DtOdufG7R5vnfQUTehdTfNycfUANEtCa9PssN9O/xmTzP4E08UI797ixaei6hBEVL9BI/PsdJS5x7mWoB9Q==",
"version": "7.9.6",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.9.6.tgz",
"integrity": "sha512-64AF1xY3OAkFHqOb9s4jpgk1Mm5vDZ4L3acHvAml+53nO1XbXLuDodsVpO4OIUsmemlUHMxNdYMNJmsvOwLrvQ==",
"requires": {
"regenerator-runtime": "^0.13.4"
}
@ -12926,9 +12950,10 @@
"integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c="
},
"typescript": {
"version": "3.7.5",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-3.7.5.tgz",
"integrity": "sha512-/P5lkRXkWHNAbcJIiHPfRoKqyd7bsyCma1hZNUGfn20qm64T6ZBlrzprymeu918H+mB/0rIg2gGK/BXkhhYgBw=="
"version": "3.8.3",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-3.8.3.tgz",
"integrity": "sha512-MYlEfn5VrLNsgudQTVJeNaQFUAI7DkhnOjdpAp4T+ku1TfQClewlbSuTVHiA+8skNBgaf02TL/kLOvig4y3G8w==",
"dev": true
},
"underscore": {
"version": "1.9.2",

View file

@ -4,7 +4,7 @@
"private": true,
"dependencies": {
"@auth0/auth0-spa-js": "^1.6.4",
"@material-ui/core": "^4.9.8",
"@material-ui/core": "^4.9.13",
"@material-ui/icons": "^4.9.1",
"@material-ui/lab": "^4.0.0-alpha.47",
"@testing-library/jest-dom": "^4.2.4",
@ -24,7 +24,7 @@
"react-router-dom": "^5.1.2",
"react-scripts": "3.3.1",
"react-swipeable-views": "^0.13.9",
"typescript": "^3.7.5",
"typescript": "^3.8.3",
"underscore": "^1.9.2"
},
"scripts": {
@ -48,4 +48,4 @@
"last 1 safari version"
]
}
}
}

View file

@ -1,14 +1,18 @@
import React from "react";
import { Link } from "react-router-dom";
import {
AppBar,
Button,
IconButton,
Toolbar,
Typography,
Avatar,
} from "@material-ui/core";
import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";
import MenuIcon from "@material-ui/icons/Menu";
import * as ROUTES from "../constants/routes";
import { useAuth0 } from "../authentication/auth0";
import { getUID } from "../authentication/helpers";
const useStyles = makeStyles((theme: Theme) =>
createStyles({
@ -26,7 +30,7 @@ const useStyles = makeStyles((theme: Theme) =>
export default function ButtonAppBar() {
const classes = useStyles();
const { isAuthenticated, loginWithRedirect, logout } = useAuth0();
const { isAuthenticated, loginWithRedirect, logout, user } = useAuth0();
return (
<div className={classes.root}>
@ -41,18 +45,32 @@ export default function ButtonAppBar() {
<MenuIcon />
</IconButton>
<Typography variant="h6" className={classes.title}>
<Button color="inherit" href="/">
BugBuster
<Button color="inherit" component={Link} to={ROUTES.HOME}>
{/* <Button color="inherit" href={ROUTES.HOME}> */}
🐞BugBuster
</Button>
</Typography>
{!isAuthenticated ? (
<Button color="inherit" onClick={() => loginWithRedirect({})}>
<Button
color="secondary"
variant="contained"
onClick={() => loginWithRedirect({})}
>
Log in
</Button>
) : (
<Button color="inherit" onClick={() => logout()}>
Log out
</Button>
<>
<Button
color="inherit"
component={Link}
to={`${ROUTES.USERS}/${getUID(user)}`}
>
<Avatar src={user.picture} />
</Button>
<Button color="inherit" onClick={() => logout()}>
Log out
</Button>
</>
)}
</Toolbar>
</AppBar>