3 files changed, 82 insertions, 4 deletions
diff --git a/src/components/Feed/Feed.tsx b/src/components/Feed/Feed.tsx
index d81da99..0c4d84f 100644
--- a/src/components/Feed/Feed.tsx
+++ b/src/components/Feed/Feed.tsx
@@ -18,7 +18,6 @@ const useStyles = makeStyles(theme => ({
 
 const Feed: React.FC<PropTypes> = ({ polls, navigate }) => {
   const classes = useStyles();
-
   return (
     <div className={classes.root}>
       {polls.map(poll => <PollCard initialPoll={poll} key={poll._id} navigate={navigate} />)}
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 4e25fa3..2e3fc20 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 />
+            {
+              userImage !== undefined
+                ? <Avatar className={classes.avatar} src={userImage} />
+                : <AccountCircle />
+            }
           </IconButton>
         </div>
       </Toolbar>
diff --git a/src/components/UploadImage/UploadImage.tsx b/src/components/UploadImage/UploadImage.tsx
new file mode 100644
index 0000000..42ee989
--- /dev/null
+++ b/src/components/UploadImage/UploadImage.tsx
@@ -0,0 +1,70 @@
+import React, { useRef } from 'react';
+import Button from '@material-ui/core/Button';
+import TextField from '@material-ui/core/TextField';
+import Dialog from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogContentText from '@material-ui/core/DialogContentText';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import { User } from 'which-types';
+import { patch } from '../../requests';
+
+interface PropTypes {
+  displayD: boolean;
+  setDisplayD: (d: boolean) => void;
+  setUserInfo: (a: User) => void;
+  setUser: (a: User) => void
+}
+
+const UploadImage: React.FC<PropTypes> = ({
+  displayD, setDisplayD, setUserInfo, setUser
+}) => {
+  const urlRef = useRef<HTMLInputElement>(null);
+
+  const handleClose = () => {
+    setDisplayD(false);
+  };
+
+  const updateAvatar = () => {
+    const id = localStorage.getItem('userId');
+    const newAvatar = urlRef.current?.value;
+    patch(`/users/${id}`, { avatarUrl: newAvatar }).then(res => {
+      setUserInfo(res.data);
+      setUser(res.data);
+    });
+    setDisplayD(false);
+  };
+
+  return (
+    <div>
+      <Dialog open={displayD} onClose={handleClose}>
+        <DialogTitle id="form-dialog-title">Upload an Image</DialogTitle>
+        <DialogContent>
+          <DialogContentText>
+            Unfortunetly we do not support uploading images yet. Please provide a valid URL to your image.
+          </DialogContentText>
+          <TextField
+            autoFocus
+            margin="dense"
+            id="name"
+            label="Image URL"
+            type="text"
+            fullWidth
+            autoComplete="off"
+            inputRef={urlRef}
+          />
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={handleClose} color="primary">
+            Cancel
+          </Button>
+          <Button onClick={updateAvatar} color="primary">
+            Submit
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </div>
+  );
+};
+
+export default UploadImage;