diff options
| -rw-r--r-- | package-lock.json | 24 | ||||
| -rw-r--r-- | package.json | 1 | ||||
| -rw-r--r-- | 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> |