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} /> | 
