display user avatar instead avatarIcon in header

2 files changed, 13 insertions, 4 deletions

diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 4e25fa3..eb24ecc 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -3,7 +3,7 @@ import {
   AppBar,
   Toolbar,
   IconButton,
-  Typography
+  Typography, Avatar
 } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 import AccountCircle from '@material-ui/icons/AccountCircle';
@@ -13,6 +13,7 @@ import HomeIcon from '@material-ui/icons/Home';
 import SearchBar from './SearchBar';
 
 interface PropTypes {
+  userImage: string | undefined;
   navigate: (prefix: string) => void;
 }
 
@@ -25,10 +26,14 @@ const useStyles = makeStyles({
   },
   logo: {
     fontWeight: 'bold'
+  },
+  avatar:{
+    width: 24,
+    height: 24
   }
 });
 
-const Header: React.FC<PropTypes> = ({ navigate }) => {
+const Header: React.FC<PropTypes> = ({ navigate, userImage }) => {
   const classes = useStyles();
 
   const handleHome = (): void => {
@@ -56,7 +61,11 @@ const Header: React.FC<PropTypes> = ({ navigate }) => {
             <NotificationsIcon />
           </IconButton>
           <IconButton onClick={handleProfile}>
-            <AccountCircle />
+            {
+              localStorage.getItem('token')
+                ? <Avatar className={classes.avatar} src={userImage}/>
+                : <AccountCircle />
+            }
           </IconButton>
         </div>
       </Toolbar>
diff --git a/src/index.tsx b/src/index.tsx
index 50b19f7..d50700b 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -90,7 +90,7 @@ const App: React.FC = () => {
   return (
     <ThemeProvider theme={theme}>
       <CssBaseline />
-      <Header navigate={navigate} />
+      <Header navigate={navigate} userImage={user?.avatarUrl}/>
       <div className={classes.root}>
         { page.prefix === 'profile' && <ProfilePage logOut={logOut} id={page.id} navigate={navigate} /> }
         { page.prefix === 'feed' && <FeedPage navigate={navigate} /> }