2 files changed, 8 insertions, 7 deletions
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index d0d9081..49f427f 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -9,11 +9,11 @@ import { makeStyles } from '@material-ui/core/styles';
 import AccountCircle from '@material-ui/icons/AccountCircle';
 import NotificationsIcon from '@material-ui/icons/Notifications';
 import HomeIcon from '@material-ui/icons/Home';
+import { useAuth } from '../../hooks/useAuth';
 
 import SearchBar from './SearchBar';
 
 interface PropTypes {
-  userImage: string | undefined;
   navigate: (prefix: string) => void;
 }
 
@@ -33,8 +33,9 @@ const useStyles = makeStyles({
   }
 });
 
-const Header: React.FC<PropTypes> = ({ navigate, userImage }) => {
+const Header: React.FC<PropTypes> = ({ navigate }) => {
   const classes = useStyles();
+  const { user } = useAuth();
 
   const handleHome = (): void => {
     navigate('feed');
@@ -62,8 +63,8 @@ const Header: React.FC<PropTypes> = ({ navigate, userImage }) => {
           </IconButton>
           <IconButton onClick={handleProfile}>
             {
-              userImage?.match(/\.(jpeg|jpg|gif|png)$/)
-                ? <Avatar className={classes.avatar} src={userImage} />
+              user?.avatarUrl?.match(/\.(jpeg|jpg|gif|png)$/)
+                ? <Avatar className={classes.avatar} src={user?.avatarUrl} />
                 : <AccountCircle />
             }
           </IconButton>
diff --git a/src/index.tsx b/src/index.tsx
index f9114c3..a82a28b 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -40,7 +40,7 @@ const useStyles = makeStyles({
 const App: React.FC = () => {
   const [page, setPage] = useState<Page>({ prefix: 'feed', id: '' });
   const classes = useStyles();
-  const user = { _id: '', avatarUrl: '' };
+  const { user } = useAuth();
 
   const navigate = (prefix: string, id?: string): void => {
     if (prefix === 'profile' && !id && !user) {
@@ -59,7 +59,7 @@ const App: React.FC = () => {
   return (
     <ThemeProvider theme={theme}>
       <CssBaseline />
-      <Header navigate={navigate} userImage={user?.avatarUrl} />
+      <Header navigate={navigate} />
       <div className={classes.root}>
         { page.prefix === 'profile' && (
           <ProfilePage
@@ -76,5 +76,5 @@ const App: React.FC = () => {
   );
 };
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.render(<AuthProvider> <App /> </AuthProvider>, document.getElementById('root'));