2 files changed, 29 insertions, 15 deletions
diff --git a/src/pages/ProfilePage/MoreMenu.tsx b/src/pages/ProfilePage/MoreMenu.tsx
index 4e681f5..1f41879 100644
--- a/src/pages/ProfilePage/MoreMenu.tsx
+++ b/src/pages/ProfilePage/MoreMenu.tsx
@@ -1,11 +1,11 @@
 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';
-import { useNavigate } from '../../hooks/useNavigate';
 
 const ITEM_HEIGHT = 48;
 
@@ -21,7 +21,7 @@ const MoreMenu: React.FC = () => {
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null);
   const { logout } = useAuth();
-  const { navigate } = useNavigate();
+  const history = useHistory();
 
   const open = Boolean(anchorEl);
 
@@ -31,7 +31,7 @@ const MoreMenu: React.FC = () => {
 
   const handleLogout = () => {
     logout();
-    navigate('auth');
+    history.push('/login');
   };
 
   const handleClose = () => {
diff --git a/src/pages/ProfilePage/ProfilePage.tsx b/src/pages/ProfilePage/ProfilePage.tsx
index 34c9efa..ae94b9f 100644
--- a/src/pages/ProfilePage/ProfilePage.tsx
+++ b/src/pages/ProfilePage/ProfilePage.tsx
@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import { useHistory, useParams } from 'react-router-dom';
 import { User, Poll } from 'which-types';
 import { Container } from '@material-ui/core';
 
@@ -6,28 +7,41 @@ import ProfileInfo from './ProfileInfo';
 import Feed from '../../components/Feed/Feed';
 import { get } from '../../requests';
 import { useAuth } from '../../hooks/useAuth';
-import { useNavigate } from '../../hooks/useNavigate';
 
 
 const ProfilePage: React.FC = () => {
   const [userInfo, setUserInfo] = useState<User>();
   const [polls, setPolls] = useState<Poll[]>([]);
   const [totalVotes, setTotalVotes] = useState<number>(0);
-  const { page, navigate } = useNavigate();
-  const { user } = useAuth();
   const [isInfoLoading, setIsInfoLoading] = useState(false);
   const [isPollsLoading, setIsPollsLoading] = useState(false);
+  const history = useHistory();
+  const { username } = useParams();
+  const { user } = useAuth();
 
   useEffect(() => {
-    const id = page?.id || user?._id;
     setIsInfoLoading(true);
-    setIsPollsLoading(true);
-    if (id) {
-      get(`/users/${id}`).then(response => {
-        setUserInfo(response.data);
+
+    const redirect = () => {
+      if (user) history.push(`/profile/${user.username}`);
+      else history.push('/login');
+    };
+
+    if (username) {
+      get(`/users?username=${username}`).then(response => {
+        if (!response.data.length) redirect(); // TODO: handle this case
+        setUserInfo(response.data[0]);
         setIsInfoLoading(false);
-      });
-      get(`/profiles/${id}`).then(response => {
+      }).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);
@@ -38,8 +52,8 @@ const ProfilePage: React.FC = () => {
           }, 0
         ));
       });
-    } else navigate('auth');
-  }, [navigate, page, user]);
+    }
+  }, [userInfo]);
 
   return (
     <Container maxWidth="sm" disableGutters>