From bac1f95ffe697fb6c008ab7cc29183efb6dc9893 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Mon, 10 Aug 2020 23:10:47 +0300
Subject: feat: basic image upload

---
 src/containers/Feed/PollSubmissionImage.tsx | 40 +++++++++++++++++------------
 1 file changed, 24 insertions(+), 16 deletions(-)

(limited to 'src/containers/Feed/PollSubmissionImage.tsx')

diff --git a/src/containers/Feed/PollSubmissionImage.tsx b/src/containers/Feed/PollSubmissionImage.tsx
index 8835989..cd67847 100644
--- a/src/containers/Feed/PollSubmissionImage.tsx
+++ b/src/containers/Feed/PollSubmissionImage.tsx
@@ -1,14 +1,13 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
+import { useFilePicker, utils } from 'react-sage';
 import { makeStyles } from '@material-ui/core/styles';
 import CloudUploadIcon from '@material-ui/icons/CloudUpload';
 import { CardActionArea, CardMedia, Typography } from '@material-ui/core';
 import CancelOutlinedIcon from '@material-ui/icons/CancelOutlined';
 
-import UploadImage from '../../components/UploadImage/UploadImage';
-
 interface PropTypes {
-  url: string;
-  setUrl: (url: string) => void;
+  file: File | undefined;
+  setFile: (file: File | undefined) => void;
 }
 
 const useStyles = makeStyles({
@@ -35,18 +34,12 @@ const useStyles = makeStyles({
 });
 
 
-const PollSubmissionImage: React.FC<PropTypes> = ({ url, setUrl }) => {
+const PollSubmissionImage: React.FC<PropTypes> = ({ file, setFile }) => {
   const classes = useStyles();
-  const [isModalOpen, setIsModalOpen] = useState(false);
+  const { files, onClick, HiddenFileInput } = useFilePicker();
+  const [url, setUrl] = useState<string>();
   const [isMediaHover, setIsMediaHover] = useState(false);
 
-  const handleClick = (): void => {
-    if (!isModalOpen) {
-      if (url) setUrl('');
-      else setIsModalOpen(!isModalOpen);
-    }
-  };
-
   const handleMouseEnter = (): void => {
     setIsMediaHover(true);
   };
@@ -55,11 +48,27 @@ const PollSubmissionImage: React.FC<PropTypes> = ({ url, setUrl }) => {
     setIsMediaHover(false);
   };
 
+  useEffect(() => {
+    if (files?.length) {
+      const chosenFile = files[0];
+      setFile(chosenFile);
+      utils.loadFile(chosenFile).then(result => setUrl(result));
+    }
+  }, [files, setFile]);
+
+
+  const handleClick = () => {
+    if (file) {
+      setFile(undefined);
+    } else onClick();
+  };
+
 
   const Upload = (
     <>
       <CloudUploadIcon fontSize="large" color="primary" />
       <Typography variant="h5" className={classes.text}> Upload an image </Typography>
+      <HiddenFileInput accept=".jpg, .jpeg, .png, .gif" multiple={false} />
     </>
   );
 
@@ -77,9 +86,8 @@ const PollSubmissionImage: React.FC<PropTypes> = ({ url, setUrl }) => {
   return (
     <>
       <CardActionArea onClick={handleClick} className={classes.root}>
-        {url ? Media : Upload}
+        {file ? (url && Media) : Upload}
       </CardActionArea>
-      <UploadImage isOpen={isModalOpen} setIsOpen={setIsModalOpen} callback={setUrl} />
     </>
   );
 };
-- 
cgit v1.2.3