feat!: create useNavigate hook

4 files changed, 42 insertions, 13 deletions

diff --git a/src/pages/FeedPage/FeedPage.tsx b/src/pages/FeedPage/FeedPage.tsx
index 6561991..87a56ec 100644
--- a/src/pages/FeedPage/FeedPage.tsx
+++ b/src/pages/FeedPage/FeedPage.tsx
@@ -7,11 +7,7 @@ import PollSubmission from './PollSubmission';
 import { useAuth } from '../../hooks/useAuth';
 
 
-interface PropTypes {
-  navigate: (prefix: string, id: string) => void;
-}
-
-const FeedPage: React.FC<PropTypes> = ({ navigate }) => {
+const FeedPage: React.FC = () => {
   const [polls, setPolls] = useState<Poll[]>([]);
   const { isAuthenticated } = useAuth();
 
@@ -30,7 +26,7 @@ const FeedPage: React.FC<PropTypes> = ({ navigate }) => {
   return (
     <>
       {isAuthenticated() && <PollSubmission addPoll={addPoll} />}
-      <Feed polls={polls} navigate={navigate} />
+      <Feed polls={polls} />
     </>
   );
 };
diff --git a/src/pages/FeedPage/PollSubmission.tsx b/src/pages/FeedPage/PollSubmission.tsx
index 4e06254..42612f0 100644
--- a/src/pages/FeedPage/PollSubmission.tsx
+++ b/src/pages/FeedPage/PollSubmission.tsx
@@ -60,7 +60,7 @@ const PollSubmission: React.FC<PropTypes> = ({ addPoll }) => {
     <ClickAwayListener onClickAway={handleClickAway}>
       <Card>
         <Collapse in={expanded} timeout="auto" unmountOnExit>
-          {user && <UserStrip user={user} info="" navigate={() => {}} />}
+          {user && <UserStrip user={user} info="" />}
           <Divider />
           <div className={classes.root}>
             <PollSubmissionImage url={contents.left.url} setUrl={setUrl('left')} />
diff --git a/src/pages/Page.tsx b/src/pages/Page.tsx
new file mode 100644
index 0000000..6d4315e
--- /dev/null
+++ b/src/pages/Page.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import ProfilePage from './ProfilePage/ProfilePage';
+import FeedPage from './FeedPage/FeedPage';
+import AuthPage from './AuthPage/AuthPage';
+import { useNavigate } from '../hooks/useNavigate';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    width: theme.spacing(75),
+    marginTop: theme.spacing(15),
+    margin: '0 auto'
+  }
+}));
+
+const Page: React.FC = () => {
+  const { page } = useNavigate();
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      { page.prefix === 'profile' && <ProfilePage />}
+      { page.prefix === 'feed' && <FeedPage /> }
+      { page.prefix === 'auth' && <AuthPage /> }
+    </div>
+  );
+};
+
+
+export default Page;
+
diff --git a/src/pages/ProfilePage/ProfilePage.tsx b/src/pages/ProfilePage/ProfilePage.tsx
index ad2da46..808d43a 100644
--- a/src/pages/ProfilePage/ProfilePage.tsx
+++ b/src/pages/ProfilePage/ProfilePage.tsx
@@ -4,16 +4,18 @@ import { User, Poll } from 'which-types';
 import ProfileInfo from './ProfileInfo';
 import Feed from '../../components/Feed/Feed';
 import { get } from '../../requests';
+import { useAuth } from '../../hooks/useAuth'; 
+import { useNavigate } from '../../hooks/useNavigate'; 
 
-interface PropTypes {
-  navigate: (prefix: string, id: string) => void;
-  id: string;
-}
 
-const ProfilePage: React.FC<PropTypes> = ({ id, navigate }) => {
+const ProfilePage: React.FC = () => {
   const [userInfo, setUserInfo] = useState<User>();
   const [polls, setPolls] = useState<Poll[]>([]);
   const [totalVotes, setTotalVotes] = useState<number>(0);
+  const { page } = useNavigate();
+  const { user } = useAuth();
+
+  const id = page?.id || user?._id;
 
   useEffect(() => {
     get(`/users/${id}`).then(response => {
@@ -41,7 +43,7 @@ const ProfilePage: React.FC<PropTypes> = ({ id, navigate }) => {
         savedPolls={polls.length}
         totalVotes={totalVotes}
       />
-      <Feed polls={[...polls]} navigate={navigate} />
+      <Feed polls={[...polls]} />
     </>
   );
 };