From 60583c1496aeaf366087bff550da8e9288ff33cf Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Fri, 14 Aug 2020 01:25:56 +0300
Subject: refactor: add useS3Preupload hook

---
 src/containers/PollCreation/PollCreation.tsx | 46 ++++++++++++----------------
 1 file changed, 20 insertions(+), 26 deletions(-)

(limited to 'src/containers/PollCreation/PollCreation.tsx')

diff --git a/src/containers/PollCreation/PollCreation.tsx b/src/containers/PollCreation/PollCreation.tsx
index 64ab7fd..e613afd 100644
--- a/src/containers/PollCreation/PollCreation.tsx
+++ b/src/containers/PollCreation/PollCreation.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { useHistory } from 'react-router-dom';
 import { makeStyles } from '@material-ui/core/styles';
 import {
@@ -8,13 +8,14 @@ import {
   Container
 } from '@material-ui/core';
 import { useSnackbar } from 'notistack';
-import axios from 'axios';
 
 import PollCreationImage from './PollCreationImage';
 import UserStrip from '../../components/UserStrip/UserStrip';
-import { get, post } from '../../requests';
+import { post } from '../../requests';
 import { useAuth } from '../../hooks/useAuth';
 import { useFeed } from '../../hooks/APIClient';
+import useS3Preupload from '../../hooks/useS3Preupload';
+
 
 const useStyles = makeStyles(theme => ({
   root: {
@@ -26,36 +27,29 @@ const useStyles = makeStyles(theme => ({
   }
 }));
 
+
 const PollCreation: React.FC = () => {
   const classes = useStyles();
   const history = useHistory();
-  const [left, setLeft] = useState<File | string>();
-  const [right, setRight] = useState<File | string>();
   const { enqueueSnackbar } = useSnackbar();
   const { user } = useAuth();
   const { mutate: updateFeed } = useFeed();
-
-  const readyToSubmit = left && right;
-
-  const uploadFile = (file: File): Promise<string> => {
-    const headers = { 'Content-Type': 'image/png' };
-    return get('/files')
-      .then(response => response.data)
-      .then(uploadUrl => axios.put(uploadUrl, file, { headers }))
-      .then(response => {
-        const { config: { url } } = response;
-        return url?.slice(0, url?.indexOf('?')) || '';
-      });
-  };
-
-  const resolveFile = async (file?: File | string): Promise<string> => {
-    if (file instanceof File) return uploadFile(file);
-    return file || '';
-  };
+  const {
+    setValue: setLeft,
+    progress: progressLeft,
+    resolve: resolveLeft,
+    isReady: isLeftReady
+  } = useS3Preupload();
+  const {
+    setValue: setRight,
+    progress: progressRight,
+    resolve: resolveRight,
+    isReady: isRightReady
+  } = useS3Preupload();
 
   const handleClick = async () => {
-    if (readyToSubmit) {
-      const [leftUrl, rightUrl] = await Promise.all([resolveFile(left), resolveFile(right)]);
+    if (isLeftReady && isRightReady) {
+      const [leftUrl, rightUrl] = await Promise.all([resolveLeft(), resolveRight()]);
 
       const contents = {
         left: { url: leftUrl },
@@ -84,7 +78,7 @@ const PollCreation: React.FC = () => {
         </div>
         <Button
           color="primary"
-          disabled={!readyToSubmit}
+          disabled={!(isLeftReady && isRightReady)}
           variant="contained"
           onClick={handleClick}
           fullWidth
-- 
cgit v1.2.3


From 88d3c411efbf5f6ac74fa67e38c154f1e53d4938 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Fri, 14 Aug 2020 02:24:18 +0300
Subject: feat: show upload progress

---
 src/containers/PollCreation/PollCreation.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

(limited to 'src/containers/PollCreation/PollCreation.tsx')

diff --git a/src/containers/PollCreation/PollCreation.tsx b/src/containers/PollCreation/PollCreation.tsx
index e613afd..e350179 100644
--- a/src/containers/PollCreation/PollCreation.tsx
+++ b/src/containers/PollCreation/PollCreation.tsx
@@ -73,17 +73,17 @@ const PollCreation: React.FC = () => {
         {user && <UserStrip user={user} info="" />}
         <Divider />
         <div className={classes.images}>
-          <PollCreationImage callback={setLeft} />
-          <PollCreationImage callback={setRight} />
+          <PollCreationImage callback={setLeft} progress={progressLeft} />
+          <PollCreationImage callback={setRight} progress={progressRight} />
         </div>
         <Button
           color="primary"
-          disabled={!(isLeftReady && isRightReady)}
+          disabled={!(isLeftReady && isRightReady) || Boolean(progressLeft || progressRight)}
           variant="contained"
           onClick={handleClick}
           fullWidth
         >
-          Submit
+          {(progressLeft || progressRight) ? 'Waiting for upload' : 'Submit'}
         </Button>
       </Card>
     </Container>
-- 
cgit v1.2.3


From fca54f49bb3541f726da1becffaa60197835ca68 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Fri, 14 Aug 2020 02:45:20 +0300
Subject: refactor: resolve eslint errors

---
 src/containers/PollCreation/PollCreation.tsx | 33 +++++++++++++++++-----------
 1 file changed, 20 insertions(+), 13 deletions(-)

(limited to 'src/containers/PollCreation/PollCreation.tsx')

diff --git a/src/containers/PollCreation/PollCreation.tsx b/src/containers/PollCreation/PollCreation.tsx
index e350179..107314a 100644
--- a/src/containers/PollCreation/PollCreation.tsx
+++ b/src/containers/PollCreation/PollCreation.tsx
@@ -5,11 +5,12 @@ import {
   Button,
   Card,
   Divider,
-  Container
+  Container,
+  LinearProgress
 } from '@material-ui/core';
 import { useSnackbar } from 'notistack';
 
-import PollCreationImage from './PollCreationImage';
+import ImageInput from './ImageInput';
 import UserStrip from '../../components/UserStrip/UserStrip';
 import { post } from '../../requests';
 import { useAuth } from '../../hooks/useAuth';
@@ -73,18 +74,24 @@ const PollCreation: React.FC = () => {
         {user && <UserStrip user={user} info="" />}
         <Divider />
         <div className={classes.images}>
-          <PollCreationImage callback={setLeft} progress={progressLeft} />
-          <PollCreationImage callback={setRight} progress={progressRight} />
+          <ImageInput callback={setLeft} progress={progressLeft} />
+          <ImageInput callback={setRight} progress={progressRight} />
         </div>
-        <Button
-          color="primary"
-          disabled={!(isLeftReady && isRightReady) || Boolean(progressLeft || progressRight)}
-          variant="contained"
-          onClick={handleClick}
-          fullWidth
-        >
-          {(progressLeft || progressRight) ? 'Waiting for upload' : 'Submit'}
-        </Button>
+        {
+          progressLeft || progressRight
+            ? <LinearProgress color="primary" />
+            : (
+              <Button
+                color="primary"
+                disabled={!(isLeftReady && isRightReady)}
+                variant="contained"
+                onClick={handleClick}
+                fullWidth
+              >
+                Submit
+              </Button>
+            )
+        }
       </Card>
     </Container>
   );
-- 
cgit v1.2.3