Merge pull request #59 from which-ecosystem/pages

Markup landing page and blank notifications page

7 files changed, 200 insertions, 14 deletions

diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 72e40f8..294c250 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -22,7 +22,8 @@ const useStyles = makeStyles({
     margin: 'auto'
   },
   logo: {
-    fontWeight: 'bold'
+    fontWeight: 'bold',
+    cursor: 'pointer'
   },
   avatar: {
     width: 24,
@@ -36,6 +37,10 @@ const Header: React.FC = () => {
   const { navigate } = useNavigate();
 
   const handleHome = (): void => {
+    navigate('home');
+  };
+
+  const handleFeed = (): void => {
     navigate('feed');
   };
 
@@ -44,17 +49,19 @@ const Header: React.FC = () => {
     else navigate('auth');
   };
 
-  const handleNotifications = (): void => {};
+  const handleNotifications = (): void => {
+    navigate('notifications');
+  };
 
   return (
     <AppBar position="fixed">
       <Toolbar className={classes.root}>
-        <Typography variant="h5" className={classes.logo}>
+        <Typography variant="h5" className={classes.logo} onClick={handleHome}>
           Which
         </Typography>
         <SearchBar />
         <div>
-          <IconButton onClick={handleHome}>
+          <IconButton onClick={handleFeed}>
             <HomeIcon />
           </IconButton>
           <IconButton onClick={handleNotifications}>
@@ -62,7 +69,7 @@ const Header: React.FC = () => {
           </IconButton>
           <IconButton onClick={handleProfile}>
             {
-              user?.avatarUrl?.match(/\.(jpeg|jpg|gif|png)$/)
+              user?.avatarUrl
                 ? <Avatar className={classes.avatar} src={user?.avatarUrl} />
                 : <AccountCircle />
             }
diff --git a/src/hooks/useNavigate.tsx b/src/hooks/useNavigate.tsx
index 47de4df..d1a433d 100644
--- a/src/hooks/useNavigate.tsx
+++ b/src/hooks/useNavigate.tsx
@@ -11,7 +11,7 @@ interface ContextType {
   navigate: (prefix: string, id?: string) => void;
 }
 
-const landingPage = { prefix: 'feed' };
+const landingPage = { prefix: 'home' };
 
 const context = createContext<ContextType>({
   page: landingPage,
diff --git a/src/pages/FeedPage/FeedPage.tsx b/src/pages/FeedPage/FeedPage.tsx
index b591141..8149c8c 100644
--- a/src/pages/FeedPage/FeedPage.tsx
+++ b/src/pages/FeedPage/FeedPage.tsx
@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { Poll } from 'which-types';
+import { makeStyles } from '@material-ui/core/styles';
 
 import Feed from '../../components/Feed/Feed';
 import { get } from '../../requests';
@@ -7,9 +8,17 @@ import PollSubmission from './PollSubmission';
 import { useAuth } from '../../hooks/useAuth';
 
 
+const useStyles = makeStyles(theme => ({
+  root: {
+    width: theme.spacing(75),
+    margin: '0 auto'
+  }
+}));
+
 const FeedPage: React.FC = () => {
   const [polls, setPolls] = useState<Poll[]>([]);
   const { isAuthenticated } = useAuth();
+  const classes = useStyles();
 
   useEffect(() => {
     get('/feed').then(response => {
@@ -23,12 +32,11 @@ const FeedPage: React.FC = () => {
     setPolls(polls);
   };
 
-
   return (
-    <>
+    <div className={classes.root}>
       {isAuthenticated() && <PollSubmission addPoll={addPoll} />}
       <Feed polls={polls} />
-    </>
+    </div>
   );
 };
 
diff --git a/src/pages/HomePage/HomePage.tsx b/src/pages/HomePage/HomePage.tsx
new file mode 100644
index 0000000..8995630
--- /dev/null
+++ b/src/pages/HomePage/HomePage.tsx
@@ -0,0 +1,138 @@
+import React, { useState, useEffect } from 'react';
+import {
+  Typography,
+  Divider,
+  Grid,
+  Button,
+  Link
+} from '@material-ui/core/';
+import { makeStyles } from '@material-ui/core/styles';
+import TrendingUpIcon from '@material-ui/icons/TrendingUp';
+import { Rating } from '@material-ui/lab';
+import { Feedback } from 'which-types';
+
+import { useNavigate } from '../../hooks/useNavigate';
+import { useAuth } from '../../hooks/useAuth';
+import { get } from '../../requests';
+
+const useStyles = makeStyles(theme => ({
+  logo: {
+    width: theme.spacing(20),
+    height: theme.spacing(20)
+  },
+  score: {
+    fontWeight: 'bold'
+  },
+  signup: {
+    marginLeft: theme.spacing(2)
+  }
+}));
+
+const HomePage: React.FC = () => {
+  const [feedbacks, setFeedbacks] = useState<Feedback[]>([]);
+  const classes = useStyles();
+  const { navigate } = useNavigate();
+  const { isAuthenticated } = useAuth();
+
+  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 = () => {
+    navigate('feed');
+  };
+
+  const handleSignUp = () => {
+    navigate('auth');
+  };
+
+  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>;
+
+  return (
+    <Grid container spacing={4}>
+      <Grid item xs={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 value={rating} readOnly size="large" />
+          </Grid>
+          <Grid item>
+            <Typography variant="h5" className={classes.score}>
+              User score: {rating.toFixed(1)}
+            </Typography>
+          </Grid>
+        </Grid>
+      </Grid>
+      <Grid item xs={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>
+      </Grid>
+    </Grid>
+  );
+};
+
+export default HomePage;
+
diff --git a/src/pages/NotificationsPage/NotificationsPage.tsx b/src/pages/NotificationsPage/NotificationsPage.tsx
new file mode 100644
index 0000000..d162eff
--- /dev/null
+++ b/src/pages/NotificationsPage/NotificationsPage.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import { Typography } from '@material-ui/core';
+
+const useStyles = makeStyles({
+  root: {
+    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
index f6353b2..24487f3 100644
--- a/src/pages/Page.tsx
+++ b/src/pages/Page.tsx
@@ -4,13 +4,13 @@ import { SnackbarProvider } from 'notistack';
 import ProfilePage from './ProfilePage/ProfilePage';
 import FeedPage from './FeedPage/FeedPage';
 import AuthPage from './AuthPage/AuthPage';
+import HomePage from './HomePage/HomePage';
+import NotificationsPage from './NotificationsPage/NotificationsPage';
 import { useNavigate } from '../hooks/useNavigate';
 
 const useStyles = makeStyles(theme => ({
   root: {
-    width: theme.spacing(75),
-    marginTop: theme.spacing(15),
-    margin: '0 auto'
+    margin: theme.spacing(15, 5, 5, 8)
   }
 }));
 
@@ -27,9 +27,11 @@ const Page: React.FC = () => {
       }}
     >
       <div className={classes.root}>
+        { page.prefix === 'home' && <HomePage />}
         { page.prefix === 'profile' && <ProfilePage />}
         { page.prefix === 'feed' && <FeedPage /> }
         { page.prefix === 'auth' && <AuthPage /> }
+        { page.prefix === 'notifications' && <NotificationsPage /> }
       </div>
     </SnackbarProvider>
   );
diff --git a/src/pages/ProfilePage/ProfilePage.tsx b/src/pages/ProfilePage/ProfilePage.tsx
index b7106bb..4710ae8 100644
--- a/src/pages/ProfilePage/ProfilePage.tsx
+++ b/src/pages/ProfilePage/ProfilePage.tsx
@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { User, Poll } from 'which-types';
+import { makeStyles } from '@material-ui/core/styles';
 
 import ProfileInfo from './ProfileInfo';
 import Feed from '../../components/Feed/Feed';
@@ -8,12 +9,20 @@ import { useAuth } from '../../hooks/useAuth';
 import { useNavigate } from '../../hooks/useNavigate';
 
 
+const useStyles = makeStyles(theme => ({
+  root: {
+    width: theme.spacing(75),
+    margin: '0 auto'
+  }
+}));
+
 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 classes = useStyles();
 
   useEffect(() => {
     const id = page?.id || user?._id;
@@ -35,7 +44,7 @@ const ProfilePage: React.FC = () => {
   }, [navigate, page, user]);
 
   return (
-    <>
+    <div className={classes.root}>
       <ProfileInfo
         userInfo={userInfo}
         setUserInfo={setUserInfo}
@@ -43,7 +52,7 @@ const ProfilePage: React.FC = () => {
         totalVotes={totalVotes}
       />
       <Feed polls={[...polls]} />
-    </>
+    </div>
   );
 };