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

---
 package-lock.json               | 24 +++++++++++++++
 package.json                    |  1 +
 src/pages/HomePage/HomePage.tsx | 68 ++++++++++++++++++++++++++++++++---------
 3 files changed, 78 insertions(+), 15 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index da2d1a4..41430ec 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1374,6 +1374,30 @@
         "@babel/runtime": "^7.4.4"
       }
     },
+    "@material-ui/lab": {
+      "version": "4.0.0-alpha.56",
+      "resolved": "https://registry.npmjs.org/@material-ui/lab/-/lab-4.0.0-alpha.56.tgz",
+      "integrity": "sha512-xPlkK+z/6y/24ka4gVJgwPfoCF4RCh8dXb1BNE7MtF9bXEBLN/lBxNTK8VAa0qm3V2oinA6xtUIdcRh0aeRtVw==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "@material-ui/utils": "^4.10.2",
+        "clsx": "^1.0.4",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.8.0"
+      },
+      "dependencies": {
+        "@material-ui/utils": {
+          "version": "4.10.2",
+          "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.10.2.tgz",
+          "integrity": "sha512-eg29v74P7W5r6a4tWWDAAfZldXIzfyO1am2fIsC39hdUUHm/33k6pGOKPbgDjg/U/4ifmgAePy/1OjkKN6rFRw==",
+          "requires": {
+            "@babel/runtime": "^7.4.4",
+            "prop-types": "^15.7.2",
+            "react-is": "^16.8.0"
+          }
+        }
+      }
+    },
     "@material-ui/styles": {
       "version": "4.10.0",
       "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.10.0.tgz",
diff --git a/package.json b/package.json
index d0cd06b..40797fe 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,7 @@
   "dependencies": {
     "@material-ui/core": "^4.10.1",
     "@material-ui/icons": "^4.9.1",
+    "@material-ui/lab": "^4.0.0-alpha.56",
     "axios": "^0.19.2",
     "lodash": "^4.17.15",
     "notistack": "^0.9.17",
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