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/hooks/useS3Preupload.tsx | 48 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 48 insertions(+)
 create mode 100644 src/hooks/useS3Preupload.tsx

(limited to 'src/hooks')

diff --git a/src/hooks/useS3Preupload.tsx b/src/hooks/useS3Preupload.tsx
new file mode 100644
index 0000000..aeb1d65
--- /dev/null
+++ b/src/hooks/useS3Preupload.tsx
@@ -0,0 +1,48 @@
+import { useState, useCallback, useMemo } from 'react';
+import { get } from '../requests';
+import axios from 'axios';
+
+
+export default () => {
+  const [url, setUrl] = useState<string>();
+  const [file, setFile] = useState<File>();
+  const [progress, setProgress] = useState<number>(0);
+
+  const isReady = useMemo(() => Boolean(file || url), [file, url]);
+
+
+  console.log({ file, url })
+
+  const setValue = useCallback((value: File | string | undefined): void => {
+    if (value instanceof File) {
+      setFile(value);
+      setUrl(undefined);
+    } else {
+      setUrl(value);
+      setFile(undefined);
+    }
+  }, [setUrl, setFile]);
+
+  const handleUploadProgress = useCallback((progressEvent: any) => {
+    setProgress(Math.round((progressEvent.loaded * 100) / progressEvent.total));
+  }, [setProgress]);
+
+  const resolve = useCallback(async (): Promise<string> => {
+    if (file) {
+      const config = {
+        headers: { 'Content-Type': 'image/png' },
+        onUploadProgress: handleUploadProgress
+      };
+
+      return get('/files')
+        .then(response => response.data)
+        .then(uploadUrl => axios.put(uploadUrl, file, config))
+        .then(response => {
+          const { config: { url } } = response;
+          return url ? url.slice(0, url.indexOf('?')) : '';
+        });
+    } else return url || '';
+  }, [file, handleUploadProgress, url]);
+
+  return { setValue, isReady, resolve, progress };
+};
-- 
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/hooks/useS3Preupload.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

(limited to 'src/hooks')

diff --git a/src/hooks/useS3Preupload.tsx b/src/hooks/useS3Preupload.tsx
index aeb1d65..64db942 100644
--- a/src/hooks/useS3Preupload.tsx
+++ b/src/hooks/useS3Preupload.tsx
@@ -41,7 +41,10 @@ export default () => {
           const { config: { url } } = response;
           return url ? url.slice(0, url.indexOf('?')) : '';
         });
-    } else return url || '';
+    } else {
+      setProgress(100);
+      return url || '';
+    }
   }, [file, handleUploadProgress, url]);
 
   return { setValue, isReady, resolve, progress };
-- 
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/hooks/useS3Preupload.tsx | 39 ++++++++++++++++++++++++++-------------
 1 file changed, 26 insertions(+), 13 deletions(-)

(limited to 'src/hooks')

diff --git a/src/hooks/useS3Preupload.tsx b/src/hooks/useS3Preupload.tsx
index 64db942..3c98e9a 100644
--- a/src/hooks/useS3Preupload.tsx
+++ b/src/hooks/useS3Preupload.tsx
@@ -1,19 +1,28 @@
 import { useState, useCallback, useMemo } from 'react';
-import { get } from '../requests';
 import axios from 'axios';
+import { get } from '../requests';
+
+
+interface ProgressEvent {
+  loaded: number;
+  total: number;
+}
 
+interface Hook {
+  setValue: (value: File | string | undefined) => void;
+  isReady: boolean;
+  resolve: () => Promise<string>;
+  progress: number;
+}
 
-export default () => {
+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]);
 
-
-  console.log({ file, url })
-
-  const setValue = useCallback((value: File | string | undefined): void => {
+  const setValue: Hook['setValue'] = useCallback(value => {
     if (value instanceof File) {
       setFile(value);
       setUrl(undefined);
@@ -23,7 +32,7 @@ export default () => {
     }
   }, [setUrl, setFile]);
 
-  const handleUploadProgress = useCallback((progressEvent: any) => {
+  const handleUploadProgress = useCallback((progressEvent: ProgressEvent): void => {
     setProgress(Math.round((progressEvent.loaded * 100) / progressEvent.total));
   }, [setProgress]);
 
@@ -38,14 +47,18 @@ export default () => {
         .then(response => response.data)
         .then(uploadUrl => axios.put(uploadUrl, file, config))
         .then(response => {
-          const { config: { url } } = response;
-          return url ? url.slice(0, url.indexOf('?')) : '';
+          const uri = response.config.url;
+          return uri ? uri.slice(0, uri.indexOf('?')) : '';
         });
-    } else {
-      setProgress(100);
-      return url || '';
     }
+    setProgress(100);
+    return url || '';
   }, [file, handleUploadProgress, url]);
 
-  return { setValue, isReady, resolve, progress };
+  return {
+    setValue,
+    isReady,
+    resolve,
+    progress
+  };
 };
-- 
cgit v1.2.3