From 7ad127942bb12ee9de691e10dc9386849459ea46 Mon Sep 17 00:00:00 2001 From: ilyayudovin Date: Sun, 28 Jun 2020 19:09:20 +0300 Subject: feat: add poll submission component --- src/components/UploadImage/UploadImage.tsx | 28 +++++++++++++--------------- 1 file changed, 13 insertions(+), 15 deletions(-) (limited to 'src/components') diff --git a/src/components/UploadImage/UploadImage.tsx b/src/components/UploadImage/UploadImage.tsx index 42ee989..464a9cf 100644 --- a/src/components/UploadImage/UploadImage.tsx +++ b/src/components/UploadImage/UploadImage.tsx @@ -1,4 +1,4 @@ -import React, { useRef } from 'react'; +import React, { useRef, useState } from 'react'; import Button from '@material-ui/core/Button'; import TextField from '@material-ui/core/TextField'; import Dialog from '@material-ui/core/Dialog'; @@ -6,35 +6,32 @@ import DialogActions from '@material-ui/core/DialogActions'; import DialogContent from '@material-ui/core/DialogContent'; import DialogContentText from '@material-ui/core/DialogContentText'; import DialogTitle from '@material-ui/core/DialogTitle'; -import { User } from 'which-types'; -import { patch } from '../../requests'; interface PropTypes { displayD: boolean; setDisplayD: (d: boolean) => void; - setUserInfo: (a: User) => void; - setUser: (a: User) => void + callback: (a: string) => void; } const UploadImage: React.FC = ({ - displayD, setDisplayD, setUserInfo, setUser + displayD, setDisplayD, callback }) => { - const urlRef = useRef(null); + const urlRef = useRef(null); + const [url, setUrl] = useState(''); const handleClose = () => { setDisplayD(false); }; - const updateAvatar = () => { - const id = localStorage.getItem('userId'); - const newAvatar = urlRef.current?.value; - patch(`/users/${id}`, { avatarUrl: newAvatar }).then(res => { - setUserInfo(res.data); - setUser(res.data); - }); + const update = () => { + callback(urlRef.current?.value || ''); setDisplayD(false); }; + const handleChange = (event:React.ChangeEvent) => { + setUrl(event.target.value); + }; + return (
@@ -52,13 +49,14 @@ const UploadImage: React.FC = ({ fullWidth autoComplete="off" inputRef={urlRef} + onChange={handleChange} /> - -- cgit v1.2.3 From 447d864ef38c4e3acdbee0031c15c1f24473851e Mon Sep 17 00:00:00 2001 From: ilyayudovin Date: Mon, 29 Jun 2020 04:25:18 +0300 Subject: fix: if url is not valid display icon --- src/components/Header/Header.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/components') diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index 1825647..363e300 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -62,7 +62,7 @@ const Header: React.FC = ({ navigate, userImage }) => { { - userImage !== undefined + userImage?.match(/\.(jpeg|jpg|gif|png)$/) !== null ? : } -- cgit v1.2.3 From 4037868a791c706c4d77d6353e396cb6454995be Mon Sep 17 00:00:00 2001 From: ilyayudovin Date: Mon, 29 Jun 2020 14:22:41 +0300 Subject: fix: show zero percentage instead of NaN --- src/components/PollCard/PollCard.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) (limited to 'src/components') diff --git a/src/components/PollCard/PollCard.tsx b/src/components/PollCard/PollCard.tsx index d3b4fc2..f222a63 100644 --- a/src/components/PollCard/PollCard.tsx +++ b/src/components/PollCard/PollCard.tsx @@ -72,8 +72,13 @@ const PollCard: React.FC = ({ initialPoll, navigate }) => { const handleLeft = () => vote('left'); const handleRight = () => vote('right'); - const leftPercentage = Math.round(100 * (left.votes / (left.votes + right.votes))); - const rightPercentage = 100 - leftPercentage; + let leftPercentage = Math.round(100 * (left.votes / (left.votes + right.votes))); + let rightPercentage = 100 - leftPercentage; + + if(Number.isNaN(leftPercentage) && Number.isNaN(rightPercentage)){ + leftPercentage = 0; + rightPercentage = 0; + } const dominant: Which = left.votes >= right.votes ? 'left' : 'right'; -- cgit v1.2.3 From 856522da17348e54b0d390f10772c21b4029e9bd Mon Sep 17 00:00:00 2001 From: ilyayudovin Date: Mon, 29 Jun 2020 17:31:51 +0300 Subject: fix: make code redably clear --- src/components/Header/Header.tsx | 2 +- src/components/PollCard/PollCard.tsx | 9 ++++++--- src/components/UploadImage/UploadImage.tsx | 24 +++++++++++------------- 3 files changed, 18 insertions(+), 17 deletions(-) (limited to 'src/components') 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 = ({ navigate, userImage }) => { { - userImage?.match(/\.(jpeg|jpg|gif|png)$/) !== null + userImage?.match(/\.(jpeg|jpg|gif|png)$/) ? : } 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 = ({ 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 = ({ - displayD, setDisplayD, callback + display, isOpen, callback }) => { - const urlRef = useRef(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) => { @@ -34,7 +33,7 @@ const UploadImage: React.FC = ({ return (
- + Upload an Image @@ -48,7 +47,6 @@ const UploadImage: React.FC = ({ type="text" fullWidth autoComplete="off" - inputRef={urlRef} onChange={handleChange} /> @@ -56,7 +54,7 @@ const UploadImage: React.FC = ({ - -- cgit v1.2.3 From 8d0e34c5a94ec351ae22429fcc962112a85d7c19 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Mon, 29 Jun 2020 20:51:21 +0300 Subject: refactor!: improve code quality :recycle: --- src/components/UploadImage/UploadImage.tsx | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) (limited to 'src/components') diff --git a/src/components/UploadImage/UploadImage.tsx b/src/components/UploadImage/UploadImage.tsx index 3a58e29..e6f6d05 100644 --- a/src/components/UploadImage/UploadImage.tsx +++ b/src/components/UploadImage/UploadImage.tsx @@ -8,23 +8,21 @@ import DialogContentText from '@material-ui/core/DialogContentText'; import DialogTitle from '@material-ui/core/DialogTitle'; interface PropTypes { - display: boolean; - isOpen: (display: boolean) => void; + isOpen: boolean; + setIsOpen: (value: boolean) => void; callback: (url: string) => void; } -const UploadImage: React.FC = ({ - display, isOpen, callback -}) => { +const UploadImage: React.FC = ({ setIsOpen, isOpen, callback }) => { const [url, setUrl] = useState(''); const handleClose = () => { - isOpen(false); + setIsOpen(false); }; const handleSubmit = () => { callback(url || ''); - isOpen(false); + setIsOpen(false); }; const handleChange = (event:React.ChangeEvent) => { @@ -33,8 +31,8 @@ const UploadImage: React.FC = ({ return (
- - Upload an Image + + Upload an Image Unfortunetly we do not support uploading images yet. Please provide a valid URL to your image. -- cgit v1.2.3