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/components/ReviewCard/ReviewCard.tsx | 43 ++++++++++++++++++++++++++++++++ src/pages/HomePage/HomePage.tsx | 13 ++++++++++ 2 files changed, 56 insertions(+) create mode 100644 src/components/ReviewCard/ReviewCard.tsx (limited to 'src') diff --git a/src/components/ReviewCard/ReviewCard.tsx b/src/components/ReviewCard/ReviewCard.tsx new file mode 100644 index 0000000..9c3dd20 --- /dev/null +++ b/src/components/ReviewCard/ReviewCard.tsx @@ -0,0 +1,43 @@ +import React from 'react'; +import { makeStyles } from '@material-ui/core/styles'; +import { + Card, + CardContent, + Typography, + Divider +} from '@material-ui/core/'; +import { Rating } from '@material-ui/lab' +import { Feedback } from 'which-types'; + +import UserStrip from '../UserStrip/UserStrip'; + +interface PropTypes { + feedback: Feedback; +} + +const useStyles = makeStyles(theme => ({ + root: { + margin: theme.spacing(4, 0, 1, 0) + } +})); + +const ReviewCard: React.FC = ({ feedback }) => { + const classes = useStyles(); + + return ( + + } + /> + + + + {feedback.contents} + + + + ); +}; + +export default ReviewCard; 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') 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/components/ReviewCard/ReviewCard.tsx | 2 +- src/pages/HomePage/HomePage.tsx | 2 +- src/pages/HomePage/ReviewForm.tsx | 11 +++++------ 3 files changed, 7 insertions(+), 8 deletions(-) (limited to 'src') diff --git a/src/components/ReviewCard/ReviewCard.tsx b/src/components/ReviewCard/ReviewCard.tsx index 9c3dd20..97581fc 100644 --- a/src/components/ReviewCard/ReviewCard.tsx +++ b/src/components/ReviewCard/ReviewCard.tsx @@ -6,7 +6,7 @@ import { Typography, Divider } from '@material-ui/core/'; -import { Rating } from '@material-ui/lab' +import { Rating } from '@material-ui/lab'; import { Feedback } from 'which-types'; import UserStrip from '../UserStrip/UserStrip'; 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 (
- + Date: Sun, 5 Jul 2020 12:34:53 +0300 Subject: feat: add isInstagramLink switch --- src/components/UploadImage/UploadImage.tsx | 31 ++++++++++++++++++++++-------- 1 file changed, 23 insertions(+), 8 deletions(-) (limited to 'src') diff --git a/src/components/UploadImage/UploadImage.tsx b/src/components/UploadImage/UploadImage.tsx index 8ad65d5..51e43c2 100644 --- a/src/components/UploadImage/UploadImage.tsx +++ b/src/components/UploadImage/UploadImage.tsx @@ -1,11 +1,15 @@ import React, { useState } from 'react'; -import Button from '@material-ui/core/Button'; -import TextField from '@material-ui/core/TextField'; -import Dialog from '@material-ui/core/Dialog'; -import DialogActions from '@material-ui/core/DialogActions'; -import DialogContent from '@material-ui/core/DialogContent'; -import DialogContentText from '@material-ui/core/DialogContentText'; -import DialogTitle from '@material-ui/core/DialogTitle'; +import { + Button, + TextField, + Dialog, + DialogActions, + DialogContent, + DialogContentText, + DialogTitle, + FormControlLabel, + Switch +} from '@material-ui/core'; interface PropTypes { isOpen: boolean; @@ -15,6 +19,7 @@ interface PropTypes { const UploadImage: React.FC = ({ setIsOpen, isOpen, callback }) => { const [url, setUrl] = useState(''); + const [isInstagramLink, setIsInstagramLink] = useState(false); const handleClose = () => { @@ -22,14 +27,20 @@ const UploadImage: React.FC = ({ setIsOpen, isOpen, callback }) => { }; const handleSubmit = () => { + const result = isInstagramLink ? `${url.slice(0, url.length - 29)}/media/?size=l` : url; + console.log(result) + callback(result || ''); handleClose(); - callback(url || ''); }; const handleChange = (event:React.ChangeEvent) => { setUrl(event.target.value); }; + const handleSwitch = () => { + setIsInstagramLink(!isInstagramLink); + }; + return (
@@ -48,6 +59,10 @@ const UploadImage: React.FC = ({ setIsOpen, isOpen, callback }) => { autoComplete="off" onChange={handleChange} /> + } + label="It's an Instagram link" + />