From c7f2999ee797ea5e3bfb29517a4f13206162cc6f Mon Sep 17 00:00:00 2001 From: eug-vs Date: Sun, 14 Jun 2020 19:52:35 +0300 Subject: refactor: use lowercase in folder names --- src/components/Feed/Feed.tsx | 41 ++++++++++++++ src/components/Header/Header.tsx | 68 ++++++++++++++++++++++++ src/components/Header/SearchBar.tsx | 31 +++++++++++ src/components/PollCard/PollCard.tsx | 100 +++++++++++++++++++++++++++++++++++ 4 files changed, 240 insertions(+) create mode 100644 src/components/Feed/Feed.tsx create mode 100644 src/components/Header/Header.tsx create mode 100644 src/components/Header/SearchBar.tsx create mode 100644 src/components/PollCard/PollCard.tsx (limited to 'src/components') diff --git a/src/components/Feed/Feed.tsx b/src/components/Feed/Feed.tsx new file mode 100644 index 0000000..604c167 --- /dev/null +++ b/src/components/Feed/Feed.tsx @@ -0,0 +1,41 @@ +import React, { useState, useEffect } from 'react'; +import { makeStyles } from '@material-ui/core/styles'; +import { Poll } from '../../types'; +import PollCard from '../PollCard/PollCard'; +import { get } from '../../requests'; + +interface PropTypes { + page: string; +} + +const useStyles = makeStyles(theme => ({ + root: { + position: 'relative', + maxWidth: theme.spacing(75), + margin: '0 auto' + } +})); + +const Feed: React.FC = ({ page }) => { + const [polls, setPolls] = useState([]); + const classes = useStyles(); + + let endpoint = '/polls'; + // TODO: Make this work + if (page === 'feed') endpoint = '/polls'; + + useEffect(() => { + get(endpoint).then(response => { + setPolls(response.data); + }); + }, [endpoint]); + + return ( +
+ {polls.map(poll => )} +
+ ); +}; + +export default Feed; + diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx new file mode 100644 index 0000000..0ee6b5f --- /dev/null +++ b/src/components/Header/Header.tsx @@ -0,0 +1,68 @@ +import React from 'react'; +import { + AppBar, + Toolbar, + IconButton, + Typography +} from '@material-ui/core'; +import { makeStyles } from '@material-ui/core/styles'; +import AccountCircle from '@material-ui/icons/AccountCircle'; +import NotificationsIcon from '@material-ui/icons/Notifications'; +import HomeIcon from '@material-ui/icons/Home'; + +import SearchBar from './SearchBar'; + +interface PropTypes { + setPage: (newPage: string) => void; +} + +const useStyles = makeStyles({ + root: { + display: 'flex', + justifyContent: 'space-around', + width: '60%', + margin: 'auto' + }, + logo: { + fontWeight: 'bold' + } +}); + +const Header: React.FC = ({ setPage }) => { + const classes = useStyles(); + + const handleHome = (): void => { + setPage('feed'); + }; + + const handleProfile = (): void => { + setPage('profile'); + }; + + const handleNotifications = (): void => {}; + + return ( + + + + Which + + +
+ + + + + + + + + +
+ + + ); +}; + +export default Header; + diff --git a/src/components/Header/SearchBar.tsx b/src/components/Header/SearchBar.tsx new file mode 100644 index 0000000..182a1a4 --- /dev/null +++ b/src/components/Header/SearchBar.tsx @@ -0,0 +1,31 @@ +import React from 'react'; +import SearchIcon from '@material-ui/icons/Search'; +import { InputBase } from '@material-ui/core'; +import { makeStyles } from '@material-ui/core/styles'; + +const useStyles = makeStyles(theme => ({ + root: { + background: 'rgba(255, 255, 255, 0.5)', + borderRadius: '2px', + padding: theme.spacing(0.5), + display: 'flex', + alignItems: 'center' + } +})); + +const SearchBar: React.FC = () => { + const classes = useStyles(); + + return ( +
+ + +
+ ); +}; + + +export default SearchBar; + diff --git a/src/components/PollCard/PollCard.tsx b/src/components/PollCard/PollCard.tsx new file mode 100644 index 0000000..8995a30 --- /dev/null +++ b/src/components/PollCard/PollCard.tsx @@ -0,0 +1,100 @@ +import React from 'react'; +import { makeStyles } from '@material-ui/core/styles'; +import { + Card, + CardActionArea, + CardMedia, + Avatar, + CardHeader +} from '@material-ui/core/'; +import { Poll } from '../../types'; + +interface PropTypes { + poll: Poll; +} + +interface PercentageBarPropTypes { + value: number; + which: 'left' | 'right'; +} + +const useStyles = makeStyles(theme => ({ + root: { + maxWidth: theme.spacing(75), + height: theme.spacing(63), + margin: '20px auto' + }, + images: { + height: theme.spacing(50), + width: theme.spacing(38) + }, + 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; + + const leftPercentage = Math.round(100 * (contents.left.votes / (contents.left.votes + contents.right.votes))); + const rightPercentage = 100 - leftPercentage; + + + return ( + + + )} + title={author.name} + /> +
+ + + + + + + + +
+ + ); +}; + +export default PollCard; + -- cgit v1.2.3 From 61a424debfbfa98570e070fbf25d03aa9c56d679 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Sun, 14 Jun 2020 20:39:16 +0300 Subject: refactor: structurize pages --- src/components/Feed/Feed.tsx | 18 +++--------------- 1 file changed, 3 insertions(+), 15 deletions(-) (limited to 'src/components') diff --git a/src/components/Feed/Feed.tsx b/src/components/Feed/Feed.tsx index 604c167..8dc3ec1 100644 --- a/src/components/Feed/Feed.tsx +++ b/src/components/Feed/Feed.tsx @@ -1,11 +1,10 @@ -import React, { useState, useEffect } from 'react'; +import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; import { Poll } from '../../types'; import PollCard from '../PollCard/PollCard'; -import { get } from '../../requests'; interface PropTypes { - page: string; + polls: Poll[]; } const useStyles = makeStyles(theme => ({ @@ -16,20 +15,9 @@ const useStyles = makeStyles(theme => ({ } })); -const Feed: React.FC = ({ page }) => { - const [polls, setPolls] = useState([]); +const Feed: React.FC = ({ polls }) => { const classes = useStyles(); - let endpoint = '/polls'; - // TODO: Make this work - if (page === 'feed') endpoint = '/polls'; - - useEffect(() => { - get(endpoint).then(response => { - setPolls(response.data); - }); - }, [endpoint]); - return (
{polls.map(poll => )} -- cgit v1.2.3