From 551928f9fe5542dd91c9a8578124b4fb05fb9be2 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Sat, 22 Aug 2020 00:43:22 +0300
Subject: refactor: rewrite FileUpload without react-sage

---
 src/components/FileUpload/FileUpload.tsx | 30 +++++++++++++++++++++---------
 1 file changed, 21 insertions(+), 9 deletions(-)

(limited to 'src/components/FileUpload')

diff --git a/src/components/FileUpload/FileUpload.tsx b/src/components/FileUpload/FileUpload.tsx
index 67d280d..1c05e7f 100644
--- a/src/components/FileUpload/FileUpload.tsx
+++ b/src/components/FileUpload/FileUpload.tsx
@@ -1,5 +1,5 @@
-import React, { useEffect } from 'react';
-import { useFilePicker, utils } from 'react-sage';
+import React, { useRef } from 'react';
+import { utils } from 'react-sage';
 import Button from '@material-ui/core/Button';
 import CloudUpload from '@material-ui/icons/CloudUpload';
 
@@ -9,20 +9,25 @@ interface PropTypes {
 
 
 const FileUpload: React.FC<PropTypes> = ({ callback, children }) => {
-  const { files, onClick, HiddenFileInput } = useFilePicker();
+  const inputRef = useRef<HTMLInputElement>(null);
 
-  useEffect(() => {
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const files = event.target?.files;
     if (files?.length) {
       const file = files[0];
       utils.loadFile(file).then(url => callback(url, file));
-    }
-  }, [files, callback]);
+    };
+  };
+
+  const handleClick = () => {
+    if (inputRef?.current) inputRef.current.click();
+  };
 
   const child = children && React.Children.toArray(children)[0];
 
   const defaultButton = (
     <Button
-      onClick={onClick}
+      onClick={handleClick}
       variant="contained"
       color="primary"
       size="large"
@@ -34,10 +39,17 @@ const FileUpload: React.FC<PropTypes> = ({ callback, children }) => {
 
   return (
     <>
-      <HiddenFileInput accept=".jpg, .jpeg, .png, .gif" multiple={false} />
+      <input
+        type="file"
+        ref={inputRef}
+        multiple={false}
+        accept=".jpg, .jpeg, .png, .gif"
+        style={{ display: 'none' }}
+        onChange={handleChange}
+      />
       {
         React.isValidElement(child)
-          ? React.cloneElement(child, { onClick })
+          ? React.cloneElement(child, { onClick: handleClick })
           : defaultButton
       }
     </>
-- 
cgit v1.2.3


From 314ff9c134e898bcf42e277618ec813969ab84f9 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Sat, 22 Aug 2020 01:03:20 +0300
Subject: refactor: use React.Children.only for wrappers

---
 src/components/FileUpload/FileUpload.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/components/FileUpload')

diff --git a/src/components/FileUpload/FileUpload.tsx b/src/components/FileUpload/FileUpload.tsx
index 1c05e7f..6a31656 100644
--- a/src/components/FileUpload/FileUpload.tsx
+++ b/src/components/FileUpload/FileUpload.tsx
@@ -23,7 +23,7 @@ const FileUpload: React.FC<PropTypes> = ({ callback, children }) => {
     if (inputRef?.current) inputRef.current.click();
   };
 
-  const child = children && React.Children.toArray(children)[0];
+  const child = children && React.Children.only(children);
 
   const defaultButton = (
     <Button
-- 
cgit v1.2.3


From 611d90f557140c442e4066e396d8c12ce4c340d3 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Sat, 22 Aug 2020 01:16:23 +0300
Subject: refactor!: rewrite code without react-sage

---
 src/components/FileUpload/FileUpload.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'src/components/FileUpload')

diff --git a/src/components/FileUpload/FileUpload.tsx b/src/components/FileUpload/FileUpload.tsx
index 6a31656..d455f62 100644
--- a/src/components/FileUpload/FileUpload.tsx
+++ b/src/components/FileUpload/FileUpload.tsx
@@ -1,7 +1,7 @@
 import React, { useRef } from 'react';
-import { utils } from 'react-sage';
 import Button from '@material-ui/core/Button';
 import CloudUpload from '@material-ui/icons/CloudUpload';
+import { getLocalFileUrl } from '../../utils/files';
 
 interface PropTypes {
   callback: (fileUrl: string, file: File) => void;
@@ -15,7 +15,7 @@ const FileUpload: React.FC<PropTypes> = ({ callback, children }) => {
     const files = event.target?.files;
     if (files?.length) {
       const file = files[0];
-      utils.loadFile(file).then(url => callback(url, file));
+      getLocalFileUrl(file).then(url => callback(url, file));
     };
   };
 
-- 
cgit v1.2.3


From 668c9f4841e7118b98bb31d8e68640689be99830 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Sat, 22 Aug 2020 13:54:56 +0300
Subject: refactor!: simplify file operations

---
 src/components/FileUpload/FileUpload.tsx | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

(limited to 'src/components/FileUpload')

diff --git a/src/components/FileUpload/FileUpload.tsx b/src/components/FileUpload/FileUpload.tsx
index d455f62..961fa9a 100644
--- a/src/components/FileUpload/FileUpload.tsx
+++ b/src/components/FileUpload/FileUpload.tsx
@@ -1,10 +1,9 @@
 import React, { useRef } from 'react';
 import Button from '@material-ui/core/Button';
 import CloudUpload from '@material-ui/icons/CloudUpload';
-import { getLocalFileUrl } from '../../utils/files';
 
 interface PropTypes {
-  callback: (fileUrl: string, file: File) => void;
+  callback: (file: File) => void;
 }
 
 
@@ -13,10 +12,7 @@ const FileUpload: React.FC<PropTypes> = ({ callback, children }) => {
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const files = event.target?.files;
-    if (files?.length) {
-      const file = files[0];
-      getLocalFileUrl(file).then(url => callback(url, file));
-    };
+    if (files?.length) callback(files[0]);
   };
 
   const handleClick = () => {
-- 
cgit v1.2.3