From 3c3223c3b41411639ff19ebd58df569cf17999ca Mon Sep 17 00:00:00 2001
From: ilyayudovin <ilyayudovin123@gmail.com>
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<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
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<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
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 (
+    <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
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<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;
+
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<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/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<PropTypes> = ({ setUser }) => {
-  const classes = useStyles();
-  const inputRef = useRef<HTMLInputElement>();
-
-  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 (
-    <form className={classes.root} noValidate autoComplete="off">
-      <h1>Sign In</h1>
-      <TextField inputRef={inputRef} id="standard-basic" label="Login" />
-      <TextField
-        id="standard-password-input"
-        label="Password"
-        type="password"
-      />
-      <Button variant="contained" onClick={onClick}>submit</Button>
-    </form>
-  );
-};
-
-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<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/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 (
-    <div className={classes.root}>
-      <SearchIcon />
-      <InputBase
-        placeholder="Search..."
-      />
-    </div>
-  );
-};
-
-
-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<PropTypes> = ({ setUser }) => {
+  const classes = useStyles();
+  const inputRef = useRef<HTMLInputElement>();
+
+  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 (
+    <form className={classes.root} noValidate autoComplete="off">
+      <h1>Sign In</h1>
+      <TextField inputRef={inputRef} id="standard-basic" label="Login" />
+      <TextField
+        id="standard-password-input"
+        label="Password"
+        type="password"
+      />
+      <Button variant="contained" onClick={onClick}>submit</Button>
+    </form>
+  );
+};
+
+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<PropTypes> = ({ id, setUser }) => {
+  const [userInfo, setUserInfo] = useState<User>();
+
+  get(`/users/${id}`).then(response => {
+    setUserInfo(response.data);
+  });
+
+  const classes = useStyles();
+
+  const LogOut = () => {
+    localStorage.clear();
+    setUser(undefined);
+  };
+
+  return (
+    <div>
+      <Avatar className={classes.avatar} src={userInfo?.avatarUrl} />
+      <div className={classes.name}>
+        {userInfo?.name}
+      </div>
+      <div className={classes.profileMenu}>
+        <div style={{ borderBottom: '1px solid green', color: 'green' }} className={classes.menuButton}>
+          Polls
+        </div>
+        <div className={classes.menuButton}>
+          Followers
+        </div>
+        <div className={classes.menuButton}>
+          Following
+        </div>
+      </div>
+      <Button variant="contained" onClick={LogOut}>Log Out</Button>
+    </div>
+  );
+};
+
+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<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;
-
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<PropTypes> = ({ id, setUser }) => {
-  const [userInfo, setUserInfo] = useState<User>();
-
-  get(`/users/${id}`).then(response => {
-    setUserInfo(response.data);
-  });
-
-  const classes = useStyles();
-
-  const LogOut = () => {
-    localStorage.clear();
-    setUser(undefined);
-  };
-
-  return (
-    <div>
-      <Avatar className={classes.avatar} src={userInfo?.avatarUrl} />
-      <div className={classes.name}>
-        {userInfo?.name}
-      </div>
-      <div className={classes.profileMenu}>
-        <div style={{ borderBottom: '1px solid green', color: 'green' }} className={classes.menuButton}>
-          Polls
-        </div>
-        <div className={classes.menuButton}>
-          Followers
-        </div>
-        <div className={classes.menuButton}>
-          Following
-        </div>
-      </div>
-      <Button variant="contained" onClick={LogOut}>Log Out</Button>
-    </div>
-  );
-};
-
-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


From 657c340ea9e244b7f1041bac5be240d428d758e5 Mon Sep 17 00:00:00 2001
From: ilyayudovin <ilyayudovin123@gmail.com>
Date: Sun, 14 Jun 2020 17:28:24 +0300
Subject: feat: add profilePage to render ProfileInfo and SignInForm

---
 src/Pages/ProfilePage/Form/SignInForm.tsx         | 54 ----------------
 src/Pages/ProfilePage/ProfileInfo.tsx             | 75 +++++++++++++++++++++++
 src/Pages/ProfilePage/ProfileInfo/ProfileInfo.tsx | 75 -----------------------
 src/Pages/ProfilePage/ProfilePage.tsx             | 30 +++++++++
 src/Pages/ProfilePage/SignInForm.tsx              | 54 ++++++++++++++++
 src/index.tsx                                     | 19 ++----
 6 files changed, 163 insertions(+), 144 deletions(-)
 delete mode 100644 src/Pages/ProfilePage/Form/SignInForm.tsx
 create mode 100644 src/Pages/ProfilePage/ProfileInfo.tsx
 delete mode 100644 src/Pages/ProfilePage/ProfileInfo/ProfileInfo.tsx
 create mode 100644 src/Pages/ProfilePage/ProfilePage.tsx
 create mode 100644 src/Pages/ProfilePage/SignInForm.tsx

diff --git a/src/Pages/ProfilePage/Form/SignInForm.tsx b/src/Pages/ProfilePage/Form/SignInForm.tsx
deleted file mode 100644
index bfdc283..0000000
--- a/src/Pages/ProfilePage/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<PropTypes> = ({ setUser }) => {
-  const classes = useStyles();
-  const inputRef = useRef<HTMLInputElement>();
-
-  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 (
-    <form className={classes.root} noValidate autoComplete="off">
-      <h1>Sign In</h1>
-      <TextField inputRef={inputRef} id="standard-basic" label="Login" />
-      <TextField
-        id="standard-password-input"
-        label="Password"
-        type="password"
-      />
-      <Button variant="contained" onClick={onClick}>submit</Button>
-    </form>
-  );
-};
-
-export default SignInForm;
diff --git a/src/Pages/ProfilePage/ProfileInfo.tsx b/src/Pages/ProfilePage/ProfileInfo.tsx
new file mode 100644
index 0000000..8fce8df
--- /dev/null
+++ b/src/Pages/ProfilePage/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<PropTypes> = ({ id, setUser }) => {
+  const [userInfo, setUserInfo] = useState<User>();
+
+  get(`/users/${id}`).then(response => {
+    setUserInfo(response.data);
+  });
+
+  const classes = useStyles();
+
+  const LogOut = () => {
+    localStorage.clear();
+    setUser(undefined);
+  };
+
+  return (
+    <div>
+      <Avatar className={classes.avatar} src={userInfo?.avatarUrl} />
+      <div className={classes.name}>
+        {userInfo?.name}
+      </div>
+      <div className={classes.profileMenu}>
+        <div style={{ borderBottom: '1px solid green', color: 'green' }} className={classes.menuButton}>
+          Polls
+        </div>
+        <div className={classes.menuButton}>
+          Followers
+        </div>
+        <div className={classes.menuButton}>
+          Following
+        </div>
+      </div>
+      <Button variant="contained" onClick={LogOut}>Log Out</Button>
+    </div>
+  );
+};
+
+export default ProfileInfo;
diff --git a/src/Pages/ProfilePage/ProfileInfo/ProfileInfo.tsx b/src/Pages/ProfilePage/ProfileInfo/ProfileInfo.tsx
deleted file mode 100644
index af866f8..0000000
--- a/src/Pages/ProfilePage/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<PropTypes> = ({ id, setUser }) => {
-  const [userInfo, setUserInfo] = useState<User>();
-
-  get(`/users/${id}`).then(response => {
-    setUserInfo(response.data);
-  });
-
-  const classes = useStyles();
-
-  const LogOut = () => {
-    localStorage.clear();
-    setUser(undefined);
-  };
-
-  return (
-    <div>
-      <Avatar className={classes.avatar} src={userInfo?.avatarUrl} />
-      <div className={classes.name}>
-        {userInfo?.name}
-      </div>
-      <div className={classes.profileMenu}>
-        <div style={{ borderBottom: '1px solid green', color: 'green' }} className={classes.menuButton}>
-          Polls
-        </div>
-        <div className={classes.menuButton}>
-          Followers
-        </div>
-        <div className={classes.menuButton}>
-          Following
-        </div>
-      </div>
-      <Button variant="contained" onClick={LogOut}>Log Out</Button>
-    </div>
-  );
-};
-
-export default ProfileInfo;
diff --git a/src/Pages/ProfilePage/ProfilePage.tsx b/src/Pages/ProfilePage/ProfilePage.tsx
new file mode 100644
index 0000000..8d082dc
--- /dev/null
+++ b/src/Pages/ProfilePage/ProfilePage.tsx
@@ -0,0 +1,30 @@
+import React, {useState} from 'react';
+import {makeStyles} from '@material-ui/core/styles';
+import {User} from '../../types';
+import SignInForm from "./SignInForm";
+import ProfileInfo from "./ProfileInfo";
+
+interface PropTypes {
+  id: string;
+  setUser: (newUser: User | undefined) => void;
+  user: User | undefined;
+}
+
+const useStyles = makeStyles({
+
+});
+
+const ProfilePage: React.FC<PropTypes> = ({id, setUser, user}) => {
+  const classes = useStyles();
+
+  return (
+    user ? (
+          <>
+            <ProfileInfo id={user?._id || ''} setUser={setUser} />
+          </>
+        )
+        : <SignInForm setUser={setUser} />
+  )
+};
+
+export default ProfilePage;
diff --git a/src/Pages/ProfilePage/SignInForm.tsx b/src/Pages/ProfilePage/SignInForm.tsx
new file mode 100644
index 0000000..6e27535
--- /dev/null
+++ b/src/Pages/ProfilePage/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<PropTypes> = ({ setUser }) => {
+  const classes = useStyles();
+  const inputRef = useRef<HTMLInputElement>();
+
+  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 (
+    <form className={classes.root} noValidate autoComplete="off">
+      <h1>Sign In</h1>
+      <TextField inputRef={inputRef} id="standard-basic" label="Login" />
+      <TextField
+        id="standard-password-input"
+        label="Password"
+        type="password"
+      />
+      <Button variant="contained" onClick={onClick}>submit</Button>
+    </form>
+  );
+};
+
+export default SignInForm;
diff --git a/src/index.tsx b/src/index.tsx
index ec31728..a5e1168 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -11,9 +11,9 @@ import 'typeface-roboto';
 
 import Header from './Components/Header/Header';
 import Feed from './Components/Feed/Feed';
-import ProfileInfo from './Pages/ProfilePage/ProfileInfo/ProfileInfo';
-
-import SignInForm from './Pages/ProfilePage/Form/SignInForm';
+import ProfileInfo from './Pages/ProfilePage/ProfileInfo';
+import ProfilePage from './Pages/ProfilePage/ProfilePage';
+import SignInForm from './Pages/ProfilePage/SignInForm';
 import { User } from './types';
 import { get } from './requests';
 
@@ -53,18 +53,7 @@ const App: React.FC = () => {
       <Header setPage={setPage} />
       <div className={classes.root}>
         {
-          page === 'profile'
-            ? (
-              user
-                ? (
-                  <>
-                    <ProfileInfo id={user?._id || ''} setUser={setUser} />
-                    <Feed page={page} />
-                  </>
-                )
-                : <SignInForm setUser={setUser} />
-            )
-            : <Feed page={page} />
+          page === 'profile' ?  <ProfilePage id={user?._id || ''} setUser={setUser} user={user} /> : <Feed page={page} />
         }
       </div>
     </ThemeProvider>
-- 
cgit v1.2.3


From a579341f91700a9ef3baecdd4d1e77535da7188e Mon Sep 17 00:00:00 2001
From: ilyayudovin <ilyayudovin123@gmail.com>
Date: Sun, 14 Jun 2020 17:37:56 +0300
Subject: fix: clear all eslint errors

---
 src/Pages/ProfilePage/ProfilePage.tsx | 28 ++++++++--------------------
 src/index.tsx                         |  6 +++---
 2 files changed, 11 insertions(+), 23 deletions(-)

diff --git a/src/Pages/ProfilePage/ProfilePage.tsx b/src/Pages/ProfilePage/ProfilePage.tsx
index 8d082dc..a2dd3cc 100644
--- a/src/Pages/ProfilePage/ProfilePage.tsx
+++ b/src/Pages/ProfilePage/ProfilePage.tsx
@@ -1,30 +1,18 @@
-import React, {useState} from 'react';
-import {makeStyles} from '@material-ui/core/styles';
-import {User} from '../../types';
-import SignInForm from "./SignInForm";
-import ProfileInfo from "./ProfileInfo";
+import React from 'react';
+import { User } from '../../types';
+import SignInForm from './SignInForm';
+import ProfileInfo from './ProfileInfo';
 
 interface PropTypes {
-  id: string;
   setUser: (newUser: User | undefined) => void;
   user: User | undefined;
 }
 
-const useStyles = makeStyles({
-
-});
-
-const ProfilePage: React.FC<PropTypes> = ({id, setUser, user}) => {
-  const classes = useStyles();
-
+const ProfilePage: React.FC<PropTypes> = ({ setUser, user }) => {
   return (
-    user ? (
-          <>
-            <ProfileInfo id={user?._id || ''} setUser={setUser} />
-          </>
-        )
-        : <SignInForm setUser={setUser} />
-  )
+    user ? <ProfileInfo id={user?._id || ''} setUser={setUser} />
+      : <SignInForm setUser={setUser} />
+  );
 };
 
 export default ProfilePage;
diff --git a/src/index.tsx b/src/index.tsx
index a5e1168..88eb87d 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -11,9 +11,7 @@ import 'typeface-roboto';
 
 import Header from './Components/Header/Header';
 import Feed from './Components/Feed/Feed';
-import ProfileInfo from './Pages/ProfilePage/ProfileInfo';
 import ProfilePage from './Pages/ProfilePage/ProfilePage';
-import SignInForm from './Pages/ProfilePage/SignInForm';
 import { User } from './types';
 import { get } from './requests';
 
@@ -53,7 +51,9 @@ const App: React.FC = () => {
       <Header setPage={setPage} />
       <div className={classes.root}>
         {
-          page === 'profile' ?  <ProfilePage id={user?._id || ''} setUser={setUser} user={user} /> : <Feed page={page} />
+          page === 'profile'
+            ? <ProfilePage setUser={setUser} user={user} />
+            : <Feed page={page} />
         }
       </div>
     </ThemeProvider>
-- 
cgit v1.2.3


From e1c44e40680d52cd1862e795fc7fbf4ab4af929f Mon Sep 17 00:00:00 2001
From: ilyayudovin <ilyayudovin123@gmail.com>
Date: Sun, 14 Jun 2020 18:07:14 +0300
Subject: add feed to profile

---
 src/Pages/ProfilePage/ProfilePage.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/Pages/ProfilePage/ProfilePage.tsx b/src/Pages/ProfilePage/ProfilePage.tsx
index a2dd3cc..65c3fcf 100644
--- a/src/Pages/ProfilePage/ProfilePage.tsx
+++ b/src/Pages/ProfilePage/ProfilePage.tsx
@@ -2,15 +2,19 @@ import React from 'react';
 import { User } from '../../types';
 import SignInForm from './SignInForm';
 import ProfileInfo from './ProfileInfo';
+import Feed from "../../Components/Feed/Feed";
 
 interface PropTypes {
   setUser: (newUser: User | undefined) => void;
   user: User | undefined;
 }
 
-const ProfilePage: React.FC<PropTypes> = ({ setUser, user }) => {
+const ProfilePage: React.FC<PropTypes> = ({ setUser, user}) => {
   return (
-    user ? <ProfileInfo id={user?._id || ''} setUser={setUser} />
+    user ? <>
+      <ProfileInfo id={user?._id} setUser={setUser} />
+      <Feed page={'Feed'}/>
+      </>
       : <SignInForm setUser={setUser} />
   );
 };
-- 
cgit v1.2.3


From fabc53130685f70078343a6fd96d9a597b22008f Mon Sep 17 00:00:00 2001
From: ilyayudovin <ilyayudovin123@gmail.com>
Date: Sun, 14 Jun 2020 19:49:10 +0300
Subject: fix: clear eslint errors

---
 src/Pages/ProfilePage/ProfilePage.tsx | 15 +++++++++------
 src/index.tsx                         |  6 +++---
 2 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/Pages/ProfilePage/ProfilePage.tsx b/src/Pages/ProfilePage/ProfilePage.tsx
index 65c3fcf..ee95769 100644
--- a/src/Pages/ProfilePage/ProfilePage.tsx
+++ b/src/Pages/ProfilePage/ProfilePage.tsx
@@ -2,19 +2,22 @@ import React from 'react';
 import { User } from '../../types';
 import SignInForm from './SignInForm';
 import ProfileInfo from './ProfileInfo';
-import Feed from "../../Components/Feed/Feed";
+import Feed from '../../components/Feed/Feed';
 
 interface PropTypes {
   setUser: (newUser: User | undefined) => void;
   user: User | undefined;
 }
 
-const ProfilePage: React.FC<PropTypes> = ({ setUser, user}) => {
+const ProfilePage: React.FC<PropTypes> = ({ setUser, user }) => {
   return (
-    user ? <>
-      <ProfileInfo id={user?._id} setUser={setUser} />
-      <Feed page={'Feed'}/>
-      </>
+    user
+      ? (
+        <>
+          <ProfileInfo id={user?._id} setUser={setUser} />
+          <Feed page="Feed" />
+        </>
+      )
       : <SignInForm setUser={setUser} />
   );
 };
diff --git a/src/index.tsx b/src/index.tsx
index 88eb87d..5888170 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -9,9 +9,9 @@ import { CssBaseline } from '@material-ui/core';
 import teal from '@material-ui/core/colors/teal';
 import 'typeface-roboto';
 
-import Header from './Components/Header/Header';
-import Feed from './Components/Feed/Feed';
-import ProfilePage from './Pages/ProfilePage/ProfilePage';
+import Header from './components/Header/Header';
+import Feed from './components/Feed/Feed';
+import ProfilePage from './pages/ProfilePage/ProfilePage';
 import { User } from './types';
 import { get } from './requests';
 
-- 
cgit v1.2.3


From c7f2999ee797ea5e3bfb29517a4f13206162cc6f Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
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 ----------------------------------
 src/Pages/ProfilePage/ProfileInfo.tsx |  75 -------------------------
 src/Pages/ProfilePage/ProfilePage.tsx |  25 ---------
 src/Pages/ProfilePage/SignInForm.tsx  |  54 ------------------
 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/pages/ProfilePage/ProfileInfo.tsx |  75 +++++++++++++++++++++++++
 src/pages/ProfilePage/ProfilePage.tsx |  25 +++++++++
 src/pages/ProfilePage/SignInForm.tsx  |  54 ++++++++++++++++++
 14 files changed, 394 insertions(+), 394 deletions(-)
 delete mode 100644 src/Components/Feed/Feed.tsx
 delete mode 100644 src/Components/Header/Header.tsx
 delete mode 100644 src/Components/Header/SearchBar.tsx
 delete mode 100644 src/Components/PollCard/PollCard.tsx
 delete mode 100644 src/Pages/ProfilePage/ProfileInfo.tsx
 delete mode 100644 src/Pages/ProfilePage/ProfilePage.tsx
 delete mode 100644 src/Pages/ProfilePage/SignInForm.tsx
 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
 create mode 100644 src/pages/ProfilePage/ProfileInfo.tsx
 create mode 100644 src/pages/ProfilePage/ProfilePage.tsx
 create mode 100644 src/pages/ProfilePage/SignInForm.tsx

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;
-
diff --git a/src/Pages/ProfilePage/ProfileInfo.tsx b/src/Pages/ProfilePage/ProfileInfo.tsx
deleted file mode 100644
index 8fce8df..0000000
--- a/src/Pages/ProfilePage/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<PropTypes> = ({ id, setUser }) => {
-  const [userInfo, setUserInfo] = useState<User>();
-
-  get(`/users/${id}`).then(response => {
-    setUserInfo(response.data);
-  });
-
-  const classes = useStyles();
-
-  const LogOut = () => {
-    localStorage.clear();
-    setUser(undefined);
-  };
-
-  return (
-    <div>
-      <Avatar className={classes.avatar} src={userInfo?.avatarUrl} />
-      <div className={classes.name}>
-        {userInfo?.name}
-      </div>
-      <div className={classes.profileMenu}>
-        <div style={{ borderBottom: '1px solid green', color: 'green' }} className={classes.menuButton}>
-          Polls
-        </div>
-        <div className={classes.menuButton}>
-          Followers
-        </div>
-        <div className={classes.menuButton}>
-          Following
-        </div>
-      </div>
-      <Button variant="contained" onClick={LogOut}>Log Out</Button>
-    </div>
-  );
-};
-
-export default ProfileInfo;
diff --git a/src/Pages/ProfilePage/ProfilePage.tsx b/src/Pages/ProfilePage/ProfilePage.tsx
deleted file mode 100644
index ee95769..0000000
--- a/src/Pages/ProfilePage/ProfilePage.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react';
-import { User } from '../../types';
-import SignInForm from './SignInForm';
-import ProfileInfo from './ProfileInfo';
-import Feed from '../../components/Feed/Feed';
-
-interface PropTypes {
-  setUser: (newUser: User | undefined) => void;
-  user: User | undefined;
-}
-
-const ProfilePage: React.FC<PropTypes> = ({ setUser, user }) => {
-  return (
-    user
-      ? (
-        <>
-          <ProfileInfo id={user?._id} setUser={setUser} />
-          <Feed page="Feed" />
-        </>
-      )
-      : <SignInForm setUser={setUser} />
-  );
-};
-
-export default ProfilePage;
diff --git a/src/Pages/ProfilePage/SignInForm.tsx b/src/Pages/ProfilePage/SignInForm.tsx
deleted file mode 100644
index 6e27535..0000000
--- a/src/Pages/ProfilePage/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<PropTypes> = ({ setUser }) => {
-  const classes = useStyles();
-  const inputRef = useRef<HTMLInputElement>();
-
-  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 (
-    <form className={classes.root} noValidate autoComplete="off">
-      <h1>Sign In</h1>
-      <TextField inputRef={inputRef} id="standard-basic" label="Login" />
-      <TextField
-        id="standard-password-input"
-        label="Password"
-        type="password"
-      />
-      <Button variant="contained" onClick={onClick}>submit</Button>
-    </form>
-  );
-};
-
-export default SignInForm;
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<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
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<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
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 (
+    <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
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<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;
+
diff --git a/src/pages/ProfilePage/ProfileInfo.tsx b/src/pages/ProfilePage/ProfileInfo.tsx
new file mode 100644
index 0000000..8fce8df
--- /dev/null
+++ b/src/pages/ProfilePage/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<PropTypes> = ({ id, setUser }) => {
+  const [userInfo, setUserInfo] = useState<User>();
+
+  get(`/users/${id}`).then(response => {
+    setUserInfo(response.data);
+  });
+
+  const classes = useStyles();
+
+  const LogOut = () => {
+    localStorage.clear();
+    setUser(undefined);
+  };
+
+  return (
+    <div>
+      <Avatar className={classes.avatar} src={userInfo?.avatarUrl} />
+      <div className={classes.name}>
+        {userInfo?.name}
+      </div>
+      <div className={classes.profileMenu}>
+        <div style={{ borderBottom: '1px solid green', color: 'green' }} className={classes.menuButton}>
+          Polls
+        </div>
+        <div className={classes.menuButton}>
+          Followers
+        </div>
+        <div className={classes.menuButton}>
+          Following
+        </div>
+      </div>
+      <Button variant="contained" onClick={LogOut}>Log Out</Button>
+    </div>
+  );
+};
+
+export default ProfileInfo;
diff --git a/src/pages/ProfilePage/ProfilePage.tsx b/src/pages/ProfilePage/ProfilePage.tsx
new file mode 100644
index 0000000..ee95769
--- /dev/null
+++ b/src/pages/ProfilePage/ProfilePage.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { User } from '../../types';
+import SignInForm from './SignInForm';
+import ProfileInfo from './ProfileInfo';
+import Feed from '../../components/Feed/Feed';
+
+interface PropTypes {
+  setUser: (newUser: User | undefined) => void;
+  user: User | undefined;
+}
+
+const ProfilePage: React.FC<PropTypes> = ({ setUser, user }) => {
+  return (
+    user
+      ? (
+        <>
+          <ProfileInfo id={user?._id} setUser={setUser} />
+          <Feed page="Feed" />
+        </>
+      )
+      : <SignInForm setUser={setUser} />
+  );
+};
+
+export default ProfilePage;
diff --git a/src/pages/ProfilePage/SignInForm.tsx b/src/pages/ProfilePage/SignInForm.tsx
new file mode 100644
index 0000000..6e27535
--- /dev/null
+++ b/src/pages/ProfilePage/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<PropTypes> = ({ setUser }) => {
+  const classes = useStyles();
+  const inputRef = useRef<HTMLInputElement>();
+
+  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 (
+    <form className={classes.root} noValidate autoComplete="off">
+      <h1>Sign In</h1>
+      <TextField inputRef={inputRef} id="standard-basic" label="Login" />
+      <TextField
+        id="standard-password-input"
+        label="Password"
+        type="password"
+      />
+      <Button variant="contained" onClick={onClick}>submit</Button>
+    </form>
+  );
+};
+
+export default SignInForm;
-- 
cgit v1.2.3


From 61a424debfbfa98570e070fbf25d03aa9c56d679 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Sun, 14 Jun 2020 20:39:16 +0300
Subject: refactor: structurize pages

---
 src/components/Feed/Feed.tsx          | 18 ++----------
 src/index.tsx                         | 17 +++++++++--
 src/pages/AuthPage/AuthPage.tsx       | 14 +++++++++
 src/pages/AuthPage/SignInForm.tsx     | 54 +++++++++++++++++++++++++++++++++++
 src/pages/FeedPage/FeedPage.tsx       | 19 ++++++++++++
 src/pages/ProfilePage/ProfileInfo.tsx | 26 +++++------------
 src/pages/ProfilePage/ProfilePage.tsx | 37 ++++++++++++++----------
 src/pages/ProfilePage/SignInForm.tsx  | 54 -----------------------------------
 8 files changed, 133 insertions(+), 106 deletions(-)
 create mode 100644 src/pages/AuthPage/AuthPage.tsx
 create mode 100644 src/pages/AuthPage/SignInForm.tsx
 create mode 100644 src/pages/FeedPage/FeedPage.tsx
 delete mode 100644 src/pages/ProfilePage/SignInForm.tsx

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<PropTypes> = ({ page }) => {
-  const [polls, setPolls] = useState<Poll[]>([]);
+const Feed: React.FC<PropTypes> = ({ 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 (
     <div className={classes.root}>
       {polls.map(poll => <PollCard poll={poll} key={poll._id} />)}
diff --git a/src/index.tsx b/src/index.tsx
index 5888170..5ab1910 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -10,8 +10,9 @@ import teal from '@material-ui/core/colors/teal';
 import 'typeface-roboto';
 
 import Header from './components/Header/Header';
-import Feed from './components/Feed/Feed';
 import ProfilePage from './pages/ProfilePage/ProfilePage';
+import FeedPage from './pages/FeedPage/FeedPage';
+import AuthPage from './pages/AuthPage/AuthPage';
 import { User } from './types';
 import { get } from './requests';
 
@@ -36,6 +37,12 @@ const App: React.FC = () => {
   const [user, setUser] = React.useState<User | undefined>();
   const classes = useStyles();
 
+  const logOut = () => {
+    localStorage.removeItem('userId');
+    setUser(undefined);
+  };
+
+
   useEffect(() => {
     const userId = localStorage.getItem('userId');
     if (userId) {
@@ -52,8 +59,12 @@ const App: React.FC = () => {
       <div className={classes.root}>
         {
           page === 'profile'
-            ? <ProfilePage setUser={setUser} user={user} />
-            : <Feed page={page} />
+            ? (
+              user
+                ? <ProfilePage logOut={logOut} id={user?._id} />
+                : <AuthPage setUser={setUser} />
+            )
+            : <FeedPage />
         }
       </div>
     </ThemeProvider>
diff --git a/src/pages/AuthPage/AuthPage.tsx b/src/pages/AuthPage/AuthPage.tsx
new file mode 100644
index 0000000..d9c43d3
--- /dev/null
+++ b/src/pages/AuthPage/AuthPage.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { User } from '../../types';
+import SignInForm from './SignInForm';
+
+interface PropTypes {
+  setUser: (newUser: User | undefined) => void;
+}
+
+const AuthPage: React.FC<PropTypes> = ({ setUser }) => {
+  return <SignInForm setUser={setUser} />;
+};
+
+export default AuthPage;
+
diff --git a/src/pages/AuthPage/SignInForm.tsx b/src/pages/AuthPage/SignInForm.tsx
new file mode 100644
index 0000000..6e27535
--- /dev/null
+++ b/src/pages/AuthPage/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<PropTypes> = ({ setUser }) => {
+  const classes = useStyles();
+  const inputRef = useRef<HTMLInputElement>();
+
+  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 (
+    <form className={classes.root} noValidate autoComplete="off">
+      <h1>Sign In</h1>
+      <TextField inputRef={inputRef} id="standard-basic" label="Login" />
+      <TextField
+        id="standard-password-input"
+        label="Password"
+        type="password"
+      />
+      <Button variant="contained" onClick={onClick}>submit</Button>
+    </form>
+  );
+};
+
+export default SignInForm;
diff --git a/src/pages/FeedPage/FeedPage.tsx b/src/pages/FeedPage/FeedPage.tsx
new file mode 100644
index 0000000..03bacfd
--- /dev/null
+++ b/src/pages/FeedPage/FeedPage.tsx
@@ -0,0 +1,19 @@
+import React, { useState, useEffect } from 'react';
+import { Poll } from '../../types';
+import Feed from '../../components/Feed/Feed';
+import { get } from '../../requests';
+
+const FeedPage: React.FC = () => {
+  const [polls, setPolls] = useState<Poll[]>([]);
+
+  useEffect(() => {
+    get('/polls').then(response => {
+      setPolls(response.data);
+    });
+  }, []);
+
+  return <Feed polls={polls} />;
+};
+
+export default FeedPage;
+
diff --git a/src/pages/ProfilePage/ProfileInfo.tsx b/src/pages/ProfilePage/ProfileInfo.tsx
index 8fce8df..c2f242a 100644
--- a/src/pages/ProfilePage/ProfileInfo.tsx
+++ b/src/pages/ProfilePage/ProfileInfo.tsx
@@ -1,13 +1,12 @@
-import React, { useState } from 'react';
+import React 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;
+  user: User | undefined;
+  logOut: () => void;
 }
 
 const useStyles = makeStyles({
@@ -36,25 +35,14 @@ const useStyles = makeStyles({
   }
 });
 
-const ProfileInfo: React.FC<PropTypes> = ({ id, setUser }) => {
-  const [userInfo, setUserInfo] = useState<User>();
-
-  get(`/users/${id}`).then(response => {
-    setUserInfo(response.data);
-  });
-
+const ProfileInfo: React.FC<PropTypes> = ({ user, logOut }) => {
   const classes = useStyles();
 
-  const LogOut = () => {
-    localStorage.clear();
-    setUser(undefined);
-  };
-
   return (
     <div>
-      <Avatar className={classes.avatar} src={userInfo?.avatarUrl} />
+      <Avatar className={classes.avatar} src={user?.avatarUrl} />
       <div className={classes.name}>
-        {userInfo?.name}
+        {user?.name}
       </div>
       <div className={classes.profileMenu}>
         <div style={{ borderBottom: '1px solid green', color: 'green' }} className={classes.menuButton}>
@@ -67,7 +55,7 @@ const ProfileInfo: React.FC<PropTypes> = ({ id, setUser }) => {
           Following
         </div>
       </div>
-      <Button variant="contained" onClick={LogOut}>Log Out</Button>
+      <Button variant="contained" onClick={logOut}>Log Out</Button>
     </div>
   );
 };
diff --git a/src/pages/ProfilePage/ProfilePage.tsx b/src/pages/ProfilePage/ProfilePage.tsx
index ee95769..023f37c 100644
--- a/src/pages/ProfilePage/ProfilePage.tsx
+++ b/src/pages/ProfilePage/ProfilePage.tsx
@@ -1,25 +1,32 @@
-import React from 'react';
-import { User } from '../../types';
-import SignInForm from './SignInForm';
+import React, { useState } from 'react';
+import { User, Poll } from '../../types';
 import ProfileInfo from './ProfileInfo';
 import Feed from '../../components/Feed/Feed';
+import { get } from '../../requests';
 
 interface PropTypes {
-  setUser: (newUser: User | undefined) => void;
-  user: User | undefined;
+  logOut: () => void;
+  id: string;
 }
 
-const ProfilePage: React.FC<PropTypes> = ({ setUser, user }) => {
+const ProfilePage: React.FC<PropTypes> = ({ logOut, id }) => {
+  const [userInfo, setUserInfo] = useState<User>();
+  const [polls, setPolls] = useState<Poll[]>([]);
+
+  get(`/users/${id}`).then(response => {
+    setUserInfo(response.data);
+  });
+
+  get(`/profiles/${id}`).then(response => {
+    setPolls(response.data);
+  });
+
   return (
-    user
-      ? (
-        <>
-          <ProfileInfo id={user?._id} setUser={setUser} />
-          <Feed page="Feed" />
-        </>
-      )
-      : <SignInForm setUser={setUser} />
-  );
+    <>
+      <ProfileInfo user={userInfo} logOut={logOut} />
+      <Feed polls={polls} />
+    </>
+  )
 };
 
 export default ProfilePage;
diff --git a/src/pages/ProfilePage/SignInForm.tsx b/src/pages/ProfilePage/SignInForm.tsx
deleted file mode 100644
index 6e27535..0000000
--- a/src/pages/ProfilePage/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<PropTypes> = ({ setUser }) => {
-  const classes = useStyles();
-  const inputRef = useRef<HTMLInputElement>();
-
-  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 (
-    <form className={classes.root} noValidate autoComplete="off">
-      <h1>Sign In</h1>
-      <TextField inputRef={inputRef} id="standard-basic" label="Login" />
-      <TextField
-        id="standard-password-input"
-        label="Password"
-        type="password"
-      />
-      <Button variant="contained" onClick={onClick}>submit</Button>
-    </form>
-  );
-};
-
-export default SignInForm;
-- 
cgit v1.2.3


From fbe489c83e9ef4c03b87624a4dec66de61af364a Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Sun, 14 Jun 2020 20:43:05 +0300
Subject: style: fix eslint errors

---
 src/index.tsx                         | 1 -
 src/pages/ProfilePage/ProfilePage.tsx | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/index.tsx b/src/index.tsx
index 5ab1910..55bf773 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -42,7 +42,6 @@ const App: React.FC = () => {
     setUser(undefined);
   };
 
-
   useEffect(() => {
     const userId = localStorage.getItem('userId');
     if (userId) {
diff --git a/src/pages/ProfilePage/ProfilePage.tsx b/src/pages/ProfilePage/ProfilePage.tsx
index 023f37c..1dd71d3 100644
--- a/src/pages/ProfilePage/ProfilePage.tsx
+++ b/src/pages/ProfilePage/ProfilePage.tsx
@@ -26,7 +26,7 @@ const ProfilePage: React.FC<PropTypes> = ({ logOut, id }) => {
       <ProfileInfo user={userInfo} logOut={logOut} />
       <Feed polls={polls} />
     </>
-  )
+  );
 };
 
 export default ProfilePage;
-- 
cgit v1.2.3