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
|
import React, { useState } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Collapse from '@material-ui/core/Collapse';
import {
Button, Card, CardMedia, ClickAwayListener, Divider
} from '@material-ui/core';
import { User, Poll } from 'which-types';
import PollSubmissionImage from './PollSubmissionImage';
import UserStrip from '../../components/UserStrip/UserStrip';
import { post } from '../../requests';
import { Contents } from './types';
interface PropTypes{
user: User;
polls: Poll[];
setPolls: (a:Poll[])=> void;
}
const useStyles = makeStyles(theme => ({
root: {
textAlign: 'center',
cursor: 'pointer'
},
card: {
height: 400,
display: 'flex'
},
images: {
height: theme.spacing(50),
width: 300,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
cursor: 'pointer'
},
button: {
width: '100%'
}
}));
const PollSubmission: React.FC<PropTypes> = ({ user , polls, setPolls}) => {
const classes = useStyles();
const [expanded, setExpanded] = useState(false);
const [contents, setContents] = useState<Contents>({
left: {
url: ''
},
right: {
url: ''
}
});
const handleClickAway = () => {
setExpanded(false);
};
const handleClick = () => {
if (expanded) {
if(contents.left.url && contents.right.url ) {
post('/polls/', {authorId: user._id, contents}).then(res => {
polls.unshift({...res.data});
setPolls([...polls]);
});
}
}
setExpanded(!expanded);
};
return (
<ClickAwayListener onClickAway={handleClickAway}>
<Card className={classes.root}>
<Collapse in={expanded} timeout="auto" unmountOnExit>
<UserStrip user={user} info="" navigate={() => {}} />
<Divider />
<CardMedia className={classes.card}>
<PollSubmissionImage which="left" setContents={setContents} contents={contents}/>
<PollSubmissionImage which="right" setContents={setContents} contents={contents}/>
</CardMedia>
</Collapse>
<Button onClick={handleClick} color="primary" variant="outlined" className={classes.button}>
{
expanded === false
? 'Create a Poll'
: 'Submit'
}
</Button>
</Card>
</ClickAwayListener>
);
};
export default PollSubmission;
|
