diff --git a/src/components/PollCard/PollCard.tsx b/src/components/PollCard/PollCard.tsx index 5427fd6..7a84df2 100644 --- a/src/components/PollCard/PollCard.tsx +++ b/src/components/PollCard/PollCard.tsx @@ -1,19 +1,20 @@ import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; -import { Card, CardActionArea, Typography } from '@material-ui/core/'; +import { Card, CardActionArea, Typography, IconButton } from '@material-ui/core/'; import { Which, Poll } from 'which-types'; import { useSnackbar } from 'notistack'; +import DeleteIcon from '@material-ui/icons/Delete'; import PercentageBar from './PercentageBar'; import UserStrip from '../UserStrip/UserStrip'; import DateString from '../DateString/DateString'; import BackgroundImage from '../Image/BackgroundImage'; -import { post } from '../../requests'; +import requests from '../../requests'; import { useAuth } from '../../hooks/useAuth'; interface PropTypes { poll: Poll; - setPoll: (poll: Poll) => void; + setPoll: (poll: Poll | null) => void; } const useStyles = makeStyles(theme => ({ @@ -48,10 +49,10 @@ const PollCard: React.FC = React.memo(({ poll, setPoll }) => { const classes = useStyles(); const { author, contents: { left, right }, vote } = poll; const { enqueueSnackbar } = useSnackbar(); - const { isAuthenticated } = useAuth(); + const { user } = useAuth(); const handleVote = (which: Which) => () => { - if (!isAuthenticated) { + if (!user) { enqueueSnackbar('Unauthorized users can not vote in polls', { variant: 'error' }); @@ -71,10 +72,15 @@ const PollCard: React.FC = React.memo(({ poll, setPoll }) => { }; setPoll(newPoll); - post('votes/', newVote); + requests.post('votes/', newVote); } }; + const handleDelete = async () => { + await requests.delete(`polls/${poll._id}`); + setPoll(null); + }; + let leftPercentage; let rightPercentage; @@ -90,7 +96,13 @@ const PollCard: React.FC = React.memo(({ poll, setPoll }) => { return ( - } /> + } + action={author._id === user?._id ? ( + + ) : undefined} + /> {poll.description && ( {poll.description} diff --git a/src/components/PollsList/RenderItem.tsx b/src/components/PollsList/RenderItem.tsx index 28411ec..a433503 100644 --- a/src/components/PollsList/RenderItem.tsx +++ b/src/components/PollsList/RenderItem.tsx @@ -35,9 +35,10 @@ const RenderItem: React.FC = React.memo(({ }) => { const classes = useStyles(); const poll = polls[index]; - const setPoll = useCallback((newPoll: Poll) => { - const newPolls = [...polls]; - newPolls[index] = newPoll; + const setPoll = useCallback((newPoll: Poll | null) => { + let newPolls = polls; + if (newPoll) newPolls[index] = newPoll; + else newPolls = newPolls.filter((poll, pollIndex) => pollIndex !== index); // Force-update list-size so everything re-renders mutate([], false); diff --git a/src/components/UserStrip/UserStrip.tsx b/src/components/UserStrip/UserStrip.tsx index bdb36bd..795386a 100644 --- a/src/components/UserStrip/UserStrip.tsx +++ b/src/components/UserStrip/UserStrip.tsx @@ -1,45 +1,46 @@ -import React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; -import VerifiedIcon from '@material-ui/icons/CheckCircleOutline'; -import { CardHeader } from '@material-ui/core/'; -import { User } from 'which-types'; - -import Avatar from '../Avatar/Avatar'; - - -interface PropTypes { - user: User; - info?: string | JSX.Element -} - - -const useStyles = makeStyles(theme => ({ - root: { - display: 'flex', - alignItems: 'center' - }, - verified: { - marginLeft: theme.spacing(0.5), - width: theme.spacing(2), - height: theme.spacing(2) - } -})); - - -const UserStrip: React.FC = ({ user, info }) => { - const classes = useStyles(); - const { username, verified } = user; - - const avatar = ; - - const title = ( -
- {username} - {verified && } -
- ); - - return ; -}; - -export default UserStrip; +import React from 'react'; +import { makeStyles } from '@material-ui/core/styles'; +import VerifiedIcon from '@material-ui/icons/CheckCircleOutline'; +import { CardHeader } from '@material-ui/core/'; +import { User } from 'which-types'; + +import Avatar from '../Avatar/Avatar'; + + +interface PropTypes { + user: User; + info?: string | JSX.Element; + action?: JSX.Element; +} + + +const useStyles = makeStyles(theme => ({ + root: { + display: 'flex', + alignItems: 'center' + }, + verified: { + marginLeft: theme.spacing(0.5), + width: theme.spacing(2), + height: theme.spacing(2) + } +})); + + +const UserStrip: React.FC = ({ user, info, action }) => { + const classes = useStyles(); + const { username, verified } = user; + + const avatar = ; + + const title = ( +
+ {username} + {verified && } +
+ ); + + return ; +}; + +export default UserStrip;