Avatar image component

client/src/Pages/Profile/UserInfo/UserAvatar/index.js

@@ -0,0 +1,98 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import Axios from 'axios';
+import { Typography } from '@material-ui/core';
+import { Alert } from '@material-ui/lab';
+
+import Button from '../../../../Components/Button';
+import useStyles from './style';
+
+function UserAvatar({ setRefresh, setOpen }) {
+  const classes = useStyles();
+  const [previewSource, setPreviewSource] = useState();
+  // eslint-disable-next-line no-unused-vars
+  const [inputFileState, setInputFileState] = useState('');
+  const [selectedFile, setSelectedFile] = useState();
+  const [errorMsg, setErrorMsg] = useState('');
+
+  const previewFile = (file) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onloadend = () => {
+      setPreviewSource(reader.result);
+    };
+  };
+
+  const handleUploadFile = (e) => {
+    const file = e.target.files[0];
+    previewFile(file);
+    setSelectedFile(file);
+  };
+
+  const uploadImage = async (base64EncodedImage) => {
+    try {
+      await Axios.patch('/api/v1/upload', { data: base64EncodedImage });
+      setInputFileState('');
+      setPreviewSource('');
+      setRefresh(true);
+      setOpen(false);
+      setErrorMsg('Image uploaded successfully');
+    } catch (err) {
+      setErrorMsg('Something went wrong!');
+    }
+  };
+
+  const handleSubmitImage = (e) => {
+    e.preventDefault();
+    if (!selectedFile) return;
+    const reader = new FileReader();
+    reader.readAsDataURL(selectedFile);
+    reader.onloadend = () => {
+      uploadImage(reader.result);
+    };
+    reader.onerror = () => {
+      setErrorMsg('Something went wrong!');
+    };
+  };
+
+  return (
+    <div className={classes.modal}>
+      <Typography variant="h6">Choose an image</Typography>
+      {errorMsg && <Alert variant="error">{errorMsg}</Alert>}
+      <div className={classes.formContainer}>
+        <form className={classes.avtarForm} onSubmit={handleSubmitImage}>
+          <label htmlFor="file-input-select">
+            Choose file
+            <input
+              accept="image/*"
+              type="file"
+              name="image"
+              id="file-input-select"
+              value={inputFileState}
+              onChange={handleUploadFile}
+              className={classes.selectFileBtn}
+            />
+          </label>
+          <Button
+            type="submit"
+            variant="contained"
+            color="secondary"
+            className={classes.uploadBtn}
+          >
+            Upload
+          </Button>
+        </form>
+        <div className={classes.imagePreview}>
+          {previewSource && <img src={previewSource} alt="avatar" />}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+UserAvatar.propTypes = {
+  setRefresh: PropTypes.func.isRequired,
+  setOpen: PropTypes.func.isRequired,
+};
+
+export default UserAvatar;

client/src/Pages/Profile/UserInfo/UserAvatar/style.js

@@ -0,0 +1,71 @@
+import { makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles((theme) => ({
+  modal: {
+    position: 'absolute',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    width: 400,
+    backgroundColor: '#F5F5F5',
+    border: '1px solid #c7c7c7',
+    borderRadius: '4px',
+    padding: theme.spacing(2, 4, 3),
+    left: 'calc(50% - 200px)',
+    top: 'calc(50% - 200px)',
+    '& h6': {
+      color: theme.palette.primary.dark,
+      fontWeight: 'bold',
+    },
+  },
+  formContainer: {
+    marginTop: '1rem',
+    width: '100%',
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  avtarForm: {
+    width: '40%',
+    '& label': {
+      display: 'inline-block',
+      width: '85px',
+      height: '35px',
+      color: theme.palette.primary.dark,
+      backgroundColor: '#F5F5F5',
+      border: `1px solid ${theme.palette.primary.dark}`,
+      borderRadius: '3px',
+      padding: '0.5em',
+      textAlign: 'center',
+      cursor: 'pointer',
+      transition: 'all 0.25s',
+      '&:hover': {
+        color: '#F5F5F5',
+        backgroundColor: theme.palette.primary.dark,
+        border: '1px solid #F5F5F5',
+        transition: 'all 0.25s',
+      },
+    },
+  },
+  selectFileBtn: {
+    visibility: 'hidden',
+  },
+  imagePreview: {
+    width: '60%',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    minHeight: '100px',
+    backgroundColor: '#c7c7c7',
+    borderRadius: '5px',
+    '& img': {
+      width: '150px',
+    },
+  },
+  uploadBtn: {
+    color: '#f5f5f5',
+    marginTop: '1em',
+  },
+}));
+
+export default useStyles;

client/src/Pages/Profile/UserInfo/index.js

@@ -1,10 +1,12 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import Axios from 'axios';
-import { Typography, Avatar, Grid, Paper } from '@material-ui/core';
+import { Typography, Avatar, Grid, Paper, Modal } from '@material-ui/core';
 import { Alert } from '@material-ui/lab';
+import PermMediaIcon from '@material-ui/icons/PermMedia';
 
 import Button from '../../../Components/Button';
+import UserAvatar from './UserAvatar';
 import Loading from '../../../Components/Loading';
 
 import useStyles from './style';
@@ -13,7 +15,9 @@ function UserInfo({ getUserName }) {
   const classes = useStyles();
   const [user, setUser] = useState({});
   const [loading, setLoading] = useState(false);
+  const [refresh, setRefresh] = useState(false);
   const [errorMsg, setErrorMsg] = useState('');
+  const [open, setOpen] = useState(false);
 
   useEffect(() => {
     let isCurrent = true;
@@ -35,19 +39,41 @@ function UserInfo({ getUserName }) {
       isCurrent = false;
       setLoading(false);
     };
-  }, []);
+  }, [refresh]);
+
+  const handleOpen = () => {
+    setOpen(true);
+  };
+
+  const handleClose = () => {
+    setOpen(false);
+  };
 
   return (
     <div className={classes.root}>
+      <Modal
+        open={open}
+        onClose={handleClose}
+        aria-labelledby="simple-modal-title"
+        aria-describedby="simple-modal-description"
+      >
+        <UserAvatar setRefresh={setRefresh} setOpen={setOpen} />
+      </Modal>
       <Typography variant="h2">User Information</Typography>
       {loading ? (
         <Loading className={classes.spin} />
       ) : (
         <>
-          <Grid lg="12" justify="center">
-            <Avatar className={classes.avatar}>
-              {user.username && user.username.slice(0, 1).toUpperCase()}
-            </Avatar>
+          <Grid lg="false" justify="center">
+            <div className={classes.avatarBox}>
+              <Avatar className={classes.avatar}>
+                {user.username && user.username.slice(0, 1).toUpperCase()}
+              </Avatar>
+              <PermMediaIcon
+                className={classes.avatarBtn}
+                onClick={handleOpen}
+              />
+            </div>
           </Grid>
           <Grid justify="center">
             {errorMsg ? (

client/src/Pages/Profile/UserInfo/style.js

@@ -17,6 +17,20 @@ const useStyles = makeStyles((theme) => ({
       color: theme.palette.primary.main,
     },
   },
+  avatarBox: {
+    margin: '0 auto',
+    width: '150px',
+    textAlign: 'right',
+  },
+  avatarBtn: {
+    color: '#757575',
+    cursor: 'pointer',
+    transition: 'all 0.25s',
+    '&:hover': {
+      color: theme.palette.primary.dark,
+      transition: 'all 0.25s',
+    },
+  },
   avatar: {
     width: '5em',
     height: '5em',