feat: configure navigation

9 files changed, 66 insertions, 35 deletions

diff --git a/src/components/Feed/Feed.tsx b/src/components/Feed/Feed.tsx
index 8dc3ec1..3b8e16f 100644
--- a/src/components/Feed/Feed.tsx
+++ b/src/components/Feed/Feed.tsx
@@ -5,6 +5,7 @@ import PollCard from '../PollCard/PollCard';
 
 interface PropTypes {
   polls: Poll[];
+  navigate: (prefix: string, id: string) => void;
 }
 
 const useStyles = makeStyles(theme => ({
@@ -15,12 +16,12 @@ const useStyles = makeStyles(theme => ({
   }
 }));
 
-const Feed: React.FC<PropTypes> = ({ polls }) => {
+const Feed: React.FC<PropTypes> = ({ polls, navigate }) => {
   const classes = useStyles();
 
   return (
     <div className={classes.root}>
-      {polls.map(poll => <PollCard poll={poll} key={poll._id} />)}
+      {polls.map(poll => <PollCard poll={poll} key={poll._id} navigate={navigate} />)}
     </div>
   );
 };
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 0ee6b5f..4e25fa3 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -13,7 +13,7 @@ import HomeIcon from '@material-ui/icons/Home';
 import SearchBar from './SearchBar';
 
 interface PropTypes {
-  setPage: (newPage: string) => void;
+  navigate: (prefix: string) => void;
 }
 
 const useStyles = makeStyles({
@@ -28,15 +28,15 @@ const useStyles = makeStyles({
   }
 });
 
-const Header: React.FC<PropTypes> = ({ setPage }) => {
+const Header: React.FC<PropTypes> = ({ navigate }) => {
   const classes = useStyles();
 
   const handleHome = (): void => {
-    setPage('feed');
+    navigate('feed');
   };
 
   const handleProfile = (): void => {
-    setPage('profile');
+    navigate('profile');
   };
 
   const handleNotifications = (): void => {};
diff --git a/src/components/PollCard/PollCard.tsx b/src/components/PollCard/PollCard.tsx
index d5c99cc..7f587f3 100644
--- a/src/components/PollCard/PollCard.tsx
+++ b/src/components/PollCard/PollCard.tsx
@@ -5,13 +5,15 @@ import {
   CardActionArea,
   CardMedia,
   Avatar,
-  CardHeader
+  CardHeader,
+Link
 } from '@material-ui/core/';
 import { Poll } from '../../types';
 import PercentageBar from './PercentageBar';
 
 interface PropTypes {
   poll: Poll;
+  navigate: (prefix: string, id: string) => void;
 }
 
 const useStyles = makeStyles(theme => ({
@@ -30,19 +32,29 @@ const useStyles = makeStyles(theme => ({
 }));
 
 
-const PollCard: React.FC<PropTypes> = ({ poll }) => {
+const PollCard: React.FC<PropTypes> = ({ poll, navigate }) => {
   const classes = useStyles();
   const { author, contents } = poll;
 
+  const handleNavigate = () => {
+    navigate('profile', poll.author._id);
+  };
+
   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()} />
+          <Link href="#">
+            <Avatar
+              aria-label="avatar"
+              src={author.avatarUrl}
+              alt={author.name[0].toUpperCase()}
+              onClick={handleNavigate}
+            />
+          </Link>
         )}
         title={author.name}
       />
diff --git a/src/index.tsx b/src/index.tsx
index 55bf773..d7326cb 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -13,9 +13,10 @@ import Header from './components/Header/Header';
 import ProfilePage from './pages/ProfilePage/ProfilePage';
 import FeedPage from './pages/FeedPage/FeedPage';
 import AuthPage from './pages/AuthPage/AuthPage';
-import { User } from './types';
+import { User, Page } from './types';
 import { get } from './requests';
 
+
 const theme = createMuiTheme({
   palette: {
     primary: {
@@ -33,13 +34,25 @@ const useStyles = makeStyles({
 });
 
 const App: React.FC = () => {
-  const [page, setPage] = useState('feed');
   const [user, setUser] = React.useState<User | undefined>();
+  const [page, setPage] = useState<Page>({ prefix: 'feed', id: '' });
   const classes = useStyles();
 
+  const navigate = (prefix: string, id?: string): void => {
+    if (prefix === 'profile' && !id && !user) setPage({
+      prefix: 'auth',
+      id: ''
+    });
+    else setPage({
+      prefix,
+      id: (id || user?._id || '')
+    });
+  };
+
   const logOut = () => {
     localStorage.removeItem('userId');
     setUser(undefined);
+    navigate('auth');
   };
 
   useEffect(() => {
@@ -54,17 +67,11 @@ const App: React.FC = () => {
   return (
     <ThemeProvider theme={theme}>
       <CssBaseline />
-      <Header setPage={setPage} />
+      <Header navigate={navigate} />
       <div className={classes.root}>
-        {
-          page === 'profile'
-            ? (
-              user
-                ? <ProfilePage logOut={logOut} id={user?._id} />
-                : <AuthPage setUser={setUser} />
-            )
-            : <FeedPage />
-        }
+        { page.prefix === 'profile' && <ProfilePage logOut={logOut} id={page.id} navigate={navigate} /> }
+        { page.prefix === 'feed' && <FeedPage navigate={navigate} /> }
+        { page.prefix === 'auth' && <AuthPage setUser={setUser} navigate={navigate}/> }
       </div>
     </ThemeProvider>
   );
diff --git a/src/pages/AuthPage/AuthPage.tsx b/src/pages/AuthPage/AuthPage.tsx
index d9c43d3..82d468d 100644
--- a/src/pages/AuthPage/AuthPage.tsx
+++ b/src/pages/AuthPage/AuthPage.tsx
@@ -4,10 +4,11 @@ import SignInForm from './SignInForm';
 
 interface PropTypes {
   setUser: (newUser: User | undefined) => void;
+  navigate: (prefix: string, id: string) => void;
 }
 
-const AuthPage: React.FC<PropTypes> = ({ setUser }) => {
-  return <SignInForm setUser={setUser} />;
+const AuthPage: React.FC<PropTypes> = ({ setUser, navigate }) => {
+  return <SignInForm setUser={setUser} navigate={navigate} />;
 };
 
 export default AuthPage;
diff --git a/src/pages/AuthPage/SignInForm.tsx b/src/pages/AuthPage/SignInForm.tsx
index 6e27535..b7696e7 100644
--- a/src/pages/AuthPage/SignInForm.tsx
+++ b/src/pages/AuthPage/SignInForm.tsx
@@ -7,6 +7,7 @@ import { get } from '../../requests';
 
 interface PropTypes {
   setUser: (newUser: User) => void;
+  navigate: (prefix: string, id: string) => void;
 }
 
 const useStyles = makeStyles(theme => ({
@@ -22,7 +23,7 @@ const useStyles = makeStyles(theme => ({
   }
 }));
 
-const SignInForm: React.FC<PropTypes> = ({ setUser }) => {
+const SignInForm: React.FC<PropTypes> = ({ setUser, navigate }) => {
   const classes = useStyles();
   const inputRef = useRef<HTMLInputElement>();
 
@@ -33,6 +34,7 @@ const SignInForm: React.FC<PropTypes> = ({ setUser }) => {
         const user = response.data[0];
         setUser(user);
         localStorage.setItem('userId', user._id);
+        navigate('profile', user._id);
       });
     }
   };
diff --git a/src/pages/FeedPage/FeedPage.tsx b/src/pages/FeedPage/FeedPage.tsx
index 03bacfd..fd75190 100644
--- a/src/pages/FeedPage/FeedPage.tsx
+++ b/src/pages/FeedPage/FeedPage.tsx
@@ -3,7 +3,11 @@ import { Poll } from '../../types';
 import Feed from '../../components/Feed/Feed';
 import { get } from '../../requests';
 
-const FeedPage: React.FC = () => {
+interface PropTypes {
+  navigate: (prefix: string, id: string) => void;
+}
+
+const FeedPage: React.FC<PropTypes> = ({ navigate }) => {
   const [polls, setPolls] = useState<Poll[]>([]);
 
   useEffect(() => {
@@ -12,7 +16,7 @@ const FeedPage: React.FC = () => {
     });
   }, []);
 
-  return <Feed polls={polls} />;
+  return <Feed polls={polls} navigate={navigate} />;
 };
 
 export default FeedPage;
diff --git a/src/pages/ProfilePage/ProfilePage.tsx b/src/pages/ProfilePage/ProfilePage.tsx
index 984fb1e..46637cb 100644
--- a/src/pages/ProfilePage/ProfilePage.tsx
+++ b/src/pages/ProfilePage/ProfilePage.tsx
@@ -6,10 +6,11 @@ import { get } from '../../requests';
 
 interface PropTypes {
   logOut: () => void;
+  navigate: (prefix: string, id: string) => void;
   id: string;
 }
 
-const ProfilePage: React.FC<PropTypes> = ({ logOut, id }) => {
+const ProfilePage: React.FC<PropTypes> = ({ logOut, id, navigate }) => {
   const [userInfo, setUserInfo] = useState<User>();
   const [polls, setPolls] = useState<Poll[]>([]);
 
@@ -17,19 +18,19 @@ const ProfilePage: React.FC<PropTypes> = ({ logOut, id }) => {
     get(`/users/${id}`).then(response => {
       setUserInfo(response.data);
     });
-  },[]);
+  }, [id]);
 
   useEffect(() => {
     get(`/profiles/${id}`).then(response => {
       setPolls(response.data);
     });
-  },[]);
+  }, [id]);
 
 
   return (
     <>
       <ProfileInfo user={userInfo} logOut={logOut} />
-      <Feed polls={polls} />
+      <Feed polls={polls} navigate={navigate} />
     </>
   );
 };
diff --git a/src/types.d.ts b/src/types.d.ts
index 31c2c74..e84f96c 100644
--- a/src/types.d.ts
+++ b/src/types.d.ts
@@ -1,8 +1,14 @@
+export interface Page {
+  prefix: string;
+  id: string;
+}
+
 export interface User {
   name: string;
   avatarUrl: string;
   _id: string;
 }
+
 interface ImageData {
   url: string;
   votes: number;
@@ -10,10 +16,7 @@ interface ImageData {
 
 export interface Poll {
   _id: string;
-  author: {
-    name: string;
-    avatarUrl: string;
-  };
+  author: User;
   contents: {
     left: ImageData;
     right: ImageData;