refactor!: simplify file operations

4 files changed, 61 insertions, 14 deletions

diff --git a/src/containers/PollCreation/ImageInput.tsx b/src/containers/PollCreation/ImageInput.tsx
index 475d527..e807865 100644
--- a/src/containers/PollCreation/ImageInput.tsx
+++ b/src/containers/PollCreation/ImageInput.tsx
@@ -10,6 +10,7 @@ import { Check, CancelOutlined } from '@material-ui/icons';
 import AttachLink from '../../components/AttachLink/AttachLink';
 import FileUpload from '../../components/FileUpload/FileUpload';
 import BackgroundImage from '../../components/Image/BackgroundImage';
+import getLocalFileUrl from '../../utils/getLocalFileUrl';
 
 interface PropTypes {
   callback: (file?: File | string) => void;
@@ -59,9 +60,12 @@ const ImageInput: React.FC<PropTypes> = ({ callback, progress }) => {
     callback(undefined);
   };
 
-  const childrenCallback = (fileUrl: string, file?: File) => {
-    setUrl(fileUrl);
-    callback(file || fileUrl);
+  const childrenCallback = (value: File | string) => {
+    if (value instanceof File) {
+      getLocalFileUrl(value).then(localUrl => setUrl(localUrl));
+    } else setUrl(value);
+
+    callback(value);
   };
 
   const Upload = (
diff --git a/src/containers/PollCreation/PollCreation.tsx b/src/containers/PollCreation/PollCreation.tsx
index 03ab905..87bdcf7 100644
--- a/src/containers/PollCreation/PollCreation.tsx
+++ b/src/containers/PollCreation/PollCreation.tsx
@@ -12,12 +12,12 @@ import {
 } from '@material-ui/core';
 import { useSnackbar } from 'notistack';
 
+import useS3Preupload from './useS3Preupload';
 import ImageInput from './ImageInput';
 import UserStrip from '../../components/UserStrip/UserStrip';
 import { post } from '../../requests';
 import { useAuth } from '../../hooks/useAuth';
 import { useFeed } from '../../hooks/APIClient';
-import useS3Preupload from '../../hooks/useS3Preupload';
 
 
 const useStyles = makeStyles(theme => ({
diff --git a/src/containers/PollCreation/useS3Preupload.ts b/src/containers/PollCreation/useS3Preupload.ts
new file mode 100644
index 0000000..ef3a408
--- /dev/null
+++ b/src/containers/PollCreation/useS3Preupload.ts
@@ -0,0 +1,40 @@
+import { useState, useCallback, useMemo } from 'react';
+import uploadFileToS3 from '../../utils/uploadFileToS3';
+
+
+interface Hook {
+  setValue: (value: File | string | undefined) => void;
+  isReady: boolean;
+  resolve: () => Promise<string>;
+  progress: number;
+}
+
+export default (): Hook => {
+  const [url, setUrl] = useState<string>();
+  const [file, setFile] = useState<File>();
+  const [progress, setProgress] = useState<number>(0);
+
+  const isReady = useMemo(() => Boolean(file || url), [file, url]);
+
+  const setValue: Hook['setValue'] = useCallback(value => {
+    if (value instanceof File) {
+      setFile(value);
+      setUrl(undefined);
+    } else {
+      setUrl(value);
+      setFile(undefined);
+    }
+  }, [setUrl, setFile]);
+
+  const resolve = useCallback(async (quality?: number): Promise<string> => {
+    if (file) return uploadFileToS3(file, quality, setProgress);
+    return url || '';
+  }, [file, url]);
+
+  return {
+    setValue,
+    isReady,
+    resolve,
+    progress
+  };
+};
diff --git a/src/containers/Profile/ProfileInfo.tsx b/src/containers/Profile/ProfileInfo.tsx
index c9831f3..fbd6272 100644
--- a/src/containers/Profile/ProfileInfo.tsx
+++ b/src/containers/Profile/ProfileInfo.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { Badge, Typography } from '@material-ui/core/';
 import { makeStyles } from '@material-ui/core/styles';
 import { User } from 'which-types';
@@ -6,10 +6,11 @@ import CameraAltIcon from '@material-ui/icons/CameraAlt';
 import VerifiedIcon from '@material-ui/icons/CheckCircleOutline';
 import Skeleton from '@material-ui/lab/Skeleton';
 import Highlight from './Highlight';
-import AttachLink from '../../components/AttachLink/AttachLink';
+import FileUpload from '../../components/FileUpload/FileUpload';
 import Avatar from '../../components/Avatar/Avatar';
 import { patch } from '../../requests';
 import { useAuth } from '../../hooks/useAuth';
+import uploadFileToS3 from '../../utils/uploadFileToS3';
 
 
 interface PropTypes {
@@ -88,14 +89,16 @@ const ProfileInfo: React.FC<PropTypes> = ({
 }) => {
   const classes = useStyles();
   const { user } = useAuth();
+
   const dateSince = new Date(userInfo?.createdAt || '').toLocaleDateString();
 
-  const patchAvatar = (url: string) => {
-    const id = user?._id;
-    patch(`/users/${id}`, { avatarUrl: url }).then(res => {
-      setUserInfo(res.data);
-    });
-  };
+  const handleUpdateAvatar = useCallback(async (file: File) => {
+    if (user) {
+      uploadFileToS3(file, 1)
+        .then(avatarUrl => patch(`/users/${user._id}`, { avatarUrl }))
+        .then(response => setUserInfo(response.data));
+    }
+  }, [user, setUserInfo]);
 
   return (
     <div className={classes.root}>
@@ -104,7 +107,7 @@ const ProfileInfo: React.FC<PropTypes> = ({
           ? <Skeleton animation="wave" variant="circle" width={150} height={150} className={classes.avatar} />
           : userInfo?._id === user?._id
             ? (
-              <AttachLink callback={patchAvatar}>
+              <FileUpload callback={handleUpdateAvatar}>
                 <div className={classes.avatarContainer}>
                   <Badge
                     overlap="circle"
@@ -121,7 +124,7 @@ const ProfileInfo: React.FC<PropTypes> = ({
                     <Avatar className={classes.avatar} user={userInfo} />
                   </Badge>
                 </div>
-              </AttachLink>
+              </FileUpload>
             )
             : <Avatar className={classes.avatar} user={userInfo} />
       }