From 2247e281f7f1c8c59ff758053dcb7b2c4f28d4a9 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Fri, 3 Jul 2020 19:02:06 +0300
Subject: feat: create a bunch of empty pages

---
 src/pages/HomePage/HomePage.tsx | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)
 create mode 100644 src/pages/HomePage/HomePage.tsx

(limited to 'src/pages/HomePage')

diff --git a/src/pages/HomePage/HomePage.tsx b/src/pages/HomePage/HomePage.tsx
new file mode 100644
index 0000000..6930cc8
--- /dev/null
+++ b/src/pages/HomePage/HomePage.tsx
@@ -0,0 +1,20 @@
+import React, { useState } from 'react';
+import { Typography } from '@material-ui/core/';
+import { makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles({
+});
+
+const HomePage: React.FC = () => {
+  const classes = useStyles();
+
+  return (
+    <>
+  <Typography variant="h3"> Which one to choose? </Typography>
+
+    </>
+  );
+};
+
+export default HomePage;
+
-- 
cgit v1.2.3


From 020356cb5588c2fd4d12dd91d60fe082eb4c69a2 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Fri, 3 Jul 2020 20:06:57 +0300
Subject: feat: create basic markup

---
 src/pages/HomePage/HomePage.tsx | 58 ++++++++++++++++++++++++++++++++++++-----
 1 file changed, 51 insertions(+), 7 deletions(-)

(limited to 'src/pages/HomePage')

diff --git a/src/pages/HomePage/HomePage.tsx b/src/pages/HomePage/HomePage.tsx
index 6930cc8..d0e29f5 100644
--- a/src/pages/HomePage/HomePage.tsx
+++ b/src/pages/HomePage/HomePage.tsx
@@ -1,18 +1,62 @@
 import React, { useState } from 'react';
-import { Typography } from '@material-ui/core/';
+import { Typography, Divider, Grid, Button } from '@material-ui/core/';
 import { makeStyles } from '@material-ui/core/styles';
+import { useNavigate } from '../../hooks/useNavigate';
 
-const useStyles = makeStyles({
-});
+const useStyles = makeStyles(theme => ({
+  logo: {
+    width: theme.spacing(32),
+    height: theme.spacing(32)
+  },
+  leftColumn: {
+    display: 'flex',
+    justifyContent: 'center'
+  },
+  title: {
+    fontWeight: 'bold'
+  }
+}));
 
 const HomePage: React.FC = () => {
   const classes = useStyles();
+  const { navigate } = useNavigate();
 
-  return (
-    <>
-  <Typography variant="h3"> Which one to choose? </Typography>
+  const handleLetsGo = () => {
+    navigate('feed');
+  };
 
-    </>
+  return (
+    <Grid container spacing={4}>
+      <Grid item xs={4} className={classes.leftColumn}>
+        <img src={process.env.PUBLIC_URL + '/which-logo-512.png'} alt="logo" className={classes.logo}/>
+      </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>
+            </Typography>
+          </Grid>
+          <Grid item>
+            <Typography variant="h4"> About the project </Typography>
+            <Divider />
+            <p>
+              Visit our <a href="https://github.com/">GitHub</a>
+            </p>
+          </Grid>
+          <Grid item>
+            <Typography variant="h4"> Leave feedback </Typography>
+            <Divider />
+          </Grid>
+        </Grid>
+      </Grid>
+    </Grid>
   );
 };
 
-- 
cgit v1.2.3


From 3dbde4e742d34c767d433057ff9280fd82d59f76 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Fri, 3 Jul 2020 20:33:13 +0300
Subject: feat: markup About section

---
 src/pages/HomePage/HomePage.tsx | 37 +++++++++++++++++++++++++++++++++----
 1 file changed, 33 insertions(+), 4 deletions(-)

(limited to 'src/pages/HomePage')

diff --git a/src/pages/HomePage/HomePage.tsx b/src/pages/HomePage/HomePage.tsx
index d0e29f5..c45c271 100644
--- a/src/pages/HomePage/HomePage.tsx
+++ b/src/pages/HomePage/HomePage.tsx
@@ -1,6 +1,8 @@
 import React, { useState } from 'react';
-import { Typography, Divider, Grid, Button } from '@material-ui/core/';
+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 { useNavigate } from '../../hooks/useNavigate';
 
 const useStyles = makeStyles(theme => ({
@@ -46,9 +48,36 @@ const HomePage: React.FC = () => {
           <Grid item>
             <Typography variant="h4"> About the project </Typography>
             <Divider />
-            <p>
-              Visit our <a href="https://github.com/">GitHub</a>
-            </p>
+            <Typography>
+              <p>
+                The project is written in <Link href="https://www.typescriptlang.org/">
+                  Typescript
+                </Link> and features <Link href="https://reactjs.org/">
+                  React
+                </Link>, <Link href="https://feathersjs.com/">
+                  Feathers
+                </Link>, and <Link href="https://material-ui.com/">
+                  Material-UI
+                </Link>.
+               It is currently open-source and you can visit our <Link href="https://github.com/which-ecosystem">
+                GitHub</Link> (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>
-- 
cgit v1.2.3


From d1ae44a8158a00d642e6c79a80420f585eef2b05 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Fri, 3 Jul 2020 21:00:56 +0300
Subject: feat: fetch feedbacks and display app rating

---
 src/pages/HomePage/HomePage.tsx | 68 ++++++++++++++++++++++++++++++++---------
 1 file changed, 53 insertions(+), 15 deletions(-)

(limited to 'src/pages/HomePage')

diff --git a/src/pages/HomePage/HomePage.tsx b/src/pages/HomePage/HomePage.tsx
index c45c271..f3cadee 100644
--- a/src/pages/HomePage/HomePage.tsx
+++ b/src/pages/HomePage/HomePage.tsx
@@ -1,36 +1,69 @@
-import React, { useState } from 'react';
+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(32),
-    height: theme.spacing(32)
+    width: theme.spacing(20),
+    height: theme.spacing(20)
   },
-  leftColumn: {
-    display: 'flex',
-    justifyContent: 'center'
-  },
-  title: {
+  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');
+  };
+
   return (
     <Grid container spacing={4}>
-      <Grid item xs={4} className={classes.leftColumn}>
-        <img src={process.env.PUBLIC_URL + '/which-logo-512.png'} alt="logo" className={classes.logo}/>
+      <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}>
@@ -41,8 +74,17 @@ const HomePage: React.FC = () => {
               <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! 
+                let's go!
               </Button>
+              {!isAuthenticated() && <Button
+                variant="outlined"
+                color="primary"
+                size="large"
+                className={classes.signup}
+                onClick={handleSignUp}
+              >
+                sign up
+              </Button>}
             </Typography>
           </Grid>
           <Grid item>
@@ -79,10 +121,6 @@ const HomePage: React.FC = () => {
               </Button>
             </Typography>
           </Grid>
-          <Grid item>
-            <Typography variant="h4"> Leave feedback </Typography>
-            <Divider />
-          </Grid>
         </Grid>
       </Grid>
     </Grid>
-- 
cgit v1.2.3


From 14926e00ec1d749d5e2c83bdcd98ed68e9b2f896 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Fri, 3 Jul 2020 21:15:28 +0300
Subject: style: fix eslint errors

---
 src/pages/HomePage/HomePage.tsx | 59 +++++++++++++++++++++++------------------
 1 file changed, 33 insertions(+), 26 deletions(-)

(limited to 'src/pages/HomePage')

diff --git a/src/pages/HomePage/HomePage.tsx b/src/pages/HomePage/HomePage.tsx
index f3cadee..8995630 100644
--- a/src/pages/HomePage/HomePage.tsx
+++ b/src/pages/HomePage/HomePage.tsx
@@ -1,5 +1,11 @@
 import React, { useState, useEffect } from 'react';
-import { Typography, Divider, Grid, Button, Link } from '@material-ui/core/';
+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';
@@ -28,7 +34,6 @@ const HomePage: React.FC = () => {
   const { navigate } = useNavigate();
   const { isAuthenticated } = useAuth();
 
-
   const rating = feedbacks.length && feedbacks.reduce(
     (acc: number, feedback: Feedback) => acc + feedback.score,
     0
@@ -48,12 +53,18 @@ const HomePage: React.FC = () => {
     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}/>
+            <img src={`${process.env.PUBLIC_URL}/which-logo-512.png`} alt="logo" className={classes.logo} />
           </Grid>
           <Grid item>
             <Rating value={rating} readOnly size="large" />
@@ -71,20 +82,25 @@ const HomePage: React.FC = () => {
             <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>
+                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!
+                {'let\'s go!'}
               </Button>
-              {!isAuthenticated() && <Button
-                variant="outlined"
-                color="primary"
-                size="large"
-                className={classes.signup}
-                onClick={handleSignUp}
-              >
-                sign up
-              </Button>}
+              {!isAuthenticated() && (
+                <Button
+                  variant="outlined"
+                  color="primary"
+                  size="large"
+                  className={classes.signup}
+                  onClick={handleSignUp}
+                >
+                  sign up
+                </Button>
+              )}
             </Typography>
           </Grid>
           <Grid item>
@@ -92,17 +108,8 @@ const HomePage: React.FC = () => {
             <Divider />
             <Typography>
               <p>
-                The project is written in <Link href="https://www.typescriptlang.org/">
-                  Typescript
-                </Link> and features <Link href="https://reactjs.org/">
-                  React
-                </Link>, <Link href="https://feathersjs.com/">
-                  Feathers
-                </Link>, and <Link href="https://material-ui.com/">
-                  Material-UI
-                </Link>.
-               It is currently open-source and you can visit our <Link href="https://github.com/which-ecosystem">
-                GitHub</Link> (make sure to star our repositories)!
+                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!
@@ -117,7 +124,7 @@ const HomePage: React.FC = () => {
                 startIcon={<TrendingUpIcon />}
                 href="https://github.com/orgs/which-ecosystem/projects/1"
               >
-                 track our progress
+                track our progress
               </Button>
             </Typography>
           </Grid>
-- 
cgit v1.2.3