aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--package-lock.json5
-rw-r--r--package.json1
-rw-r--r--src/containers/Feed/PollSubmission.tsx46
-rw-r--r--src/containers/Feed/PollSubmissionImage.tsx40
4 files changed, 58 insertions, 34 deletions
diff --git a/package-lock.json b/package-lock.json
index 7e5a09d..c01707b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10927,6 +10927,11 @@
"tiny-warning": "^1.0.0"
}
},
+ "react-sage": {
+ "version": "0.1.2",
+ "resolved": "https://registry.npmjs.org/react-sage/-/react-sage-0.1.2.tgz",
+ "integrity": "sha512-tJk2SATS0Czg5a3Sae4ilvv2W0FedBuvPFKi81qgAO7cIzn5/p1EArOYcRvGzinJVFP3/4l0Uz4gF95cx3cVhg=="
+ },
"react-scripts": {
"version": "3.4.1",
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-3.4.1.tgz",
diff --git a/package.json b/package.json
index 368f4e2..a18e64d 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
"react-dom": "^16.13.1",
"react-icons": "^3.10.0",
"react-router-dom": "^5.2.0",
+ "react-sage": "^0.1.2",
"react-scripts": "3.4.1",
"react-virtualized": "^9.21.2",
"swr": "^0.3.0",
diff --git a/src/containers/Feed/PollSubmission.tsx b/src/containers/Feed/PollSubmission.tsx
index 347eecc..faaf2bd 100644
--- a/src/containers/Feed/PollSubmission.tsx
+++ b/src/containers/Feed/PollSubmission.tsx
@@ -7,12 +7,13 @@ import {
ClickAwayListener,
Divider
} from '@material-ui/core';
-import { Poll, Which } from 'which-types';
+import { Poll } from 'which-types';
import { useSnackbar } from 'notistack';
+import axios from 'axios';
+
import PollSubmissionImage from './PollSubmissionImage';
import UserStrip from '../../components/UserStrip/UserStrip';
-import { post } from '../../requests';
-import { Contents } from './types';
+import { get, post } from '../../requests';
import { useAuth } from '../../hooks/useAuth';
interface PropTypes{
@@ -29,37 +30,46 @@ const useStyles = makeStyles(theme => ({
}
}));
-const emptyContents: Contents = {
- left: { url: '' },
- right: { url: '' }
-};
-
const PollSubmission: React.FC<PropTypes> = ({ addPoll }) => {
const classes = useStyles();
const [expanded, setExpanded] = useState(false);
- const [contents, setContents] = useState<Contents>(emptyContents);
+ const [left, setLeft] = useState<File>();
+ const [right, setRight] = useState<File>();
const { enqueueSnackbar } = useSnackbar();
const { user } = useAuth();
- const readyToSubmit = contents.left.url && contents.right.url;
-
- const setUrl = (which: Which) => (url: string): void => {
- setContents({ ...contents, [which]: { url } });
- };
+ const readyToSubmit = left && right;
const handleClickAway = () => {
setExpanded(false);
};
- const handleClick = () => {
+ const uploadImage = (file?: File) => {
+ 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 && url.slice(0, url.indexOf('.png') + 4);
+ });
+ };
+
+ const handleClick = async () => {
if (expanded && readyToSubmit) {
+ const [leftUrl, rightUrl] = await Promise.all([uploadImage(left), uploadImage(right)]);
+
+ const contents = {
+ left: { url: leftUrl },
+ right: { url: rightUrl }
+ };
+
post('/polls/', { contents }).then(response => {
addPoll(response.data);
enqueueSnackbar('Your poll has been successfully created!', {
variant: 'success'
});
});
- setContents({ ...emptyContents });
}
setExpanded(!expanded);
};
@@ -71,8 +81,8 @@ const PollSubmission: React.FC<PropTypes> = ({ addPoll }) => {
{user && <UserStrip user={user} info="" />}
<Divider />
<div className={classes.images}>
- <PollSubmissionImage url={contents.left.url} setUrl={setUrl('left')} />
- <PollSubmissionImage url={contents.right.url} setUrl={setUrl('right')} />
+ <PollSubmissionImage file={left} setFile={setLeft} />
+ <PollSubmissionImage file={right} setFile={setRight} />
</div>
</Collapse>
<Button
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} />
</>
);
};
generated by cgit v1.2.3 (git 2.25.1) at 2025-10-25 00:01:07 +0000