aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/components/Header/Header.tsx2
-rw-r--r--src/components/PollCard/PollCard.tsx9
-rw-r--r--src/components/UploadImage/UploadImage.tsx24
-rw-r--r--src/pages/FeedPage/FeedPage.tsx2
-rw-r--r--src/pages/FeedPage/PollSubmission.tsx14
-rw-r--r--src/pages/FeedPage/PollSubmissionImage.tsx34
-rw-r--r--src/pages/ProfilePage/ProfileInfo.tsx2
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} />