Add avatar uploader to profile screen

src/screens/Profile/View.js

@@ -1,3 +1,4 @@
+import { Edit } from '@mui/icons-material';
 import {
   Avatar,
   Box,
@@ -10,6 +11,7 @@ import {
   Typography,
   Container,
   Button,
+  Fab,
 } from '@mui/material';
 import dayjs from 'dayjs';
 
@@ -19,10 +21,18 @@ import { COURSES } from '../../utils/constants';
 import { createArrayFrom1ToN } from '../../utils/createArrayFrom1ToN';
 import styles from './styles';
 
-function View({ data, onChangeInput, layoutType }) {
+function View({
+  data,
+  onChangeInput,
+  onChangeFile,
+  hiddenInputImageFileRef,
+  layoutType,
+}) {
   const {
     profileSummaryBox,
+    avatarStack,
     avatar,
+    avatarFab,
     profileSummaryStack,
     formBox,
     formField,
@@ -36,7 +46,25 @@ function View({ data, onChangeInput, layoutType }) {
   return (
     <Container disableGutters sx={{ display: 'flex', flexDirection: 'column' }}>
       <Box sx={profileSummaryBox}>
+        <Stack sx={avatarStack}>
           <Avatar alt={fullName} src={data.avatar} sx={avatar} />
+          <input
+            type="file"
+            name="avatar"
+            ref={hiddenInputImageFileRef}
+            onChange={onChangeFile}
+            style={{ display: 'none' }}
+          />
+          <Fab
+            onClick={() => hiddenInputImageFileRef.current.click()}
+            sx={avatarFab}
+            size="small"
+            color="primary"
+            aria-label="add"
+          >
+            <Edit />
+          </Fab>
+        </Stack>
         <Stack sx={profileSummaryStack}>
           <Typography sx={fullNameTypography} variant="h4">
             {fullName}

src/screens/Profile/index.js

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useRef, useState } from 'react';
 import { useUser } from '../../context/user';
 import { useDocumentTitle } from '../../hooks/useDocumentTitle';
 import useLayoutType from '../../hooks/useLayoutType';
@@ -9,6 +9,14 @@ function Profile() {
   const layoutType = useLayoutType();
   const { state } = useUser();
   const [data, setData] = useState(state && state.user);
+  const hiddenInputImageFileRef = useRef();
+
+  const onChangeFile = e => {
+    const name = e.target.name;
+    const file = e.target.files[0];
+
+    setData(prev => ({ ...prev, [name]: URL.createObjectURL(file) }));
+  };
 
   const onChangeInput = e => {
     const name = e.target.name;
@@ -18,7 +26,13 @@ function Profile() {
   };
 
   return (
-    <View data={data} onChangeInput={onChangeInput} layoutType={layoutType} />
+    <View
+      data={data}
+      onChangeInput={onChangeInput}
+      onChangeFile={onChangeFile}
+      hiddenInputImageFileRef={hiddenInputImageFileRef}
+      layoutType={layoutType}
+    />
   );
 }
 

src/screens/Profile/styles.js

@@ -6,11 +6,21 @@ const desktopProfileSummaryBox = {
   marginTop: '70px',
 };
 
+const desktopAvatarStack = {
+  position: 'relative',
+};
+
 const desktopAvatar = {
   width: 200,
   height: 200,
 };
 
+const desktopAvatarFab = {
+  position: 'absolute',
+  bottom: '10%',
+  right: 0,
+};
+
 const desktopProfileSummaryStack = {
   marginLeft: '30px',
 };
@@ -42,7 +52,9 @@ const desktopButton = {
 
 const desktop = {
   profileSummaryBox: desktopProfileSummaryBox,
+  avatarStack: desktopAvatarStack,
   avatar: desktopAvatar,
+  avatarFab: desktopAvatarFab,
   profileSummaryStack: desktopProfileSummaryStack,
   formBox: desktopFormBox,
   formField: desktopFormField,
@@ -59,12 +71,20 @@ const mobileProfileSummaryBox = {
   height: 'fit-content',
 };
 
+const mobileAvatarStack = {
+  ...desktopAvatarStack,
+};
+
 const mobileAvatar = {
   ...desktopAvatar,
   width: 170,
   height: 170,
 };
 
+const mobileAvatarFab = {
+  ...desktopAvatarFab,
+};
+
 const mobileProfileSummaryStack = {};
 
 const mobileFormBox = {
@@ -96,7 +116,9 @@ const mobileButton = {
 
 const mobile = {
   profileSummaryBox: mobileProfileSummaryBox,
+  avatarStack: mobileAvatarStack,
   avatar: mobileAvatar,
+  avatarFab: mobileAvatarFab,
   profileSummaryStack: mobileProfileSummaryStack,
   formBox: mobileFormBox,
   formField: mobileFormField,
@@ -108,6 +130,7 @@ const mobile = {
 // ========== Unset ==========
 const unset = {
   profileSummaryBox: null,
+  avatarStack: null,
   avatar: null,
   profileSummaryStack: null,
   formBox: null,