1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
|
import React, { useState } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Collapse from '@material-ui/core/Collapse';
import {
Button,
Card,
ClickAwayListener,
Divider
} from '@material-ui/core';
import { Poll } from 'which-types';
import { useSnackbar } from 'notistack';
import axios from 'axios';
import PollSubmissionImage from './PollSubmissionImage';
import UserStrip from '../../components/UserStrip/UserStrip';
import { get, post } from '../../requests';
import { useAuth } from '../../hooks/useAuth';
interface PropTypes{
addPoll: (poll: Poll) => void;
}
const useStyles = makeStyles(theme => ({
root: {
marginBottom: theme.spacing(4)
},
images: {
height: theme.spacing(50),
display: 'flex'
}
}));
const PollSubmission: React.FC<PropTypes> = ({ addPoll }) => {
const classes = useStyles();
const [expanded, setExpanded] = useState(false);
const [left, setLeft] = useState<File>();
const [right, setRight] = useState<File>();
const { enqueueSnackbar } = useSnackbar();
const { user } = useAuth();
const readyToSubmit = left && right;
const handleClickAway = () => {
setExpanded(false);
};
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'
});
});
}
setExpanded(!expanded);
};
return (
<ClickAwayListener onClickAway={handleClickAway}>
<Card className={classes.root}>
<Collapse in={expanded} timeout="auto" unmountOnExit>
{user && <UserStrip user={user} info="" />}
<Divider />
<div className={classes.images}>
<PollSubmissionImage file={left} setFile={setLeft} />
<PollSubmissionImage file={right} setFile={setRight} />
</div>
</Collapse>
<Button
color="primary"
disabled={expanded && !readyToSubmit}
variant={expanded ? 'contained' : 'outlined'}
onClick={handleClick}
fullWidth
>
{expanded ? 'Submit' : 'Create a Poll'}
</Button>
</Card>
</ClickAwayListener>
);
};
export default PollSubmission;
|
