From 236062c6c6278c4b433463fef9fa37eebf3fd760 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Sun, 9 Aug 2020 16:09:21 +0300
Subject: feat: lazy-load pages

---
 src/pages/Page.tsx | 33 ++++++++++++++++++---------------
 1 file changed, 18 insertions(+), 15 deletions(-)

(limited to 'src/pages')

diff --git a/src/pages/Page.tsx b/src/pages/Page.tsx
index 668b171..49c941a 100644
--- a/src/pages/Page.tsx
+++ b/src/pages/Page.tsx
@@ -1,15 +1,16 @@
-import React from 'react';
+import React, { Suspense } from 'react';
 import { makeStyles, useTheme } from '@material-ui/core/styles';
 import { useMediaQuery } from '@material-ui/core';
 import { SnackbarProvider } from 'notistack';
 import { Switch, Route } from 'react-router-dom';
+import Loading from '../components/Loading/Loading';
 
-import ProfilePage from './ProfilePage/ProfilePage';
-import FeedPage from './FeedPage/FeedPage';
-import LoginPage from './LoginPage/LoginPage';
-import RegistrationPage from './RegistrationPage/RegistrationPage';
-import HomePage from './HomePage/HomePage';
-import NotificationsPage from './NotificationsPage/NotificationsPage';
+const ProfilePage = React.lazy(() => import( './ProfilePage/ProfilePage'));
+const FeedPage = React.lazy(() => import( './FeedPage/FeedPage'));
+const LoginPage = React.lazy(() => import( './LoginPage/LoginPage'));
+const RegistrationPage = React.lazy(() => import( './RegistrationPage/RegistrationPage'));
+const HomePage = React.lazy(() => import( './HomePage/HomePage'));
+const NotificationsPage = React.lazy(() => import( './NotificationsPage/NotificationsPage'));
 
 
 const useStyles = makeStyles(theme => ({
@@ -38,14 +39,16 @@ const Page: React.FC = () => {
       }}
     >
       <div className={classes.root}>
-        <Switch>
-          <Route exact path="/" component={HomePage} />
-          <Route exact path="/login" component={LoginPage} />
-          <Route exact path="/registration" component={RegistrationPage} />
-          <Route exact path="/feed" component={FeedPage} />
-          <Route exact path="/notifications" component={NotificationsPage} />
-          <Route path="/profile/:username" component={ProfilePage} />
-        </Switch>
+        <Suspense fallback={<Loading />}>
+          <Switch>
+            <Route exact path="/" component={HomePage} />
+            <Route exact path="/login" component={LoginPage} />
+            <Route exact path="/registration" component={RegistrationPage} />
+            <Route exact path="/feed" component={FeedPage} />
+            <Route exact path="/notifications" component={NotificationsPage} />
+            <Route path="/profile/:username" component={ProfilePage} />
+          </Switch>
+        </Suspense>
       </div>
     </SnackbarProvider>
   );
-- 
cgit v1.2.3


From b6f9dbc3cbb21447fdeb22420b005da37de2af8e Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Sun, 9 Aug 2020 19:51:32 +0300
Subject: feat: use SWR in profile page

---
 src/pages/ProfilePage/ProfileInfo.tsx |  9 +++---
 src/pages/ProfilePage/ProfilePage.tsx | 57 ++++++++++++-----------------------
 2 files changed, 23 insertions(+), 43 deletions(-)

(limited to 'src/pages')

diff --git a/src/pages/ProfilePage/ProfileInfo.tsx b/src/pages/ProfilePage/ProfileInfo.tsx
index e4ef66a..8b1447a 100644
--- a/src/pages/ProfilePage/ProfileInfo.tsx
+++ b/src/pages/ProfilePage/ProfileInfo.tsx
@@ -16,7 +16,6 @@ interface PropTypes {
   totalVotes: number;
   userInfo: User | undefined;
   setUserInfo: (userInfo: User) => void;
-  isLoading: boolean;
 }
 
 const useStyles = makeStyles(theme => ({
@@ -83,7 +82,7 @@ const useStyles = makeStyles(theme => ({
 
 
 const ProfileInfo: React.FC<PropTypes> = ({
-  savedPolls, totalVotes, setUserInfo, userInfo, isLoading
+  savedPolls, totalVotes, setUserInfo, userInfo
 }) => {
   const classes = useStyles();
   const [input, setInput] = useState(false);
@@ -105,7 +104,7 @@ const ProfileInfo: React.FC<PropTypes> = ({
   return (
     <div className={classes.root}>
       {
-        isLoading
+        !userInfo
           ? <Skeleton animation="wave" variant="circle" width={150} height={150} className={classes.avatar} />
           : userInfo?._id === localStorage.getItem('userId')
             ? (
@@ -133,7 +132,7 @@ const ProfileInfo: React.FC<PropTypes> = ({
             : <Avatar className={classes.avatar} src={userInfo?.avatarUrl} />
       }
       {
-        isLoading
+        !userInfo
           ? <Skeleton animation="wave" variant="rect" width={100} height={20} className={classes.skeleton} />
           : (
             <Typography variant="h5" className={classes.name}>
@@ -144,7 +143,7 @@ const ProfileInfo: React.FC<PropTypes> = ({
       }
       <div className={classes.profileMenu}>
         {
-          isLoading
+          !userInfo
             ? (
               <>
                 <Skeleton animation="wave" variant="rect" width={170} height={20} className={classes.skeleton} />
diff --git a/src/pages/ProfilePage/ProfilePage.tsx b/src/pages/ProfilePage/ProfilePage.tsx
index ae94b9f..4769999 100644
--- a/src/pages/ProfilePage/ProfilePage.tsx
+++ b/src/pages/ProfilePage/ProfilePage.tsx
@@ -1,59 +1,41 @@
-import React, { useState, useEffect } from 'react';
+import React, { useEffect, useCallback } from 'react';
 import { useHistory, useParams } from 'react-router-dom';
-import { User, Poll } from 'which-types';
+import { Poll } from 'which-types';
 import { Container } from '@material-ui/core';
 
 import ProfileInfo from './ProfileInfo';
 import Feed from '../../components/Feed/Feed';
-import { get } from '../../requests';
 import { useAuth } from '../../hooks/useAuth';
+import { useUser, useProfile } from '../../hooks/APIClient';
 
 
 const ProfilePage: React.FC = () => {
-  const [userInfo, setUserInfo] = useState<User>();
-  const [polls, setPolls] = useState<Poll[]>([]);
-  const [totalVotes, setTotalVotes] = useState<number>(0);
-  const [isInfoLoading, setIsInfoLoading] = useState(false);
-  const [isPollsLoading, setIsPollsLoading] = useState(false);
   const history = useHistory();
   const { username } = useParams();
   const { user } = useAuth();
 
+  const { data: userInfo, mutate: setUserInfo } = useUser(username);
+  const { data: polls, mutate: fetchPolls } = useProfile(userInfo?._id);
+
   useEffect(() => {
-    setIsInfoLoading(true);
+    fetchPolls();
+  }, [userInfo, fetchPolls])
 
-    const redirect = () => {
+  useEffect(() => {
+    if (!username) {
       if (user) history.push(`/profile/${user.username}`);
       else history.push('/login');
     };
+  }, [username, history, user]);
 
-    if (username) {
-      get(`/users?username=${username}`).then(response => {
-        if (!response.data.length) redirect(); // TODO: handle this case
-        setUserInfo(response.data[0]);
-        setIsInfoLoading(false);
-      }).catch(() => redirect());
-    } else redirect();
-  }, [username, user, history]);
-
-
-  useEffect(() => {
-    if (userInfo?._id) {
-      setIsPollsLoading(true);
 
-      get(`/profiles/${userInfo._id}`).then(response => {
-        setIsPollsLoading(false);
-        setPolls([]);
-        setPolls(response.data);
-        setTotalVotes(response.data.reduce(
-          (total: number, current: Poll) => {
-            const { left, right } = current.contents;
-            return total + left.votes + right.votes;
-          }, 0
-        ));
-      });
-    }
-  }, [userInfo]);
+  const totalVotes = useCallback(
+    polls.reduce(
+      (total: number, current: Poll) => {
+        const { left, right } = current.contents;
+        return total + left.votes + right.votes;
+      }, 0
+    ), [polls]);
 
   return (
     <Container maxWidth="sm" disableGutters>
@@ -62,9 +44,8 @@ const ProfilePage: React.FC = () => {
         setUserInfo={setUserInfo}
         savedPolls={polls.length}
         totalVotes={totalVotes}
-        isLoading={isInfoLoading}
       />
-      {isPollsLoading ? <Feed polls={[]} /> : (polls.length > 0 && <Feed polls={polls} />)}
+      <Feed polls={polls} />
     </Container>
   );
 };
-- 
cgit v1.2.3


From 359ec6a68ea92b3d1eecf020742157eb3be90b9f Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Sun, 9 Aug 2020 21:17:33 +0300
Subject: feat: add useFeed hook

---
 src/pages/FeedPage/FeedPage.tsx       | 18 +++++-------------
 src/pages/ProfilePage/ProfilePage.tsx |  6 +-----
 2 files changed, 6 insertions(+), 18 deletions(-)

(limited to 'src/pages')

diff --git a/src/pages/FeedPage/FeedPage.tsx b/src/pages/FeedPage/FeedPage.tsx
index 0b7d44a..8e7fb55 100644
--- a/src/pages/FeedPage/FeedPage.tsx
+++ b/src/pages/FeedPage/FeedPage.tsx
@@ -1,32 +1,24 @@
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import { Poll } from 'which-types';
 import { Container } from '@material-ui/core/';
 
 import Feed from '../../components/Feed/Feed';
-import { get } from '../../requests';
 import PollSubmission from './PollSubmission';
 import { useAuth } from '../../hooks/useAuth';
+import { useFeed } from '../../hooks/APIClient';
 
 const FeedPage: React.FC = () => {
-  const [polls, setPolls] = useState<Poll[]>([]);
+  const { data, mutate } = useFeed();
   const { isAuthenticated } = useAuth();
 
-  useEffect(() => {
-    get('/feed').then(response => {
-      setPolls(response.data);
-    });
-  }, []);
-
   const addPoll = (poll: Poll): void => {
-    polls.unshift(poll);
-    setPolls([]);
-    setPolls(polls);
+    mutate([poll, ...data], true);
   };
 
   return (
     <Container maxWidth="sm" disableGutters>
       {isAuthenticated() && <PollSubmission addPoll={addPoll} />}
-      <Feed polls={polls} />
+      <Feed polls={data} />
     </Container>
   );
 };
diff --git a/src/pages/ProfilePage/ProfilePage.tsx b/src/pages/ProfilePage/ProfilePage.tsx
index 4769999..293b766 100644
--- a/src/pages/ProfilePage/ProfilePage.tsx
+++ b/src/pages/ProfilePage/ProfilePage.tsx
@@ -15,11 +15,7 @@ const ProfilePage: React.FC = () => {
   const { user } = useAuth();
 
   const { data: userInfo, mutate: setUserInfo } = useUser(username);
-  const { data: polls, mutate: fetchPolls } = useProfile(userInfo?._id);
-
-  useEffect(() => {
-    fetchPolls();
-  }, [userInfo, fetchPolls])
+  const { data: polls } = useProfile(userInfo?._id);
 
   useEffect(() => {
     if (!username) {
-- 
cgit v1.2.3


From fd6e663a1bcc43cfc49bda99ccbfab380489324b Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Mon, 10 Aug 2020 00:02:24 +0300
Subject: feat!: add useLocalStorage hook

---
 src/pages/FeedPage/FeedPage.tsx       |  2 +-
 src/pages/HomePage/HomePage.tsx       |  4 ++--
 src/pages/Page.tsx                    | 12 ++++++------
 src/pages/ProfilePage/ProfileInfo.tsx |  7 +++----
 src/pages/ProfilePage/ProfilePage.tsx |  6 ++++--
 5 files changed, 16 insertions(+), 15 deletions(-)

(limited to 'src/pages')

diff --git a/src/pages/FeedPage/FeedPage.tsx b/src/pages/FeedPage/FeedPage.tsx
index 8e7fb55..da0fb2a 100644
--- a/src/pages/FeedPage/FeedPage.tsx
+++ b/src/pages/FeedPage/FeedPage.tsx
@@ -17,7 +17,7 @@ const FeedPage: React.FC = () => {
 
   return (
     <Container maxWidth="sm" disableGutters>
-      {isAuthenticated() && <PollSubmission addPoll={addPoll} />}
+      {isAuthenticated && <PollSubmission addPoll={addPoll} />}
       <Feed polls={data} />
     </Container>
   );
diff --git a/src/pages/HomePage/HomePage.tsx b/src/pages/HomePage/HomePage.tsx
index 17e377a..b1dc506 100644
--- a/src/pages/HomePage/HomePage.tsx
+++ b/src/pages/HomePage/HomePage.tsx
@@ -92,7 +92,7 @@ const HomePage: React.FC = () => {
         Here you can share your thougts about Which with us!
         Note that you can ony leave feedback once per application version (there will be plenty of them later).
       </p>
-      {isAuthenticated() ? <ReviewForm /> : (
+      {isAuthenticated ? <ReviewForm /> : (
         <>
           <p> You must be authorized to leave feedback.</p>
           <Button
@@ -142,7 +142,7 @@ const HomePage: React.FC = () => {
                 <Button variant="contained" color="primary" size="large" onClick={handleLetsGo}>
                   {'let\'s go!'}
                 </Button>
-                {!isAuthenticated() && (
+                {!isAuthenticated && (
                   <Button
                     variant="outlined"
                     color="primary"
diff --git a/src/pages/Page.tsx b/src/pages/Page.tsx
index 49c941a..a77a98e 100644
--- a/src/pages/Page.tsx
+++ b/src/pages/Page.tsx
@@ -5,12 +5,12 @@ import { SnackbarProvider } from 'notistack';
 import { Switch, Route } from 'react-router-dom';
 import Loading from '../components/Loading/Loading';
 
-const ProfilePage = React.lazy(() => import( './ProfilePage/ProfilePage'));
-const FeedPage = React.lazy(() => import( './FeedPage/FeedPage'));
-const LoginPage = React.lazy(() => import( './LoginPage/LoginPage'));
-const RegistrationPage = React.lazy(() => import( './RegistrationPage/RegistrationPage'));
-const HomePage = React.lazy(() => import( './HomePage/HomePage'));
-const NotificationsPage = React.lazy(() => import( './NotificationsPage/NotificationsPage'));
+const ProfilePage = React.lazy(() => import('./ProfilePage/ProfilePage'));
+const FeedPage = React.lazy(() => import('./FeedPage/FeedPage'));
+const LoginPage = React.lazy(() => import('./LoginPage/LoginPage'));
+const RegistrationPage = React.lazy(() => import('./RegistrationPage/RegistrationPage'));
+const HomePage = React.lazy(() => import('./HomePage/HomePage'));
+const NotificationsPage = React.lazy(() => import('./NotificationsPage/NotificationsPage'));
 
 
 const useStyles = makeStyles(theme => ({
diff --git a/src/pages/ProfilePage/ProfileInfo.tsx b/src/pages/ProfilePage/ProfileInfo.tsx
index 8b1447a..9eee4c1 100644
--- a/src/pages/ProfilePage/ProfileInfo.tsx
+++ b/src/pages/ProfilePage/ProfileInfo.tsx
@@ -86,7 +86,7 @@ const ProfileInfo: React.FC<PropTypes> = ({
 }) => {
   const classes = useStyles();
   const [input, setInput] = useState(false);
-  const { setUser } = useAuth();
+  const { user } = useAuth();
   const dateSince = new Date(userInfo?.createdAt || '').toLocaleDateString();
 
   const handleClick = () => {
@@ -94,10 +94,9 @@ const ProfileInfo: React.FC<PropTypes> = ({
   };
 
   const patchAvatar = (url: string) => {
-    const id = localStorage.getItem('userId');
+    const id = user?._id;
     patch(`/users/${id}`, { avatarUrl: url }).then(res => {
       setUserInfo(res.data);
-      setUser(res.data);
     });
   };
 
@@ -106,7 +105,7 @@ const ProfileInfo: React.FC<PropTypes> = ({
       {
         !userInfo
           ? <Skeleton animation="wave" variant="circle" width={150} height={150} className={classes.avatar} />
-          : userInfo?._id === localStorage.getItem('userId')
+          : userInfo?._id === user?._id
             ? (
               <div>
                 <MoreMenu />
diff --git a/src/pages/ProfilePage/ProfilePage.tsx b/src/pages/ProfilePage/ProfilePage.tsx
index 293b766..9e00784 100644
--- a/src/pages/ProfilePage/ProfilePage.tsx
+++ b/src/pages/ProfilePage/ProfilePage.tsx
@@ -21,7 +21,7 @@ const ProfilePage: React.FC = () => {
     if (!username) {
       if (user) history.push(`/profile/${user.username}`);
       else history.push('/login');
-    };
+    }
   }, [username, history, user]);
 
 
@@ -31,7 +31,9 @@ const ProfilePage: React.FC = () => {
         const { left, right } = current.contents;
         return total + left.votes + right.votes;
       }, 0
-    ), [polls]);
+    ),
+    [polls]
+  );
 
   return (
     <Container maxWidth="sm" disableGutters>
-- 
cgit v1.2.3


From dfa6f0a8d1415539e1ff6a3ca848627bbe87b470 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Mon, 10 Aug 2020 00:19:17 +0300
Subject: fix: show Feed loading correctly

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

(limited to 'src/pages')

diff --git a/src/pages/ProfilePage/ProfilePage.tsx b/src/pages/ProfilePage/ProfilePage.tsx
index 9e00784..db27d25 100644
--- a/src/pages/ProfilePage/ProfilePage.tsx
+++ b/src/pages/ProfilePage/ProfilePage.tsx
@@ -5,6 +5,7 @@ import { Container } from '@material-ui/core';
 
 import ProfileInfo from './ProfileInfo';
 import Feed from '../../components/Feed/Feed';
+import Loading from '../../components/Loading/Loading';
 import { useAuth } from '../../hooks/useAuth';
 import { useUser, useProfile } from '../../hooks/APIClient';
 
@@ -15,7 +16,7 @@ const ProfilePage: React.FC = () => {
   const { user } = useAuth();
 
   const { data: userInfo, mutate: setUserInfo } = useUser(username);
-  const { data: polls } = useProfile(userInfo?._id);
+  const { data: polls, isValidating } = useProfile(userInfo?._id);
 
   useEffect(() => {
     if (!username) {
@@ -43,7 +44,10 @@ const ProfilePage: React.FC = () => {
         savedPolls={polls.length}
         totalVotes={totalVotes}
       />
-      <Feed polls={polls} />
+      {!polls.length && isValidating
+        ? <Loading />
+        : <Feed polls={polls} />
+      }
     </Container>
   );
 };
-- 
cgit v1.2.3


From 7ba15a22d1bd57e7c26ff2d5fccf5505aaf8619e Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Mon, 10 Aug 2020 00:28:39 +0300
Subject: refactor: move pages -> containers

---
 src/pages/FeedPage/FeedPage.tsx                   |  27 ---
 src/pages/FeedPage/PollSubmission.tsx             |  92 ----------
 src/pages/FeedPage/PollSubmissionImage.tsx        |  87 ----------
 src/pages/FeedPage/types.ts                       |   7 -
 src/pages/HomePage/HomePage.tsx                   | 203 ----------------------
 src/pages/HomePage/ReviewForm.tsx                 |  74 --------
 src/pages/LoginPage/LoginPage.tsx                 | 103 -----------
 src/pages/NotificationsPage/NotificationsPage.tsx |  23 ---
 src/pages/Page.tsx                                |  59 -------
 src/pages/ProfilePage/Highlight.tsx               |  39 -----
 src/pages/ProfilePage/MoreMenu.tsx                |  72 --------
 src/pages/ProfilePage/ProfileInfo.tsx             | 166 ------------------
 src/pages/ProfilePage/ProfilePage.tsx             |  55 ------
 src/pages/RegistrationPage/RegistrationPage.tsx   |  96 ----------
 14 files changed, 1103 deletions(-)
 delete mode 100644 src/pages/FeedPage/FeedPage.tsx
 delete mode 100644 src/pages/FeedPage/PollSubmission.tsx
 delete mode 100644 src/pages/FeedPage/PollSubmissionImage.tsx
 delete mode 100644 src/pages/FeedPage/types.ts
 delete mode 100644 src/pages/HomePage/HomePage.tsx
 delete mode 100644 src/pages/HomePage/ReviewForm.tsx
 delete mode 100644 src/pages/LoginPage/LoginPage.tsx
 delete mode 100644 src/pages/NotificationsPage/NotificationsPage.tsx
 delete mode 100644 src/pages/Page.tsx
 delete mode 100644 src/pages/ProfilePage/Highlight.tsx
 delete mode 100644 src/pages/ProfilePage/MoreMenu.tsx
 delete mode 100644 src/pages/ProfilePage/ProfileInfo.tsx
 delete mode 100644 src/pages/ProfilePage/ProfilePage.tsx
 delete mode 100644 src/pages/RegistrationPage/RegistrationPage.tsx

(limited to 'src/pages')

diff --git a/src/pages/FeedPage/FeedPage.tsx b/src/pages/FeedPage/FeedPage.tsx
deleted file mode 100644
index da0fb2a..0000000
--- a/src/pages/FeedPage/FeedPage.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from 'react';
-import { Poll } from 'which-types';
-import { Container } from '@material-ui/core/';
-
-import Feed from '../../components/Feed/Feed';
-import PollSubmission from './PollSubmission';
-import { useAuth } from '../../hooks/useAuth';
-import { useFeed } from '../../hooks/APIClient';
-
-const FeedPage: React.FC = () => {
-  const { data, mutate } = useFeed();
-  const { isAuthenticated } = useAuth();
-
-  const addPoll = (poll: Poll): void => {
-    mutate([poll, ...data], true);
-  };
-
-  return (
-    <Container maxWidth="sm" disableGutters>
-      {isAuthenticated && <PollSubmission addPoll={addPoll} />}
-      <Feed polls={data} />
-    </Container>
-  );
-};
-
-export default FeedPage;
-
diff --git a/src/pages/FeedPage/PollSubmission.tsx b/src/pages/FeedPage/PollSubmission.tsx
deleted file mode 100644
index 347eecc..0000000
--- a/src/pages/FeedPage/PollSubmission.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import React, { useState } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import Collapse from '@material-ui/core/Collapse';
-import {
-  Button,
-  Card,
-  ClickAwayListener,
-  Divider
-} from '@material-ui/core';
-import { Poll, Which } from 'which-types';
-import { useSnackbar } from 'notistack';
-import PollSubmissionImage from './PollSubmissionImage';
-import UserStrip from '../../components/UserStrip/UserStrip';
-import { post } from '../../requests';
-import { Contents } from './types';
-import { useAuth } from '../../hooks/useAuth';
-
-interface PropTypes{
-  addPoll: (poll: Poll) => void;
-}
-
-const useStyles = makeStyles(theme => ({
-  root: {
-    marginBottom: theme.spacing(4)
-  },
-  images: {
-    height: theme.spacing(50),
-    display: 'flex'
-  }
-}));
-
-const emptyContents: Contents = {
-  left: { url: '' },
-  right: { url: '' }
-};
-
-const PollSubmission: React.FC<PropTypes> = ({ addPoll }) => {
-  const classes = useStyles();
-  const [expanded, setExpanded] = useState(false);
-  const [contents, setContents] = useState<Contents>(emptyContents);
-  const { enqueueSnackbar } = useSnackbar();
-  const { user } = useAuth();
-
-  const readyToSubmit = contents.left.url && contents.right.url;
-
-  const setUrl = (which: Which) => (url: string): void => {
-    setContents({ ...contents, [which]: { url } });
-  };
-
-  const handleClickAway = () => {
-    setExpanded(false);
-  };
-
-  const handleClick = () => {
-    if (expanded && readyToSubmit) {
-      post('/polls/', { contents }).then(response => {
-        addPoll(response.data);
-        enqueueSnackbar('Your poll has been successfully created!', {
-          variant: 'success'
-        });
-      });
-      setContents({ ...emptyContents });
-    }
-    setExpanded(!expanded);
-  };
-
-  return (
-    <ClickAwayListener onClickAway={handleClickAway}>
-      <Card className={classes.root}>
-        <Collapse in={expanded} timeout="auto" unmountOnExit>
-          {user && <UserStrip user={user} info="" />}
-          <Divider />
-          <div className={classes.images}>
-            <PollSubmissionImage url={contents.left.url} setUrl={setUrl('left')} />
-            <PollSubmissionImage url={contents.right.url} setUrl={setUrl('right')} />
-          </div>
-        </Collapse>
-        <Button
-          color="primary"
-          disabled={expanded && !readyToSubmit}
-          variant={expanded ? 'contained' : 'outlined'}
-          onClick={handleClick}
-          fullWidth
-        >
-          {expanded ? 'Submit' : 'Create a Poll'}
-        </Button>
-      </Card>
-    </ClickAwayListener>
-  );
-};
-
-export default PollSubmission;
diff --git a/src/pages/FeedPage/PollSubmissionImage.tsx b/src/pages/FeedPage/PollSubmissionImage.tsx
deleted file mode 100644
index 8835989..0000000
--- a/src/pages/FeedPage/PollSubmissionImage.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import React, { useState } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import CloudUploadIcon from '@material-ui/icons/CloudUpload';
-import { CardActionArea, CardMedia, Typography } from '@material-ui/core';
-import CancelOutlinedIcon from '@material-ui/icons/CancelOutlined';
-
-import UploadImage from '../../components/UploadImage/UploadImage';
-
-interface PropTypes {
-  url: string;
-  setUrl: (url: string) => void;
-}
-
-const useStyles = makeStyles({
-  root: {
-    display: 'flex',
-    justifyContent: 'center',
-    flexDirection: 'column',
-    alignItems: 'center'
-  },
-  clearIcon: {
-    opacity: '.5',
-    fontSize: 50
-  },
-  media: {
-    height: '100%',
-    width: '100%',
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center'
-  },
-  text: {
-    textAlign: 'center'
-  }
-});
-
-
-const PollSubmissionImage: React.FC<PropTypes> = ({ url, setUrl }) => {
-  const classes = useStyles();
-  const [isModalOpen, setIsModalOpen] = useState(false);
-  const [isMediaHover, setIsMediaHover] = useState(false);
-
-  const handleClick = (): void => {
-    if (!isModalOpen) {
-      if (url) setUrl('');
-      else setIsModalOpen(!isModalOpen);
-    }
-  };
-
-  const handleMouseEnter = (): void => {
-    setIsMediaHover(true);
-  };
-
-  const handleMouseLeave = (): void => {
-    setIsMediaHover(false);
-  };
-
-
-  const Upload = (
-    <>
-      <CloudUploadIcon fontSize="large" color="primary" />
-      <Typography variant="h5" className={classes.text}> Upload an image </Typography>
-    </>
-  );
-
-  const Media = (
-    <CardMedia
-      image={url}
-      className={classes.media}
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
-    >
-      {isMediaHover && <CancelOutlinedIcon className={classes.clearIcon} />}
-    </CardMedia>
-  );
-
-  return (
-    <>
-      <CardActionArea onClick={handleClick} className={classes.root}>
-        {url ? Media : Upload}
-      </CardActionArea>
-      <UploadImage isOpen={isModalOpen} setIsOpen={setIsModalOpen} callback={setUrl} />
-    </>
-  );
-};
-
-export default PollSubmissionImage;
diff --git a/src/pages/FeedPage/types.ts b/src/pages/FeedPage/types.ts
deleted file mode 100644
index 24ace4e..0000000
--- a/src/pages/FeedPage/types.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export interface ImageData {
-  url: string;
-}
-export interface Contents {
-  left: ImageData;
-  right: ImageData;
-}
diff --git a/src/pages/HomePage/HomePage.tsx b/src/pages/HomePage/HomePage.tsx
deleted file mode 100644
index b1dc506..0000000
--- a/src/pages/HomePage/HomePage.tsx
+++ /dev/null
@@ -1,203 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { useHistory } from 'react-router-dom';
-import {
-  Typography,
-  Divider,
-  Grid,
-  Button,
-  Link,
-  useMediaQuery
-} from '@material-ui/core/';
-import { makeStyles, useTheme } from '@material-ui/core/styles';
-import TrendingUpIcon from '@material-ui/icons/TrendingUp';
-import { Rating } from '@material-ui/lab';
-import { Feedback } from 'which-types';
-
-import { useAuth } from '../../hooks/useAuth';
-import { get } from '../../requests';
-import ReviewCard from '../../components/ReviewCard/ReviewCard';
-import ReviewForm from './ReviewForm';
-
-const useStyles = makeStyles(theme => ({
-  root: {
-    overflow: 'hidden',
-    padding: theme.spacing(0, 2)
-  },
-  logo: {
-    width: theme.spacing(20),
-    height: theme.spacing(20)
-  },
-  score: {
-    fontWeight: 'bold'
-  },
-  signup: {
-    marginLeft: theme.spacing(2)
-  },
-  reviews: {
-    [theme.breakpoints.up('md')]: {
-      padding: theme.spacing(0, 10)
-    }
-  }
-}));
-
-const HomePage: React.FC = () => {
-  const [feedbacks, setFeedbacks] = useState<Feedback[]>([]);
-  const classes = useStyles();
-  const history = useHistory();
-  const { isAuthenticated, user } = useAuth();
-  const theme = useTheme();
-  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
-
-  const rating = feedbacks.length && feedbacks.reduce(
-    (acc: number, feedback: Feedback) => acc + feedback.score,
-    0
-  ) / feedbacks.length;
-
-  useEffect(() => {
-    get('/feedback').then(response => {
-      setFeedbacks(response.data);
-    });
-  }, []);
-
-  const handleLetsGo = () => {
-    history.push('/feed');
-  };
-
-  const handleSignUp = () => {
-    history.push('/registration');
-  };
-
-  const GithubLink = <Link href="https://github.com/which-ecosystem">GitHub</Link>;
-  const TypescriptLink = <Link href="https://www.typescriptlang.org/">Typescript</Link>;
-  const ReactLink = <Link href="https://reactjs.org/">React</Link>;
-  const FeathersLink = <Link href="https://feathersjs.com">Feathers</Link>;
-  const MUILink = <Link href="https://material-ui.com">Material-UI</Link>;
-  const EmailLink = <Link href="mailto: eug-vs@keemail.me">eug-vs@keemail.me</Link>;
-
-  const Reviews = (
-    <div className={classes.reviews}>
-      {feedbacks.map(feedback => <ReviewCard feedback={feedback} />)}
-    </div>
-  );
-
-  const FeedbackSection = feedbacks.findIndex((feedback: Feedback) => feedback.author._id === user?._id) >= 0 ? (
-    <p>
-      You have already left feedback for this version.
-      If you have more to say, please open GitHub issue or contact us directly via email: {EmailLink}.
-      Alternatively, you can just wait for another application patch to come out.
-    </p>
-  ) : (
-    <>
-      <p>
-        Here you can share your thougts about Which with us!
-        Note that you can ony leave feedback once per application version (there will be plenty of them later).
-      </p>
-      {isAuthenticated ? <ReviewForm /> : (
-        <>
-          <p> You must be authorized to leave feedback.</p>
-          <Button
-            variant="outlined"
-            color="primary"
-            onClick={handleSignUp}
-          >
-            sign in
-          </Button>
-        </>
-      )}
-    </>
-  );
-
-  return (
-    <div className={classes.root}>
-      <Grid container spacing={4}>
-        <Grid item xs={12} md={4}>
-          <Grid container direction="column" spacing={1} alignItems="center">
-            <Grid item>
-              <img src={`${process.env.PUBLIC_URL}/which-logo-512.png`} alt="logo" className={classes.logo} />
-            </Grid>
-            <Grid item>
-              {rating !== 0 && <Rating value={rating} readOnly size="large" />}
-            </Grid>
-            <Grid item>
-              {rating !== 0 && (
-                <Typography variant="h5" className={classes.score}>
-                  User score: {rating.toFixed(1)}
-                </Typography>
-              )}
-            </Grid>
-          </Grid>
-          {isMobile || Reviews}
-        </Grid>
-        <Grid item xs={12} md={5}>
-          <Grid container direction="column" spacing={6}>
-            <Grid item>
-              <Typography variant="h4"> Which one to choose? </Typography>
-              <Divider />
-              <Typography>
-                <p>
-                  Have you ever found yourself stuck between two options, not being able to choose any?
-                  This is exactly the problem we are going to solve!
-                </p>
-                <p>Share your minor everyday uncertainties with the whole world and see what others think!</p>
-                <Button variant="contained" color="primary" size="large" onClick={handleLetsGo}>
-                  {'let\'s go!'}
-                </Button>
-                {!isAuthenticated && (
-                  <Button
-                    variant="outlined"
-                    color="primary"
-                    size="large"
-                    className={classes.signup}
-                    onClick={handleSignUp}
-                  >
-                    sign up
-                  </Button>
-                )}
-              </Typography>
-            </Grid>
-            <Grid item>
-              <Typography variant="h4"> About the project </Typography>
-              <Divider />
-              <Typography>
-                <p>
-                  The project is written in {TypescriptLink} and features {ReactLink}, {FeathersLink}, and {MUILink}.
-                  It is currently open-source and you can visit our {GithubLink} (make sure to star our repositories)!
-                </p>
-                <p>
-                  We encourage any developer to check it out. Feel free to open issues and create Pull Requests!
-                </p>
-                <p>
-                  All the development process is being tracked on the KanBan board (thanks GitHub).
-                  You can always check it to see what is the current state of the project.
-                </p>
-                <Button
-                  variant="outlined"
-                  color="primary"
-                  startIcon={<TrendingUpIcon />}
-                  href="https://github.com/orgs/which-ecosystem/projects/1"
-                >
-                  track our progress
-                </Button>
-              </Typography>
-            </Grid>
-            <Grid item>
-              <Typography variant="h4"> Leave feedback </Typography>
-              <Divider />
-              <Typography>
-                {FeedbackSection}
-              </Typography>
-            </Grid>
-            {isMobile && (
-              <Grid item>
-                {Reviews}
-              </Grid>
-            )}
-          </Grid>
-        </Grid>
-      </Grid>
-    </div>
-  );
-};
-
-export default HomePage;
-
diff --git a/src/pages/HomePage/ReviewForm.tsx b/src/pages/HomePage/ReviewForm.tsx
deleted file mode 100644
index b626ce2..0000000
--- a/src/pages/HomePage/ReviewForm.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import React, { useState } from 'react';
-import { useHistory } from 'react-router-dom';
-import { makeStyles } from '@material-ui/core/styles';
-import { TextField, Button } from '@material-ui/core';
-import { Rating } from '@material-ui/lab';
-import { useSnackbar } from 'notistack';
-
-import { post } from '../../requests';
-
-const version = 'v1.0.0';
-
-const useStyles = makeStyles(theme => ({
-  root: {
-    display: 'flex',
-    flexDirection: 'column'
-  },
-  textField: {
-    margin: theme.spacing(2, 0)
-  }
-}));
-
-const ReviewForm: React.FC = () => {
-  const [contents, setContents] = useState<string>('');
-  const [score, setScore] = useState<number>(0);
-  const classes = useStyles();
-  const history = useHistory();
-  const { enqueueSnackbar } = useSnackbar();
-
-  const handleSubmit = (): void => {
-    if (score) {
-      post('/feedback', { contents, score, version }).then(() => {
-        enqueueSnackbar('Your feedback has been submitted!', {
-          variant: 'success'
-        });
-        history.push('/feed');
-      });
-    }
-  };
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
-    setContents(event.target?.value || '');
-  };
-
-  const handleChangeRating = (event: React.ChangeEvent<Record<string, unknown>>, newScore: number | null): void => {
-    setScore(newScore || 0);
-  };
-
-  return (
-    <div className={classes.root}>
-      <Rating value={score} onChange={handleChangeRating} size="large" />
-      <TextField
-        value={contents}
-        onChange={handleChange}
-        label="Feedback"
-        variant="outlined"
-        className={classes.textField}
-        rows={4}
-        multiline
-      />
-      <div>
-        <Button
-          variant="contained"
-          color="primary"
-          size="large"
-          onClick={handleSubmit}
-        >
-          submit
-        </Button>
-      </div>
-    </div>
-  );
-};
-
-export default ReviewForm;
diff --git a/src/pages/LoginPage/LoginPage.tsx b/src/pages/LoginPage/LoginPage.tsx
deleted file mode 100644
index 335cbb1..0000000
--- a/src/pages/LoginPage/LoginPage.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-import React, { useState, useRef } from 'react';
-import { useHistory } from 'react-router-dom';
-import { makeStyles } from '@material-ui/core/styles';
-import {
-  TextField,
-  Button,
-  FormControlLabel,
-  Switch
-} from '@material-ui/core';
-import { useAuth } from '../../hooks/useAuth';
-
-const useStyles = makeStyles(theme => ({
-  root: {
-    '& > *': {
-      margin: theme.spacing(1),
-      width: theme.spacing(35)
-    },
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    textAlign: 'center'
-  },
-  formHeader: {
-    textAlign: 'center',
-    fontSize: 25
-  },
-  formTransfer: {
-    display: 'flex',
-    justifyContent: 'center'
-  },
-  transferButton: {
-    marginLeft: 10,
-    color: 'green',
-    cursor: 'pointer'
-  }
-}));
-
-const LoginPage: React.FC = () => {
-  const [error, setError] = useState<boolean>(false);
-  const [remember, setRemember] = useState<boolean>(true);
-  const classes = useStyles();
-  const nameRef = useRef<HTMLInputElement>();
-  const passwordRef = useRef<HTMLInputElement>();
-  const { login } = useAuth();
-  const history = useHistory();
-
-  const handleCheck = () => {
-    setRemember(!remember);
-  };
-
-  const handleSubmit = async () => {
-    const name = nameRef.current?.value?.toLowerCase();
-    const password = passwordRef.current?.value;
-    if (name && password) {
-      login(name, password, remember).then(success => {
-        if (success) history.push(`/profile/${name}`);
-        else setError(true);
-      });
-    }
-  };
-
-  const handleRegistration = () => {
-    history.push('/registration');
-  };
-
-  return (
-    <>
-      <div className={classes.formHeader}>Sign In</div>
-      <form className={classes.root} noValidate autoComplete="off">
-        <TextField
-          inputRef={nameRef}
-          error={error}
-          label="Login"
-        />
-        <TextField
-          inputRef={passwordRef}
-          error={error}
-          helperText={error && 'Invalid credentials'}
-          label="Password"
-          type="password"
-        />
-        <FormControlLabel
-          control={<Switch color="primary" onClick={handleCheck} checked={remember} size="small" />}
-          label="Remember me"
-        />
-        <Button variant="contained" onClick={handleSubmit}>submit</Button>
-      </form>
-      <div className={classes.formTransfer}>
-        <div>{'Don\'t have an account?'}</div>
-        <span
-          onClick={handleRegistration}
-          className={classes.transferButton}
-          role="presentation"
-        >
-          Sign up
-        </span>
-      </div>
-    </>
-  );
-};
-
-export default LoginPage;
-
diff --git a/src/pages/NotificationsPage/NotificationsPage.tsx b/src/pages/NotificationsPage/NotificationsPage.tsx
deleted file mode 100644
index 064fbd4..0000000
--- a/src/pages/NotificationsPage/NotificationsPage.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import { Typography } from '@material-ui/core';
-
-const useStyles = makeStyles(theme => ({
-  root: {
-    marginTop: theme.spacing(25),
-    textAlign: 'center'
-  }
-}));
-
-const NotificationsPage: React.FC = () => {
-  const classes = useStyles();
-
-  return (
-    <Typography variant="h4" className={classes.root}>
-      Sorry, this page is being constructed yet.
-    </Typography>
-  );
-};
-
-export default NotificationsPage;
-
diff --git a/src/pages/Page.tsx b/src/pages/Page.tsx
deleted file mode 100644
index a77a98e..0000000
--- a/src/pages/Page.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import React, { Suspense } from 'react';
-import { makeStyles, useTheme } from '@material-ui/core/styles';
-import { useMediaQuery } from '@material-ui/core';
-import { SnackbarProvider } from 'notistack';
-import { Switch, Route } from 'react-router-dom';
-import Loading from '../components/Loading/Loading';
-
-const ProfilePage = React.lazy(() => import('./ProfilePage/ProfilePage'));
-const FeedPage = React.lazy(() => import('./FeedPage/FeedPage'));
-const LoginPage = React.lazy(() => import('./LoginPage/LoginPage'));
-const RegistrationPage = React.lazy(() => import('./RegistrationPage/RegistrationPage'));
-const HomePage = React.lazy(() => import('./HomePage/HomePage'));
-const NotificationsPage = React.lazy(() => import('./NotificationsPage/NotificationsPage'));
-
-
-const useStyles = makeStyles(theme => ({
-  root: {
-    [theme.breakpoints.down('sm')]: {
-      margin: theme.spacing(2, 0, 12, 0)
-    },
-    [theme.breakpoints.up('md')]: {
-      margin: theme.spacing(15, 5, 8, 5)
-    }
-  }
-}));
-
-
-const Page: React.FC = () => {
-  const classes = useStyles();
-  const theme = useTheme();
-  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
-
-  return (
-    <SnackbarProvider
-      maxSnack={3}
-      anchorOrigin={{
-        vertical: isMobile ? 'top' : 'bottom',
-        horizontal: 'right'
-      }}
-    >
-      <div className={classes.root}>
-        <Suspense fallback={<Loading />}>
-          <Switch>
-            <Route exact path="/" component={HomePage} />
-            <Route exact path="/login" component={LoginPage} />
-            <Route exact path="/registration" component={RegistrationPage} />
-            <Route exact path="/feed" component={FeedPage} />
-            <Route exact path="/notifications" component={NotificationsPage} />
-            <Route path="/profile/:username" component={ProfilePage} />
-          </Switch>
-        </Suspense>
-      </div>
-    </SnackbarProvider>
-  );
-};
-
-
-export default Page;
-
diff --git a/src/pages/ProfilePage/Highlight.tsx b/src/pages/ProfilePage/Highlight.tsx
deleted file mode 100644
index ebc3f56..0000000
--- a/src/pages/ProfilePage/Highlight.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-
-interface PropTypes {
-  text: string;
-  value: string | number;
-}
-
-const useStyles = makeStyles({
-  root: {
-    position: 'relative'
-  },
-  menuButton: {
-    width: 200,
-    height: 50,
-    textAlign: 'center'
-  },
-  menuNumber: {
-    fontWeight: 800,
-    color: 'black'
-  },
-  menuText: {
-    color: 'darkgray'
-  }
-});
-
-
-const Highlight: React.FC<PropTypes> = ({ text, value }) => {
-  const classes = useStyles();
-
-  return (
-    <div className={classes.menuButton}>
-      <div className={classes.menuNumber}>{value}</div>
-      <div className={classes.menuText}>{text}</div>
-    </div>
-  );
-};
-
-export default Highlight;
diff --git a/src/pages/ProfilePage/MoreMenu.tsx b/src/pages/ProfilePage/MoreMenu.tsx
deleted file mode 100644
index 1f41879..0000000
--- a/src/pages/ProfilePage/MoreMenu.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import React from 'react';
-import { useHistory } from 'react-router-dom';
-import IconButton from '@material-ui/core/IconButton';
-import Menu from '@material-ui/core/Menu';
-import MenuItem from '@material-ui/core/MenuItem';
-import MoreHorizIcon from '@material-ui/icons/MoreHoriz';
-import { makeStyles } from '@material-ui/core';
-import { useAuth } from '../../hooks/useAuth';
-
-const ITEM_HEIGHT = 48;
-
-const useStyles = makeStyles({
-  moreMenu: {
-    position: 'absolute',
-    right: 10,
-    zIndex: 100
-  }
-});
-
-const MoreMenu: React.FC = () => {
-  const classes = useStyles();
-  const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null);
-  const { logout } = useAuth();
-  const history = useHistory();
-
-  const open = Boolean(anchorEl);
-
-  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-    setAnchorEl(event.currentTarget);
-  };
-
-  const handleLogout = () => {
-    logout();
-    history.push('/login');
-  };
-
-  const handleClose = () => {
-    setAnchorEl(null);
-  };
-
-  return (
-    <div className={classes.moreMenu}>
-      <div>
-        <IconButton
-          aria-label="more"
-          aria-controls="long-menu"
-          aria-haspopup="true"
-          onClick={handleClick}
-        >
-          <MoreHorizIcon />
-        </IconButton>
-        <Menu
-          id="long-menu"
-          anchorEl={anchorEl}
-          keepMounted
-          open={open}
-          onClose={handleClose}
-          PaperProps={{
-            style: {
-              maxHeight: ITEM_HEIGHT * 4.5,
-              width: '20ch'
-            }
-          }}
-        >
-          <MenuItem onClick={handleLogout}>Log out</MenuItem>
-        </Menu>
-      </div>
-    </div>
-  );
-};
-
-export default MoreMenu;
diff --git a/src/pages/ProfilePage/ProfileInfo.tsx b/src/pages/ProfilePage/ProfileInfo.tsx
deleted file mode 100644
index 9eee4c1..0000000
--- a/src/pages/ProfilePage/ProfileInfo.tsx
+++ /dev/null
@@ -1,166 +0,0 @@
-import React, { useState } from 'react';
-import { Avatar, Badge, Typography } from '@material-ui/core/';
-import { makeStyles } from '@material-ui/core/styles';
-import { User } from 'which-types';
-import CameraAltIcon from '@material-ui/icons/CameraAlt';
-import VerifiedIcon from '@material-ui/icons/CheckCircleOutline';
-import Skeleton from '@material-ui/lab/Skeleton';
-import MoreMenu from './MoreMenu';
-import Highlight from './Highlight';
-import UploadImage from '../../components/UploadImage/UploadImage';
-import { patch } from '../../requests';
-import { useAuth } from '../../hooks/useAuth';
-
-interface PropTypes {
-  savedPolls: number;
-  totalVotes: number;
-  userInfo: User | undefined;
-  setUserInfo: (userInfo: User) => void;
-}
-
-const useStyles = makeStyles(theme => ({
-  root: {
-    position: 'relative'
-  },
-  avatar: {
-    width: 150,
-    height: 150,
-    margin: '0 auto'
-  },
-  name: {
-    margin: theme.spacing(1, 0),
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  verified: {
-    marginLeft: theme.spacing(0.5),
-    width: theme.spacing(3),
-    height: theme.spacing(3)
-  },
-  profileMenu: {
-    display: 'flex',
-    width: '100%',
-    height: 50,
-    margin: '50px 0',
-    borderBottom: '1px solid lightgray'
-  },
-  menuButton: {
-    width: 200,
-    height: 50,
-    textAlign: 'center'
-  },
-  badge: {
-    width: theme.spacing(5),
-    height: theme.spacing(5),
-    borderRadius: '50%',
-    cursor: 'pointer',
-    background: '#d3d3d3',
-    display: 'flex',
-    alignItems: 'center',
-    '& svg': {
-      margin: '0 auto'
-    }
-  },
-  avatarContainer: {
-    position: 'relative',
-    textAlign: 'center'
-  },
-  menuNumber: {
-    fontWeight: 800,
-    color: 'black'
-  },
-  menuText: {
-    color: 'darkgray'
-  },
-  skeleton: {
-    margin: '10px auto',
-    borderRadius: 2
-  }
-
-}));
-
-
-const ProfileInfo: React.FC<PropTypes> = ({
-  savedPolls, totalVotes, setUserInfo, userInfo
-}) => {
-  const classes = useStyles();
-  const [input, setInput] = useState(false);
-  const { user } = useAuth();
-  const dateSince = new Date(userInfo?.createdAt || '').toLocaleDateString();
-
-  const handleClick = () => {
-    setInput(!input);
-  };
-
-  const patchAvatar = (url: string) => {
-    const id = user?._id;
-    patch(`/users/${id}`, { avatarUrl: url }).then(res => {
-      setUserInfo(res.data);
-    });
-  };
-
-  return (
-    <div className={classes.root}>
-      {
-        !userInfo
-          ? <Skeleton animation="wave" variant="circle" width={150} height={150} className={classes.avatar} />
-          : userInfo?._id === user?._id
-            ? (
-              <div>
-                <MoreMenu />
-                <div className={classes.avatarContainer}>
-                  <Badge
-                    overlap="circle"
-                    anchorOrigin={{
-                      vertical: 'bottom',
-                      horizontal: 'right'
-                    }}
-                    badgeContent={(
-                      <div className={classes.badge}>
-                        <CameraAltIcon onClick={handleClick} />
-                      </div>
-                    )}
-                  >
-                    <Avatar className={classes.avatar} src={userInfo?.avatarUrl} />
-                  </Badge>
-                </div>
-                <UploadImage isOpen={input} setIsOpen={setInput} callback={patchAvatar} />
-              </div>
-            )
-            : <Avatar className={classes.avatar} src={userInfo?.avatarUrl} />
-      }
-      {
-        !userInfo
-          ? <Skeleton animation="wave" variant="rect" width={100} height={20} className={classes.skeleton} />
-          : (
-            <Typography variant="h5" className={classes.name}>
-              {userInfo?.username}
-              {userInfo?.verified && <VerifiedIcon className={classes.verified} color="primary" />}
-            </Typography>
-          )
-      }
-      <div className={classes.profileMenu}>
-        {
-          !userInfo
-            ? (
-              <>
-                <Skeleton animation="wave" variant="rect" width={170} height={20} className={classes.skeleton} />
-                <Skeleton animation="wave" variant="rect" width={170} height={20} className={classes.skeleton} />
-                <Skeleton animation="wave" variant="rect" width={170} height={20} className={classes.skeleton} />
-              </>
-            )
-            : (
-              <>
-                <Highlight text="Polls" value={savedPolls} />
-                <Highlight text="Since" value={dateSince} />
-                <Highlight text="Total votes" value={totalVotes} />
-              </>
-            )
-        }
-      </div>
-    </div>
-  );
-};
-
-export default ProfileInfo;
diff --git a/src/pages/ProfilePage/ProfilePage.tsx b/src/pages/ProfilePage/ProfilePage.tsx
deleted file mode 100644
index db27d25..0000000
--- a/src/pages/ProfilePage/ProfilePage.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import React, { useEffect, useCallback } from 'react';
-import { useHistory, useParams } from 'react-router-dom';
-import { Poll } from 'which-types';
-import { Container } from '@material-ui/core';
-
-import ProfileInfo from './ProfileInfo';
-import Feed from '../../components/Feed/Feed';
-import Loading from '../../components/Loading/Loading';
-import { useAuth } from '../../hooks/useAuth';
-import { useUser, useProfile } from '../../hooks/APIClient';
-
-
-const ProfilePage: React.FC = () => {
-  const history = useHistory();
-  const { username } = useParams();
-  const { user } = useAuth();
-
-  const { data: userInfo, mutate: setUserInfo } = useUser(username);
-  const { data: polls, isValidating } = useProfile(userInfo?._id);
-
-  useEffect(() => {
-    if (!username) {
-      if (user) history.push(`/profile/${user.username}`);
-      else history.push('/login');
-    }
-  }, [username, history, user]);
-
-
-  const totalVotes = useCallback(
-    polls.reduce(
-      (total: number, current: Poll) => {
-        const { left, right } = current.contents;
-        return total + left.votes + right.votes;
-      }, 0
-    ),
-    [polls]
-  );
-
-  return (
-    <Container maxWidth="sm" disableGutters>
-      <ProfileInfo
-        userInfo={userInfo}
-        setUserInfo={setUserInfo}
-        savedPolls={polls.length}
-        totalVotes={totalVotes}
-      />
-      {!polls.length && isValidating
-        ? <Loading />
-        : <Feed polls={polls} />
-      }
-    </Container>
-  );
-};
-
-export default ProfilePage;
diff --git a/src/pages/RegistrationPage/RegistrationPage.tsx b/src/pages/RegistrationPage/RegistrationPage.tsx
deleted file mode 100644
index 18a9379..0000000
--- a/src/pages/RegistrationPage/RegistrationPage.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-import React, { useState, useRef } from 'react';
-import { useHistory } from 'react-router-dom';
-import { makeStyles } from '@material-ui/core/styles';
-import TextField from '@material-ui/core/TextField';
-import Button from '@material-ui/core/Button';
-import { post } from '../../requests';
-import { useAuth } from '../../hooks/useAuth';
-
-
-const useStyles = makeStyles(theme => ({
-  root: {
-    '& > *': {
-      margin: theme.spacing(1),
-      width: theme.spacing(35)
-    },
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    textAlign: 'center'
-  },
-  formHeader: {
-    textAlign: 'center',
-    fontSize: 25
-  },
-  formTransfer: {
-    display: 'flex',
-    justifyContent: 'center'
-  },
-  transferButton: {
-    marginLeft: 10,
-    color: 'green',
-    cursor: 'pointer'
-  }
-}));
-
-const RegistrationPage: React.FC = () => {
-  const [error, setError] = useState<boolean>(false);
-  const classes = useStyles();
-  const usernameRef = useRef<HTMLInputElement>();
-  const emailRef = useRef<HTMLInputElement>();
-  const passwordRef = useRef<HTMLInputElement>();
-  const { login } = useAuth();
-  const history = useHistory();
-
-  const handleSubmit = () => {
-    const username = usernameRef.current?.value?.toLowerCase();
-    const password = passwordRef.current?.value;
-    const email = emailRef.current?.value;
-    if (username && password) {
-      post('/users', { username, password, email })
-        .then(() => login(username, password))
-        .then(() => history.push(`/profile/${username}`));
-    } else setError(true);
-  };
-
-  const handleLogin = () => {
-    history.push('/login');
-  };
-
-  return (
-    <>
-      <div className={classes.formHeader}>Sign Up</div>
-      <form className={classes.root} noValidate autoComplete="off">
-        <TextField
-          inputRef={usernameRef}
-          label="Username"
-          error={error}
-          helperText={error && 'This field is required!'}
-          required
-        />
-        <TextField inputRef={emailRef} label="Email" />
-        <TextField
-          inputRef={passwordRef}
-          label="Password"
-          type="password"
-          required
-          error={error}
-          helperText={error && 'This field is required!'}
-        />
-        <Button variant="contained" onClick={handleSubmit}>submit</Button>
-      </form>
-      <div className={classes.formTransfer}>
-        <div>Already have an account?</div>
-        <span
-          onClick={handleLogin}
-          className={classes.transferButton}
-          role="presentation"
-        >
-          Log in
-        </span>
-      </div>
-    </>
-  );
-};
-
-export default RegistrationPage;
-- 
cgit v1.2.3