From 14b70c34a1b88c83e89f483399debd60560ed70b Mon Sep 17 00:00:00 2001 From: eug-vs Date: Sun, 14 Jun 2020 20:59:43 +0300 Subject: refactor: move PercentageBar to separate class --- src/components/PollCard/PercentageBar.tsx | 38 +++++++++++++++++++++++++++++++ src/components/PollCard/PollCard.tsx | 33 ++------------------------- 2 files changed, 40 insertions(+), 31 deletions(-) create mode 100644 src/components/PollCard/PercentageBar.tsx diff --git a/src/components/PollCard/PercentageBar.tsx b/src/components/PollCard/PercentageBar.tsx new file mode 100644 index 0000000..bf88815 --- /dev/null +++ b/src/components/PollCard/PercentageBar.tsx @@ -0,0 +1,38 @@ +import React from 'react'; +import { makeStyles } from '@material-ui/core/styles'; + +interface PropTypes { + value: number; + which: 'left' | 'right'; +} + +const useStyles = makeStyles(theme => ({ + root: { + position: 'absolute', + color: 'white', + top: '86%', + fontSize: 20, + textShadow: '0 0 3px black' + }, + left: { + left: 30 + }, + right: { + right: 30 + } +})); + +const PercentageBar: React.FC = ({ value, which }) => { + const classes = useStyles(); + + return ( +
+ {value} + % +
+ ); +}; + + +export default PercentageBar; + diff --git a/src/components/PollCard/PollCard.tsx b/src/components/PollCard/PollCard.tsx index 8995a30..d5c99cc 100644 --- a/src/components/PollCard/PollCard.tsx +++ b/src/components/PollCard/PollCard.tsx @@ -8,16 +8,12 @@ import { CardHeader } from '@material-ui/core/'; import { Poll } from '../../types'; +import PercentageBar from './PercentageBar'; interface PropTypes { poll: Poll; } -interface PercentageBarPropTypes { - value: number; - which: 'left' | 'right'; -} - const useStyles = makeStyles(theme => ({ root: { maxWidth: theme.spacing(75), @@ -31,35 +27,9 @@ const useStyles = makeStyles(theme => ({ imagesBlock: { display: 'flex' }, - percentage: { - position: 'absolute', - color: 'white', - top: '86%', - fontSize: 20, - textShadow: '0 0 3px black' - }, - percentageLeft: { - left: 30 - }, - percentageRight: { - right: 30 - } })); -const PercentageBar: React.FC = ({ value, which }) => { - const classes = useStyles(); - const positionClassName = which === 'left' ? 'percentageLeft' : 'percentageRight'; - - return ( -
- {value} - % -
- ); -}; - - const PollCard: React.FC = ({ poll }) => { const classes = useStyles(); const { author, contents } = poll; @@ -96,5 +66,6 @@ const PollCard: React.FC = ({ poll }) => { ); }; + export default PollCard; -- cgit v1.2.3 From c311c538a3442aed8d77449736f28be66feea57c Mon Sep 17 00:00:00 2001 From: eug-vs Date: Sun, 14 Jun 2020 22:42:52 +0300 Subject: feat: configure navigation --- src/components/Feed/Feed.tsx | 5 +++-- src/components/Header/Header.tsx | 8 ++++---- src/components/PollCard/PollCard.tsx | 20 ++++++++++++++++---- src/index.tsx | 31 +++++++++++++++++++------------ src/pages/AuthPage/AuthPage.tsx | 5 +++-- src/pages/AuthPage/SignInForm.tsx | 4 +++- src/pages/FeedPage/FeedPage.tsx | 8 ++++++-- src/pages/ProfilePage/ProfilePage.tsx | 9 +++++---- src/types.d.ts | 11 +++++++---- 9 files changed, 66 insertions(+), 35 deletions(-) diff --git a/src/components/Feed/Feed.tsx b/src/components/Feed/Feed.tsx index 8dc3ec1..3b8e16f 100644 --- a/src/components/Feed/Feed.tsx +++ b/src/components/Feed/Feed.tsx @@ -5,6 +5,7 @@ import PollCard from '../PollCard/PollCard'; interface PropTypes { polls: Poll[]; + navigate: (prefix: string, id: string) => void; } const useStyles = makeStyles(theme => ({ @@ -15,12 +16,12 @@ const useStyles = makeStyles(theme => ({ } })); -const Feed: React.FC = ({ polls }) => { +const Feed: React.FC = ({ polls, navigate }) => { const classes = useStyles(); return (
- {polls.map(poll => )} + {polls.map(poll => )}
); }; diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index 0ee6b5f..4e25fa3 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -13,7 +13,7 @@ import HomeIcon from '@material-ui/icons/Home'; import SearchBar from './SearchBar'; interface PropTypes { - setPage: (newPage: string) => void; + navigate: (prefix: string) => void; } const useStyles = makeStyles({ @@ -28,15 +28,15 @@ const useStyles = makeStyles({ } }); -const Header: React.FC = ({ setPage }) => { +const Header: React.FC = ({ navigate }) => { const classes = useStyles(); const handleHome = (): void => { - setPage('feed'); + navigate('feed'); }; const handleProfile = (): void => { - setPage('profile'); + navigate('profile'); }; const handleNotifications = (): void => {}; diff --git a/src/components/PollCard/PollCard.tsx b/src/components/PollCard/PollCard.tsx index d5c99cc..7f587f3 100644 --- a/src/components/PollCard/PollCard.tsx +++ b/src/components/PollCard/PollCard.tsx @@ -5,13 +5,15 @@ import { CardActionArea, CardMedia, Avatar, - CardHeader + CardHeader, +Link } from '@material-ui/core/'; import { Poll } from '../../types'; import PercentageBar from './PercentageBar'; interface PropTypes { poll: Poll; + navigate: (prefix: string, id: string) => void; } const useStyles = makeStyles(theme => ({ @@ -30,19 +32,29 @@ const useStyles = makeStyles(theme => ({ })); -const PollCard: React.FC = ({ poll }) => { +const PollCard: React.FC = ({ poll, navigate }) => { const classes = useStyles(); const { author, contents } = poll; + const handleNavigate = () => { + navigate('profile', poll.author._id); + }; + const leftPercentage = Math.round(100 * (contents.left.votes / (contents.left.votes + contents.right.votes))); const rightPercentage = 100 - leftPercentage; - return ( + + + )} title={author.name} /> diff --git a/src/index.tsx b/src/index.tsx index 55bf773..d7326cb 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -13,9 +13,10 @@ import Header from './components/Header/Header'; import ProfilePage from './pages/ProfilePage/ProfilePage'; import FeedPage from './pages/FeedPage/FeedPage'; import AuthPage from './pages/AuthPage/AuthPage'; -import { User } from './types'; +import { User, Page } from './types'; import { get } from './requests'; + const theme = createMuiTheme({ palette: { primary: { @@ -33,13 +34,25 @@ const useStyles = makeStyles({ }); const App: React.FC = () => { - const [page, setPage] = useState('feed'); const [user, setUser] = React.useState(); + const [page, setPage] = useState({ prefix: 'feed', id: '' }); const classes = useStyles(); + const navigate = (prefix: string, id?: string): void => { + if (prefix === 'profile' && !id && !user) setPage({ + prefix: 'auth', + id: '' + }); + else setPage({ + prefix, + id: (id || user?._id || '') + }); + }; + const logOut = () => { localStorage.removeItem('userId'); setUser(undefined); + navigate('auth'); }; useEffect(() => { @@ -54,17 +67,11 @@ const App: React.FC = () => { return ( -
+
- { - page === 'profile' - ? ( - user - ? - : - ) - : - } + { page.prefix === 'profile' && } + { page.prefix === 'feed' && } + { page.prefix === 'auth' && }
); diff --git a/src/pages/AuthPage/AuthPage.tsx b/src/pages/AuthPage/AuthPage.tsx index d9c43d3..82d468d 100644 --- a/src/pages/AuthPage/AuthPage.tsx +++ b/src/pages/AuthPage/AuthPage.tsx @@ -4,10 +4,11 @@ import SignInForm from './SignInForm'; interface PropTypes { setUser: (newUser: User | undefined) => void; + navigate: (prefix: string, id: string) => void; } -const AuthPage: React.FC = ({ setUser }) => { - return ; +const AuthPage: React.FC = ({ setUser, navigate }) => { + return ; }; export default AuthPage; diff --git a/src/pages/AuthPage/SignInForm.tsx b/src/pages/AuthPage/SignInForm.tsx index 6e27535..b7696e7 100644 --- a/src/pages/AuthPage/SignInForm.tsx +++ b/src/pages/AuthPage/SignInForm.tsx @@ -7,6 +7,7 @@ import { get } from '../../requests'; interface PropTypes { setUser: (newUser: User) => void; + navigate: (prefix: string, id: string) => void; } const useStyles = makeStyles(theme => ({ @@ -22,7 +23,7 @@ const useStyles = makeStyles(theme => ({ } })); -const SignInForm: React.FC = ({ setUser }) => { +const SignInForm: React.FC = ({ setUser, navigate }) => { const classes = useStyles(); const inputRef = useRef(); @@ -33,6 +34,7 @@ const SignInForm: React.FC = ({ setUser }) => { const user = response.data[0]; setUser(user); localStorage.setItem('userId', user._id); + navigate('profile', user._id); }); } }; diff --git a/src/pages/FeedPage/FeedPage.tsx b/src/pages/FeedPage/FeedPage.tsx index 03bacfd..fd75190 100644 --- a/src/pages/FeedPage/FeedPage.tsx +++ b/src/pages/FeedPage/FeedPage.tsx @@ -3,7 +3,11 @@ import { Poll } from '../../types'; import Feed from '../../components/Feed/Feed'; import { get } from '../../requests'; -const FeedPage: React.FC = () => { +interface PropTypes { + navigate: (prefix: string, id: string) => void; +} + +const FeedPage: React.FC = ({ navigate }) => { const [polls, setPolls] = useState([]); useEffect(() => { @@ -12,7 +16,7 @@ const FeedPage: React.FC = () => { }); }, []); - return ; + return ; }; export default FeedPage; diff --git a/src/pages/ProfilePage/ProfilePage.tsx b/src/pages/ProfilePage/ProfilePage.tsx index 984fb1e..46637cb 100644 --- a/src/pages/ProfilePage/ProfilePage.tsx +++ b/src/pages/ProfilePage/ProfilePage.tsx @@ -6,10 +6,11 @@ import { get } from '../../requests'; interface PropTypes { logOut: () => void; + navigate: (prefix: string, id: string) => void; id: string; } -const ProfilePage: React.FC = ({ logOut, id }) => { +const ProfilePage: React.FC = ({ logOut, id, navigate }) => { const [userInfo, setUserInfo] = useState(); const [polls, setPolls] = useState([]); @@ -17,19 +18,19 @@ const ProfilePage: React.FC = ({ logOut, id }) => { get(`/users/${id}`).then(response => { setUserInfo(response.data); }); - },[]); + }, [id]); useEffect(() => { get(`/profiles/${id}`).then(response => { setPolls(response.data); }); - },[]); + }, [id]); return ( <> - + ); }; diff --git a/src/types.d.ts b/src/types.d.ts index 31c2c74..e84f96c 100644 --- a/src/types.d.ts +++ b/src/types.d.ts @@ -1,8 +1,14 @@ +export interface Page { + prefix: string; + id: string; +} + export interface User { name: string; avatarUrl: string; _id: string; } + interface ImageData { url: string; votes: number; @@ -10,10 +16,7 @@ interface ImageData { export interface Poll { _id: string; - author: { - name: string; - avatarUrl: string; - }; + author: User; contents: { left: ImageData; right: ImageData; -- cgit v1.2.3 From 2a65284a385915818ca5f3e3b7354554e19af9cb Mon Sep 17 00:00:00 2001 From: eug-vs Date: Mon, 15 Jun 2020 15:52:40 +0300 Subject: style: fix eslint errors --- src/components/PollCard/PercentageBar.tsx | 4 ++-- src/components/PollCard/PollCard.tsx | 19 ++++++++----------- src/index.tsx | 21 ++++++++++++--------- src/pages/ProfilePage/ProfilePage.tsx | 2 +- 4 files changed, 23 insertions(+), 23 deletions(-) diff --git a/src/components/PollCard/PercentageBar.tsx b/src/components/PollCard/PercentageBar.tsx index bf88815..6a50a9e 100644 --- a/src/components/PollCard/PercentageBar.tsx +++ b/src/components/PollCard/PercentageBar.tsx @@ -6,7 +6,7 @@ interface PropTypes { which: 'left' | 'right'; } -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles({ root: { position: 'absolute', color: 'white', @@ -20,7 +20,7 @@ const useStyles = makeStyles(theme => ({ right: { right: 30 } -})); +}); const PercentageBar: React.FC = ({ value, which }) => { const classes = useStyles(); diff --git a/src/components/PollCard/PollCard.tsx b/src/components/PollCard/PollCard.tsx index 7f587f3..23dc342 100644 --- a/src/components/PollCard/PollCard.tsx +++ b/src/components/PollCard/PollCard.tsx @@ -5,8 +5,7 @@ import { CardActionArea, CardMedia, Avatar, - CardHeader, -Link + CardHeader } from '@material-ui/core/'; import { Poll } from '../../types'; import PercentageBar from './PercentageBar'; @@ -28,7 +27,7 @@ const useStyles = makeStyles(theme => ({ }, imagesBlock: { display: 'flex' - }, + } })); @@ -47,14 +46,12 @@ const PollCard: React.FC = ({ poll, navigate }) => { - - + )} title={author.name} /> diff --git a/src/index.tsx b/src/index.tsx index d7326cb..876491d 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -39,14 +39,17 @@ const App: React.FC = () => { const classes = useStyles(); const navigate = (prefix: string, id?: string): void => { - if (prefix === 'profile' && !id && !user) setPage({ - prefix: 'auth', - id: '' - }); - else setPage({ - prefix, - id: (id || user?._id || '') - }); + if (prefix === 'profile' && !id && !user) { + setPage({ + prefix: 'auth', + id: '' + }); + } else { + setPage({ + prefix, + id: (id || user?._id || '') + }); + } }; const logOut = () => { @@ -71,7 +74,7 @@ const App: React.FC = () => {
{ page.prefix === 'profile' && } { page.prefix === 'feed' && } - { page.prefix === 'auth' && } + { page.prefix === 'auth' && }
); diff --git a/src/pages/ProfilePage/ProfilePage.tsx b/src/pages/ProfilePage/ProfilePage.tsx index 46637cb..0f5fb2b 100644 --- a/src/pages/ProfilePage/ProfilePage.tsx +++ b/src/pages/ProfilePage/ProfilePage.tsx @@ -1,4 +1,4 @@ -import React, { useState,useEffect } from 'react'; +import React, { useState, useEffect } from 'react'; import { User, Poll } from '../../types'; import ProfileInfo from './ProfileInfo'; import Feed from '../../components/Feed/Feed'; -- cgit v1.2.3