diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/components/Header/Header.tsx | 2 | ||||
-rw-r--r-- | src/components/PollCard/PollCard.tsx | 9 | ||||
-rw-r--r-- | src/components/UploadImage/UploadImage.tsx | 24 | ||||
-rw-r--r-- | src/pages/FeedPage/FeedPage.tsx | 2 | ||||
-rw-r--r-- | src/pages/FeedPage/PollSubmission.tsx | 14 | ||||
-rw-r--r-- | src/pages/FeedPage/PollSubmissionImage.tsx | 34 | ||||
-rw-r--r-- | src/pages/ProfilePage/ProfileInfo.tsx | 2 |
7 files changed, 46 insertions, 41 deletions
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index 363e300..d0d9081 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -62,7 +62,7 @@ const Header: React.FC<PropTypes> = ({ navigate, userImage }) => { </IconButton> <IconButton onClick={handleProfile}> { - userImage?.match(/\.(jpeg|jpg|gif|png)$/) !== null + userImage?.match(/\.(jpeg|jpg|gif|png)$/) ? <Avatar className={classes.avatar} src={userImage} /> : <AccountCircle /> } diff --git a/src/components/PollCard/PollCard.tsx b/src/components/PollCard/PollCard.tsx index f222a63..f82ea44 100644 --- a/src/components/PollCard/PollCard.tsx +++ b/src/components/PollCard/PollCard.tsx @@ -72,10 +72,13 @@ const PollCard: React.FC<PropTypes> = ({ initialPoll, navigate }) => { const handleLeft = () => vote('left'); const handleRight = () => vote('right'); - let leftPercentage = Math.round(100 * (left.votes / (left.votes + right.votes))); - let rightPercentage = 100 - leftPercentage; + let leftPercentage; + let rightPercentage; - if(Number.isNaN(leftPercentage) && Number.isNaN(rightPercentage)){ + if (left.votes || right.votes) { + leftPercentage = Math.round(100 * (left.votes / (left.votes + right.votes))); + rightPercentage = 100 - leftPercentage; + } else { leftPercentage = 0; rightPercentage = 0; } diff --git a/src/components/UploadImage/UploadImage.tsx b/src/components/UploadImage/UploadImage.tsx index 464a9cf..3a58e29 100644 --- a/src/components/UploadImage/UploadImage.tsx +++ b/src/components/UploadImage/UploadImage.tsx @@ -1,4 +1,4 @@ -import React, { useRef, useState } from 'react'; +import React, { useState } from 'react'; import Button from '@material-ui/core/Button'; import TextField from '@material-ui/core/TextField'; import Dialog from '@material-ui/core/Dialog'; @@ -8,24 +8,23 @@ import DialogContentText from '@material-ui/core/DialogContentText'; import DialogTitle from '@material-ui/core/DialogTitle'; interface PropTypes { - displayD: boolean; - setDisplayD: (d: boolean) => void; - callback: (a: string) => void; + display: boolean; + isOpen: (display: boolean) => void; + callback: (url: string) => void; } const UploadImage: React.FC<PropTypes> = ({ - displayD, setDisplayD, callback + display, isOpen, callback }) => { - const urlRef = useRef<HTMLInputElement | null>(null); const [url, setUrl] = useState(''); const handleClose = () => { - setDisplayD(false); + isOpen(false); }; - const update = () => { - callback(urlRef.current?.value || ''); - setDisplayD(false); + const handleSubmit = () => { + callback(url || ''); + isOpen(false); }; const handleChange = (event:React.ChangeEvent<HTMLInputElement>) => { @@ -34,7 +33,7 @@ const UploadImage: React.FC<PropTypes> = ({ return ( <div> - <Dialog open={displayD} onClose={handleClose}> + <Dialog open={display} onClose={handleClose}> <DialogTitle id="form-dialog-title">Upload an Image</DialogTitle> <DialogContent> <DialogContentText> @@ -48,7 +47,6 @@ const UploadImage: React.FC<PropTypes> = ({ type="text" fullWidth autoComplete="off" - inputRef={urlRef} onChange={handleChange} /> </DialogContent> @@ -56,7 +54,7 @@ const UploadImage: React.FC<PropTypes> = ({ <Button onClick={handleClose} color="primary"> Cancel </Button> - <Button onClick={update} color="primary" disabled={!url.length}> + <Button onClick={handleSubmit} color="primary" disabled={!url.length}> Submit </Button> </DialogActions> diff --git a/src/pages/FeedPage/FeedPage.tsx b/src/pages/FeedPage/FeedPage.tsx index a7bbbbd..329647e 100644 --- a/src/pages/FeedPage/FeedPage.tsx +++ b/src/pages/FeedPage/FeedPage.tsx @@ -22,7 +22,7 @@ const FeedPage: React.FC<PropTypes> = ({ navigate, user }) => { return ( <> - {user && <PollSubmission user={user} polls={polls} setPolls={setPolls}/>} + {user && <PollSubmission user={user} polls={polls} setPolls={setPolls} />} <Feed polls={polls} navigate={navigate} /> </> ); diff --git a/src/pages/FeedPage/PollSubmission.tsx b/src/pages/FeedPage/PollSubmission.tsx index 65e33b6..3a73d45 100644 --- a/src/pages/FeedPage/PollSubmission.tsx +++ b/src/pages/FeedPage/PollSubmission.tsx @@ -38,7 +38,7 @@ const useStyles = makeStyles(theme => ({ } })); -const PollSubmission: React.FC<PropTypes> = ({ user , polls, setPolls}) => { +const PollSubmission: React.FC<PropTypes> = ({ user, polls, setPolls }) => { const classes = useStyles(); const [expanded, setExpanded] = useState(false); const [contents, setContents] = useState<Contents>({ @@ -56,9 +56,9 @@ const PollSubmission: React.FC<PropTypes> = ({ user , polls, setPolls}) => { const handleClick = () => { if (expanded) { - if(contents.left.url && contents.right.url ) { - post('/polls/', {authorId: user._id, contents}).then(res => { - polls.unshift({...res.data}); + if (contents.left.url && contents.right.url) { + post('/polls/', { authorId: user._id, contents }).then(res => { + polls.unshift({ ...res.data }); setPolls([...polls]); }); } @@ -73,13 +73,13 @@ const PollSubmission: React.FC<PropTypes> = ({ user , polls, setPolls}) => { <UserStrip user={user} info="" navigate={() => {}} /> <Divider /> <CardMedia className={classes.card}> - <PollSubmissionImage which="left" setContents={setContents} contents={contents}/> - <PollSubmissionImage which="right" setContents={setContents} contents={contents}/> + <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 + !expanded ? 'Create a Poll' : 'Submit' } diff --git a/src/pages/FeedPage/PollSubmissionImage.tsx b/src/pages/FeedPage/PollSubmissionImage.tsx index 42389f6..e29ecd0 100644 --- a/src/pages/FeedPage/PollSubmissionImage.tsx +++ b/src/pages/FeedPage/PollSubmissionImage.tsx @@ -2,13 +2,13 @@ import React, { useState } from 'react'; import { makeStyles } from '@material-ui/core/styles'; import CloudUploadIcon from '@material-ui/icons/CloudUpload'; import { CardActionArea, CardMedia } from '@material-ui/core'; +import ClearIcon from '@material-ui/icons/Clear'; import UploadImage from '../../components/UploadImage/UploadImage'; import { Contents } from './types'; -import ClearIcon from '@material-ui/icons/Clear'; interface PropTypes { contents: Contents; - setContents: (a: Contents) => void; + setContents: (newContents: Contents) => void; which: 'left' | 'right'; } @@ -34,17 +34,16 @@ const PollSubmissionImage: React.FC<PropTypes> = ({ setContents, which, contents const [image, setImage] = useState(''); const [clearIconDisplay, setClearIconDisplay] = useState(false); + const patchUrl = (url: string) => { + setImage(url); + contents[which] = { url } ; + setContents({ ...contents }); + }; + const handleClick = () => { image === '' ? setDisplay(!display) : patchUrl(''); - - }; - - const patchUrl = (url: string) => { - setImage(url); - contents[which] = {url}; - setContents({...contents}); }; const handleMouseEnter = () => { @@ -57,18 +56,23 @@ const PollSubmissionImage: React.FC<PropTypes> = ({ setContents, which, contents return ( <> - <CardActionArea onClick={handleClick} > - <CardMedia className={classes.images} image={image} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}> + <CardActionArea onClick={handleClick}> + <CardMedia + className={classes.images} + image={image} + onMouseEnter={handleMouseEnter} + onMouseLeave={handleMouseLeave} + > { image === '' - ? <CloudUploadIcon fontSize='large' color='primary' /> + ? <CloudUploadIcon fontSize="large" color="primary" /> : clearIconDisplay - ? <ClearIcon className={classes.clearIcon} color='primary'/> - : null + ? <ClearIcon className={classes.clearIcon} color="primary" /> + : null } </CardMedia> </CardActionArea> - <UploadImage displayD={display} setDisplayD={setDisplay} callback={patchUrl} /> + <UploadImage display={display} isOpen={setDisplay} callback={patchUrl} /> </> ); }; diff --git a/src/pages/ProfilePage/ProfileInfo.tsx b/src/pages/ProfilePage/ProfileInfo.tsx index 659d104..ec6c387 100644 --- a/src/pages/ProfilePage/ProfileInfo.tsx +++ b/src/pages/ProfilePage/ProfileInfo.tsx @@ -121,7 +121,7 @@ const ProfileInfo: React.FC<PropTypes> = ({ <Avatar className={classes.avatar} src={user?.avatarUrl} /> </Badge> </div> - <UploadImage displayD={input} setDisplayD={setInput} callback={patchAvatar} /> + <UploadImage display={input} isOpen={setInput} callback={patchAvatar} /> </div> ) : <Avatar className={classes.avatar} src={user?.avatarUrl} /> |