Adding profile picture.

cebartling · Dec 4, 2019 · 21539cd · 21539cd
1 parent 9c1eaeb
commit 21539cd
Show file tree

Hide file tree

Showing 7 changed files with 39 additions and 4 deletions.
diff --git a/invest-guru-react-web/.env b/invest-guru-react-web/.env
@@ -1,4 +1,2 @@
 REACT_APP_AUTH0_DOMAIN=
 REACT_APP_AUTH0_CLIENT_ID=
-
-
diff --git a/invest-guru-react-web/package.json b/invest-guru-react-web/package.json
@@ -10,6 +10,7 @@
     "node-sass": "^4.13.0",
     "react": "16.12.0",
     "react-dom": "16.12.0",
+    "react-icons": "^3.8.0",
     "react-redux": "7.1.3",
     "react-router": "5.1.2",
     "react-router-config": "5.1.1",

diff --git a/invest-guru-react-web/public/index.html b/invest-guru-react-web/public/index.html
@@ -7,7 +7,7 @@
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Web site created using create-react-app"
+      content="Invest Guru"
     />
     <link rel="apple-touch-icon" href="logo192.png" />
     <!--
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Invest Guru</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/invest-guru-react-web/src/components/NavBar.js b/invest-guru-react-web/src/components/NavBar.js
@@ -1,6 +1,7 @@
 import React from "react";
 import {useAuth0} from "../react-auth0-spa";
 import {Link} from "react-router-dom";
+import ProfilePicture from "./ProfilePicture";
 
 const NavBar = () => {
     const {isAuthenticated, logout, loginWithRedirect} = useAuth0();
@@ -36,6 +37,11 @@ const NavBar = () => {
                             </li>
                         )}
                     </ul>
+                    <ul className="navbar-nav">
+                        <li className="nav-item">
+                            <ProfilePicture/>
+                        </li>
+                    </ul>
                 </div>
             </nav>
         </header>

diff --git a/invest-guru-react-web/src/components/ProfilePicture.js b/invest-guru-react-web/src/components/ProfilePicture.js
@@ -0,0 +1,18 @@
+import React from "react";
+import {useAuth0} from "../react-auth0-spa";
+import './ProfilePicture.scss';
+
+const ProfilePicture = () => {
+
+    const { loading, user } = useAuth0();
+
+    if (loading || !user) {
+        return null;
+    }
+
+    return (
+        <img className="profile-picture" src={user.picture} alt="Profile" />
+    );
+};
+
+export default ProfilePicture;
diff --git a/invest-guru-react-web/src/components/ProfilePicture.scss b/invest-guru-react-web/src/components/ProfilePicture.scss
@@ -0,0 +1,5 @@
+.profile-picture {
+  border-radius: 50%;
+  height: 40px;
+  width: 40px;
+}
diff --git a/invest-guru-react-web/yarn.lock b/invest-guru-react-web/yarn.lock
@@ -8449,6 +8449,13 @@ react-error-overlay@^6.0.3:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.3.tgz#c378c4b0a21e88b2e159a3e62b2f531fd63bf60d"
   integrity sha512-bOUvMWFQVk5oz8Ded9Xb7WVdEi3QGLC8tH7HmYP0Fdp4Bn3qw0tRFmr5TW6mvahzvmrK4a6bqWGfCevBflP+Xw==
 
+react-icons@^3.8.0:
+  version "3.8.0"
+  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-3.8.0.tgz#229de5904809696c9f46932bd9b6126b2522866e"
+  integrity sha512-rA/8GRKjPulft8BSBSMsHkE1AGPqJ7LjNsyk0BE7XjG70Iz62zOled2SJk7LDo8x9z86a3xOstDlKlMZ4pAy7A==
+  dependencies:
+    camelcase "^5.0.0"
+
 react-is@^16.6.0, react-is@^16.7.0, react-is@^16.9.0:
   version "16.12.0"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.12.0.tgz#2cc0fe0fba742d97fd527c42a13bec4eeb06241c"
Original file line number	Diff line number	Diff line change
		@@ -1,4 +1,2 @@
		REACT_APP_AUTH0_DOMAIN=
		REACT_APP_AUTH0_CLIENT_ID=