From 3c3223c3b41411639ff19ebd58df569cf17999ca Mon Sep 17 00:00:00 2001 From: ilyayudovin Date: Sun, 14 Jun 2020 15:56:29 +0300 Subject: divide src into Pages and Components directories --- src/Components/Feed/Feed.tsx | 41 +++++++++ src/Components/Header/Header.tsx | 68 +++++++++++++++ src/Components/Header/SearchBar.tsx | 31 +++++++ src/Components/PollCard/PollCard.tsx | 100 ++++++++++++++++++++++ src/Feed/Feed.tsx | 41 --------- src/Form/SignInForm.tsx | 54 ------------ src/Header/Header.tsx | 68 --------------- src/Header/SearchBar.tsx | 31 ------- src/Pages/ProfilePage/Form/SignInForm.tsx | 54 ++++++++++++ src/Pages/ProfilePage/ProfileInfo/ProfileInfo.tsx | 75 ++++++++++++++++ src/PollCard/PollCard.tsx | 100 ---------------------- src/ProfileInfo/ProfileInfo.tsx | 75 ---------------- src/index.tsx | 8 +- 13 files changed, 373 insertions(+), 373 deletions(-) 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 delete mode 100644 src/Feed/Feed.tsx delete mode 100644 src/Form/SignInForm.tsx delete mode 100644 src/Header/Header.tsx delete mode 100644 src/Header/SearchBar.tsx create mode 100644 src/Pages/ProfilePage/Form/SignInForm.tsx create mode 100644 src/Pages/ProfilePage/ProfileInfo/ProfileInfo.tsx delete mode 100644 src/PollCard/PollCard.tsx delete mode 100644 src/ProfileInfo/ProfileInfo.tsx 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; + diff --git a/src/Feed/Feed.tsx b/src/Feed/Feed.tsx deleted file mode 100644 index d7bfce1..0000000 --- a/src/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 = ({ 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/Form/SignInForm.tsx b/src/Form/SignInForm.tsx deleted file mode 100644 index efe85ed..0000000 --- a/src/Form/SignInForm.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import React, { useRef } from 'react'; -import { makeStyles } from '@material-ui/core/styles'; -import TextField from '@material-ui/core/TextField'; -import Button from '@material-ui/core/Button'; -import { User } from '../types'; -import { get } from '../requests'; - -interface PropTypes { - setUser: (newUser: User) => void; -} - -const useStyles = makeStyles(theme => ({ - root: { - '& > *': { - margin: theme.spacing(1), - width: '25ch' - }, - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - textAlign: 'center' - } -})); - -const SignInForm: React.FC = ({ setUser }) => { - const classes = useStyles(); - const inputRef = useRef(); - - const onClick = () => { - const username = inputRef.current?.value; - if (username) { - get(`/users?name=${username}`).then(response => { - const user = response.data[0]; - setUser(user); - localStorage.setItem('userId', user._id); - }); - } - }; - - return ( -
-

Sign In

- - - - - ); -}; - -export default SignInForm; diff --git a/src/Header/Header.tsx b/src/Header/Header.tsx deleted file mode 100644 index 0ee6b5f..0000000 --- a/src/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 = ({ 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/Header/SearchBar.tsx b/src/Header/SearchBar.tsx deleted file mode 100644 index 182a1a4..0000000 --- a/src/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 ( -
- - -
- ); -}; - - -export default SearchBar; - diff --git a/src/Pages/ProfilePage/Form/SignInForm.tsx b/src/Pages/ProfilePage/Form/SignInForm.tsx new file mode 100644 index 0000000..bfdc283 --- /dev/null +++ b/src/Pages/ProfilePage/Form/SignInForm.tsx @@ -0,0 +1,54 @@ +import React, { useRef } from 'react'; +import { makeStyles } from '@material-ui/core/styles'; +import TextField from '@material-ui/core/TextField'; +import Button from '@material-ui/core/Button'; +import { User } from '../../../types'; +import { get } from '../../../requests'; + +interface PropTypes { + setUser: (newUser: User) => void; +} + +const useStyles = makeStyles(theme => ({ + root: { + '& > *': { + margin: theme.spacing(1), + width: '25ch' + }, + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + textAlign: 'center' + } +})); + +const SignInForm: React.FC = ({ setUser }) => { + const classes = useStyles(); + const inputRef = useRef(); + + const onClick = () => { + const username = inputRef.current?.value; + if (username) { + get(`/users?name=${username}`).then(response => { + const user = response.data[0]; + setUser(user); + localStorage.setItem('userId', user._id); + }); + } + }; + + return ( +
+

Sign In

+ + + + + ); +}; + +export default SignInForm; diff --git a/src/Pages/ProfilePage/ProfileInfo/ProfileInfo.tsx b/src/Pages/ProfilePage/ProfileInfo/ProfileInfo.tsx new file mode 100644 index 0000000..af866f8 --- /dev/null +++ b/src/Pages/ProfilePage/ProfileInfo/ProfileInfo.tsx @@ -0,0 +1,75 @@ +import React, { useState } from 'react'; +import { Avatar } from '@material-ui/core/'; +import { makeStyles } from '@material-ui/core/styles'; +import Button from '@material-ui/core/Button/Button'; +import { User } from '../../../types'; +import { get } from '../../../requests'; + +interface PropTypes { + id: string; + setUser: (newUser: User | undefined) => void; +} + +const useStyles = makeStyles({ + avatar: { + margin: '0 auto', + width: 150, + height: 150, + marginBottom: 10 + }, + name: { + fontSize: 20, + textAlign: 'center' + }, + profileMenu: { + display: 'flex', + width: '100%', + height: 50, + borderBottom: '1px solid lightgray', + margin: '50px 0' + }, + menuButton: { + width: 200, + height: 50, + paddingTop: 15, + textAlign: 'center' + } +}); + +const ProfileInfo: React.FC = ({ id, setUser }) => { + const [userInfo, setUserInfo] = useState(); + + get(`/users/${id}`).then(response => { + setUserInfo(response.data); + }); + + const classes = useStyles(); + + const LogOut = () => { + localStorage.clear(); + setUser(undefined); + }; + + return ( +
+ +
+ {userInfo?.name} +
+
+
+ Polls +
+
+ Followers +
+
+ Following +
+
+ +
+ ); +}; + +export default ProfileInfo; diff --git a/src/PollCard/PollCard.tsx b/src/PollCard/PollCard.tsx deleted file mode 100644 index b639f25..0000000 --- a/src/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 = ({ 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; - diff --git a/src/ProfileInfo/ProfileInfo.tsx b/src/ProfileInfo/ProfileInfo.tsx deleted file mode 100644 index 693f550..0000000 --- a/src/ProfileInfo/ProfileInfo.tsx +++ /dev/null @@ -1,75 +0,0 @@ -import React, { useState } from 'react'; -import { Avatar } from '@material-ui/core/'; -import { makeStyles } from '@material-ui/core/styles'; -import Button from '@material-ui/core/Button/Button'; -import { User } from '../types'; -import { get } from '../requests'; - -interface PropTypes { - id: string; - setUser: (newUser: User | undefined) => void; -} - -const useStyles = makeStyles({ - avatar: { - margin: '0 auto', - width: 150, - height: 150, - marginBottom: 10 - }, - name: { - fontSize: 20, - textAlign: 'center' - }, - profileMenu: { - display: 'flex', - width: '100%', - height: 50, - borderBottom: '1px solid lightgray', - margin: '50px 0' - }, - menuButton: { - width: 200, - height: 50, - paddingTop: 15, - textAlign: 'center' - } -}); - -const ProfileInfo: React.FC = ({ id, setUser }) => { - const [userInfo, setUserInfo] = useState(); - - get(`/users/${id}`).then(response => { - setUserInfo(response.data); - }); - - const classes = useStyles(); - - const LogOut = () => { - localStorage.clear(); - setUser(undefined); - }; - - return ( -
- -
- {userInfo?.name} -
-
-
- Polls -
-
- Followers -
-
- Following -
-
- -
- ); -}; - -export default ProfileInfo; diff --git a/src/index.tsx b/src/index.tsx index 0855038..ec31728 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -9,11 +9,11 @@ import { CssBaseline } from '@material-ui/core'; import teal from '@material-ui/core/colors/teal'; import 'typeface-roboto'; -import Header from './Header/Header'; -import Feed from './Feed/Feed'; -import ProfileInfo from './ProfileInfo/ProfileInfo'; +import Header from './Components/Header/Header'; +import Feed from './Components/Feed/Feed'; +import ProfileInfo from './Pages/ProfilePage/ProfileInfo/ProfileInfo'; -import SignInForm from './Form/SignInForm'; +import SignInForm from './Pages/ProfilePage/Form/SignInForm'; import { User } from './types'; import { get } from './requests'; -- cgit v1.2.3