From ad049a20fa2d92d9d0cee0af25be799eadf02b46 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Sun, 5 Jul 2020 11:14:15 +0300 Subject: feat: add reviews under logo --- src/pages/HomePage/HomePage.tsx | 13 +++++++++++++ 1 file changed, 13 insertions(+) (limited to 'src/pages') diff --git a/src/pages/HomePage/HomePage.tsx b/src/pages/HomePage/HomePage.tsx index f00289a..ab04281 100644 --- a/src/pages/HomePage/HomePage.tsx +++ b/src/pages/HomePage/HomePage.tsx @@ -14,6 +14,7 @@ import { Feedback } from 'which-types'; import { useNavigate } from '../../hooks/useNavigate'; import { useAuth } from '../../hooks/useAuth'; import { get } from '../../requests'; +import ReviewCard from '../../components/ReviewCard/ReviewCard'; const useStyles = makeStyles(theme => ({ root: { @@ -29,6 +30,11 @@ const useStyles = makeStyles(theme => ({ }, signup: { marginLeft: theme.spacing(2) + }, + reviews: { + [theme.breakpoints.up('md')]: { + padding: theme.spacing(0, 10) + } } })); @@ -63,6 +69,12 @@ const HomePage: React.FC = () => { const FeathersLink = Feathers; const MUILink = Material-UI; + const Reviews = ( +
+ {feedbacks.map(feedback => )} +
+ ); + return (
@@ -80,6 +92,7 @@ const HomePage: React.FC = () => { + {Reviews} -- cgit v1.2.3 From c50c38657e23de012699781f07a51dd7e4199b77 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Sun, 5 Jul 2020 12:18:55 +0300 Subject: feat: implement feedback feature --- src/pages/HomePage/HomePage.tsx | 62 ++++++++++++++++--- src/pages/HomePage/ReviewForm.tsx | 75 +++++++++++++++++++++++ src/pages/NotificationsPage/NotificationsPage.tsx | 2 +- 3 files changed, 130 insertions(+), 9 deletions(-) create mode 100644 src/pages/HomePage/ReviewForm.tsx (limited to 'src/pages') diff --git a/src/pages/HomePage/HomePage.tsx b/src/pages/HomePage/HomePage.tsx index ab04281..7b04bff 100644 --- a/src/pages/HomePage/HomePage.tsx +++ b/src/pages/HomePage/HomePage.tsx @@ -4,9 +4,10 @@ import { Divider, Grid, Button, - Link + Link, + useMediaQuery } from '@material-ui/core/'; -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles, useTheme } from '@material-ui/core/styles'; import TrendingUpIcon from '@material-ui/icons/TrendingUp'; import { Rating } from '@material-ui/lab'; import { Feedback } from 'which-types'; @@ -15,6 +16,7 @@ import { useNavigate } from '../../hooks/useNavigate'; import { useAuth } from '../../hooks/useAuth'; import { get } from '../../requests'; import ReviewCard from '../../components/ReviewCard/ReviewCard'; +import ReviewForm from './ReviewForm'; const useStyles = makeStyles(theme => ({ root: { @@ -42,7 +44,9 @@ const HomePage: React.FC = () => { const [feedbacks, setFeedbacks] = useState([]); const classes = useStyles(); const { navigate } = useNavigate(); - const { isAuthenticated } = useAuth(); + const { isAuthenticated, user } = useAuth(); + const theme = useTheme(); + const isMobile = useMediaQuery(theme.breakpoints.down('sm')); const rating = feedbacks.length && feedbacks.reduce( (acc: number, feedback: Feedback) => acc + feedback.score, @@ -68,6 +72,7 @@ const HomePage: React.FC = () => { const ReactLink = React; const FeathersLink = Feathers; const MUILink = Material-UI; + const EmailLink = eug-vs@keemail.me const Reviews = (
@@ -75,6 +80,33 @@ const HomePage: React.FC = () => {
); + const FeedbackSection = feedbacks.findIndex((feedback: Feedback) => feedback.author._id === user?._id) >= 0 ? ( +

+ You have already left feedback for this version. + If you have more to say, please open GitHub issue or contact us directly via email: {EmailLink}. + Alternatively, you can just wait for another application patch to come out. +

+ ) : ( + <> +

+ Here you can share your thougts about Which with us! + Note that you can ony leave feedback once per application version (there will be plenty of them later). +

+ {isAuthenticated() ? : ( + <> +

You must be authorized to leave feedback.

+ + + )} + + ); + return (
@@ -84,15 +116,17 @@ const HomePage: React.FC = () => { logo - + {rating && } - - User score: {rating.toFixed(1)} - + {rating && ( + + User score: {rating.toFixed(1)} + + )} - {Reviews} + {isMobile || Reviews} @@ -146,6 +180,18 @@ const HomePage: React.FC = () => { + + Leave feedback + + + {FeedbackSection} + + + {isMobile && ( + + {Reviews} + + )} diff --git a/src/pages/HomePage/ReviewForm.tsx b/src/pages/HomePage/ReviewForm.tsx new file mode 100644 index 0000000..58a61b4 --- /dev/null +++ b/src/pages/HomePage/ReviewForm.tsx @@ -0,0 +1,75 @@ +import React, { useState, useRef } from 'react'; +import { makeStyles } from '@material-ui/core/styles'; +import { TextField, Button } from '@material-ui/core'; +import { Rating } from '@material-ui/lab'; +import { useSnackbar } from 'notistack'; + +import { post } from '../../requests'; +import { useAuth } from '../../hooks/useAuth'; +import { useNavigate } from '../../hooks/useNavigate'; + +const version = 'v1.0.0'; + +const useStyles = makeStyles(theme => ({ + root: { + display: 'flex', + flexDirection: 'column' + }, + textField: { + margin: theme.spacing(2, 0) + } +})); + +const ReviewForm: React.FC = () => { + const [contents, setContents] = useState(''); + const [score, setScore] = useState(0); + const classes = useStyles(); + const { navigate } = useNavigate(); + const { enqueueSnackbar } = useSnackbar(); + + const handleSubmit = (): void => { + if (contents && score) { + post('/feedback', { contents, score, version }).then(() => { + enqueueSnackbar('Your feedback has been submitted!', { + variant: 'success' + }); + navigate('feed'); + }); + } + }; + + const handleChange = (event: any): void => { + setContents(event.target?.value || ''); + }; + + const handleChangeRating = (event: any, newScore: any): void => { + setScore(newScore); + }; + + return ( +
+ + +
+ +
+
+ ); +}; + +export default ReviewForm; diff --git a/src/pages/NotificationsPage/NotificationsPage.tsx b/src/pages/NotificationsPage/NotificationsPage.tsx index 3c39ba3..064fbd4 100644 --- a/src/pages/NotificationsPage/NotificationsPage.tsx +++ b/src/pages/NotificationsPage/NotificationsPage.tsx @@ -4,7 +4,7 @@ import { Typography } from '@material-ui/core'; const useStyles = makeStyles(theme => ({ root: { - marginTop: theme.spacing(40), + marginTop: theme.spacing(25), textAlign: 'center' } })); -- cgit v1.2.3 From 202f2ab4209a836e51a57081e5f78e255973c6f1 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Sun, 5 Jul 2020 12:22:38 +0300 Subject: style: fix eslint errors --- src/pages/HomePage/HomePage.tsx | 2 +- src/pages/HomePage/ReviewForm.tsx | 11 +++++------ 2 files changed, 6 insertions(+), 7 deletions(-) (limited to 'src/pages') diff --git a/src/pages/HomePage/HomePage.tsx b/src/pages/HomePage/HomePage.tsx index 7b04bff..5a33b42 100644 --- a/src/pages/HomePage/HomePage.tsx +++ b/src/pages/HomePage/HomePage.tsx @@ -72,7 +72,7 @@ const HomePage: React.FC = () => { const ReactLink = React; const FeathersLink = Feathers; const MUILink = Material-UI; - const EmailLink = eug-vs@keemail.me + const EmailLink = eug-vs@keemail.me; const Reviews = (
diff --git a/src/pages/HomePage/ReviewForm.tsx b/src/pages/HomePage/ReviewForm.tsx index 58a61b4..7ad0880 100644 --- a/src/pages/HomePage/ReviewForm.tsx +++ b/src/pages/HomePage/ReviewForm.tsx @@ -1,11 +1,10 @@ -import React, { useState, useRef } from 'react'; +import React, { useState } from 'react'; import { makeStyles } from '@material-ui/core/styles'; import { TextField, Button } from '@material-ui/core'; import { Rating } from '@material-ui/lab'; import { useSnackbar } from 'notistack'; import { post } from '../../requests'; -import { useAuth } from '../../hooks/useAuth'; import { useNavigate } from '../../hooks/useNavigate'; const version = 'v1.0.0'; @@ -38,17 +37,17 @@ const ReviewForm: React.FC = () => { } }; - const handleChange = (event: any): void => { + const handleChange = (event: React.ChangeEvent): void => { setContents(event.target?.value || ''); }; - const handleChangeRating = (event: any, newScore: any): void => { - setScore(newScore); + const handleChangeRating = (event: React.ChangeEvent>, newScore: number | null): void => { + setScore(newScore || 0); }; return (
- +