update mainnavbar routing displays profile picture

client/package-lock.json

@@ -1288,22 +1288,35 @@
       }
     },
     "@material-ui/core": {
-      "version": "4.9.8",
+      "version": "4.9.13",
-      "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.9.8.tgz",
+      "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.9.13.tgz",
-      "integrity": "sha512-4cslpG6oLoPWUfwPkX+hvbak4hAGiOfgXOu/UIYeeMrtsTEebC0Mirjoby7zhS4ny86YI3rXEFW6EZDmlj5n5w==",
+      "integrity": "sha512-GEXNwUr+laZ0N+F1efmHB64Fyg+uQIRXLqbSejg3ebSXgLYNpIjnMOPRfWdu4rICq0dAIgvvNXGkKDMcf3AMpA==",
       "requires": {
         "@babel/runtime": "^7.4.4",
-        "@material-ui/styles": "^4.9.6",
+        "@material-ui/react-transition-group": "^4.3.0",
-        "@material-ui/system": "^4.9.6",
+        "@material-ui/styles": "^4.9.13",
-        "@material-ui/types": "^5.0.0",
+        "@material-ui/system": "^4.9.13",
-        "@material-ui/utils": "^4.9.6",
+        "@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",
+      "version": "4.9.13",
-      "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.9.6.tgz",
+      "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.9.13.tgz",
-      "integrity": "sha512-ijgwStEkw1OZ6gCz18hkjycpr/3lKs1hYPi88O/AUn4vMuuGEGAIrqKVFq/lADmZUNF3DOFIk8LDkp7zmjPxtA==",
+      "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",
+      "version": "4.9.13",
-      "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.9.6.tgz",
+      "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.9.13.tgz",
-      "integrity": "sha512-QtfoAePyqXoZ2HUVSwGb1Ro0kucMCvVjbI0CdYIR21t0Opgfm1Oer6ni9P5lfeXA39xSt0wCierw37j+YES48Q==",
+      "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",
+      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/@material-ui/types/-/types-5.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/@material-ui/types/-/types-5.0.1.tgz",
-      "integrity": "sha512-UeH2BuKkwDndtMSS0qgx1kCzSMw+ydtj0xx/XbFtxNSTlXydKwzs5gVW5ZKsFlAkwoOOQ9TIsyoCC8hq18tOwg=="
+      "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",
+      "version": "2.0.8",
-      "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.7.tgz",
+      "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.8.tgz",
-      "integrity": "sha512-VS9Rjt79+p7M0WkPqcAza4Yq1ZHrsHrwf7hPL/bjQB+c1lwmAI+1FXxYTYt818D/50fFVflw0XKleiBN5RITkg==",
+      "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",
+          "version": "7.9.6",
-          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.9.2.tgz",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.9.6.tgz",
-          "integrity": "sha512-NE2DtOdufG7R5vnfQUTehdTfNycfUANEtCa9PssN9O/xmTzP4E08UI797ixaei6hBEVL9BI/PsdJS5x7mWoB9Q==",
+          "integrity": "sha512-64AF1xY3OAkFHqOb9s4jpgk1Mm5vDZ4L3acHvAml+53nO1XbXLuDodsVpO4OIUsmemlUHMxNdYMNJmsvOwLrvQ==",
           "requires": {
             "regenerator-runtime": "^0.13.4"
           }
@@ -12926,9 +12950,10 @@
       "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c="
     },
     "typescript": {
-      "version": "3.7.5",
+      "version": "3.8.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.7.5.tgz",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.8.3.tgz",
-      "integrity": "sha512-/P5lkRXkWHNAbcJIiHPfRoKqyd7bsyCma1hZNUGfn20qm64T6ZBlrzprymeu918H+mB/0rIg2gGK/BXkhhYgBw=="
+      "integrity": "sha512-MYlEfn5VrLNsgudQTVJeNaQFUAI7DkhnOjdpAp4T+ku1TfQClewlbSuTVHiA+8skNBgaf02TL/kLOvig4y3G8w==",
+      "dev": true
     },
     "underscore": {
       "version": "1.9.2",

client/package.json

@@ -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"
     ]
   }
-}
+}

client/src/components/ButtonAppBar.tsx

@@ -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="/">
+            <Button color="inherit" component={Link} to={ROUTES.HOME}>
-              BugBuster
+              {/* <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>