diff options
Diffstat (limited to 'src/Components')
-rw-r--r-- | src/Components/Feed/Feed.tsx | 41 | ||||
-rw-r--r-- | src/Components/Header/Header.tsx | 68 | ||||
-rw-r--r-- | src/Components/Header/SearchBar.tsx | 31 | ||||
-rw-r--r-- | src/Components/PollCard/PollCard.tsx | 100 |
4 files changed, 0 insertions, 240 deletions
diff --git a/src/Components/Feed/Feed.tsx b/src/Components/Feed/Feed.tsx deleted file mode 100644 index 604c167..0000000 --- a/src/Components/Feed/Feed.tsx +++ /dev/null @@ -1,41 +0,0 @@ -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<PropTypes> = ({ page }) => { - const [polls, setPolls] = useState<Poll[]>([]); - 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 ( - <div className={classes.root}> - {polls.map(poll => <PollCard poll={poll} key={poll._id} />)} - </div> - ); -}; - -export default Feed; - diff --git a/src/Components/Header/Header.tsx b/src/Components/Header/Header.tsx deleted file mode 100644 index 0ee6b5f..0000000 --- a/src/Components/Header/Header.tsx +++ /dev/null @@ -1,68 +0,0 @@ -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<PropTypes> = ({ setPage }) => { - const classes = useStyles(); - - const handleHome = (): void => { - setPage('feed'); - }; - - const handleProfile = (): void => { - setPage('profile'); - }; - - const handleNotifications = (): void => {}; - - return ( - <AppBar position="fixed"> - <Toolbar className={classes.root}> - <Typography variant="h5" className={classes.logo}> - Which - </Typography> - <SearchBar /> - <div> - <IconButton onClick={handleHome}> - <HomeIcon /> - </IconButton> - <IconButton onClick={handleNotifications}> - <NotificationsIcon /> - </IconButton> - <IconButton onClick={handleProfile}> - <AccountCircle /> - </IconButton> - </div> - </Toolbar> - </AppBar> - ); -}; - -export default Header; - diff --git a/src/Components/Header/SearchBar.tsx b/src/Components/Header/SearchBar.tsx deleted file mode 100644 index 182a1a4..0000000 --- a/src/Components/Header/SearchBar.tsx +++ /dev/null @@ -1,31 +0,0 @@ -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 ( - <div className={classes.root}> - <SearchIcon /> - <InputBase - placeholder="Search..." - /> - </div> - ); -}; - - -export default SearchBar; - diff --git a/src/Components/PollCard/PollCard.tsx b/src/Components/PollCard/PollCard.tsx deleted file mode 100644 index 8995a30..0000000 --- a/src/Components/PollCard/PollCard.tsx +++ /dev/null @@ -1,100 +0,0 @@ -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<PercentageBarPropTypes> = ({ value, which }) => { - const classes = useStyles(); - const positionClassName = which === 'left' ? 'percentageLeft' : 'percentageRight'; - - return ( - <div className={`${classes.percentage} ${classes[positionClassName]}`}> - {value} - % - </div> - ); -}; - - -const PollCard: React.FC<PropTypes> = ({ 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 ( - <Card className={classes.root}> - <CardHeader - avatar={( - <Avatar aria-label="avatar" src={author.avatarUrl} alt={author.name[0].toUpperCase()} /> - )} - title={author.name} - /> - <div className={classes.imagesBlock}> - <CardActionArea> - <CardMedia - className={classes.images} - image={contents.left.url} - /> - <PercentageBar value={leftPercentage} which="left" /> - </CardActionArea> - <CardActionArea> - <CardMedia - className={classes.images} - image={contents.right.url} - /> - <PercentageBar value={rightPercentage} which="right" /> - </CardActionArea> - </div> - </Card> - ); -}; - -export default PollCard; - |