From f97989967ee0b88a8c64f226a4b28a79eeef5fd2 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Mon, 10 Aug 2020 11:19:53 +0300 Subject: refactor: remove "Page" from container names --- src/containers/Home/Home.tsx | 203 +++++++++++++++++++++++++++++++++++++ src/containers/Home/ReviewForm.tsx | 74 ++++++++++++++ 2 files changed, 277 insertions(+) create mode 100644 src/containers/Home/Home.tsx create mode 100644 src/containers/Home/ReviewForm.tsx (limited to 'src/containers/Home') diff --git a/src/containers/Home/Home.tsx b/src/containers/Home/Home.tsx new file mode 100644 index 0000000..73fa479 --- /dev/null +++ b/src/containers/Home/Home.tsx @@ -0,0 +1,203 @@ +import React, { useState, useEffect } from 'react'; +import { useHistory } from 'react-router-dom'; +import { + Typography, + Divider, + Grid, + Button, + Link, + useMediaQuery +} from '@material-ui/core/'; +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'; + +import { useAuth } from '../../hooks/useAuth'; +import { get } from '../../requests'; +import ReviewCard from '../../components/ReviewCard/ReviewCard'; +import ReviewForm from './ReviewForm'; + +const useStyles = makeStyles(theme => ({ + root: { + overflow: 'hidden', + padding: theme.spacing(0, 2) + }, + logo: { + width: theme.spacing(20), + height: theme.spacing(20) + }, + score: { + fontWeight: 'bold' + }, + signup: { + marginLeft: theme.spacing(2) + }, + reviews: { + [theme.breakpoints.up('md')]: { + padding: theme.spacing(0, 10) + } + } +})); + +const Home: React.FC = () => { + const [feedbacks, setFeedbacks] = useState([]); + const classes = useStyles(); + const history = useHistory(); + 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, + 0 + ) / feedbacks.length; + + useEffect(() => { + get('/feedback').then(response => { + setFeedbacks(response.data); + }); + }, []); + + const handleLetsGo = () => { + history.push('/feed'); + }; + + const handleSignUp = () => { + history.push('/registration'); + }; + + const GithubLink = GitHub; + const TypescriptLink = Typescript; + const ReactLink = React; + const FeathersLink = Feathers; + const MUILink = Material-UI; + const EmailLink = eug-vs@keemail.me; + + const Reviews = ( +
+ {feedbacks.map(feedback => )} +
+ ); + + 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 ( +
+ + + + + logo + + + {rating !== 0 && } + + + {rating !== 0 && ( + + User score: {rating.toFixed(1)} + + )} + + + {isMobile || Reviews} + + + + + Which one to choose? + + +

+ 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! +

+

Share your minor everyday uncertainties with the whole world and see what others think!

+ + {!isAuthenticated && ( + + )} + + + + About the project + + +

+ 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)! +

+

+ We encourage any developer to check it out. Feel free to open issues and create Pull Requests! +

+

+ 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. +

+ + + + + Leave feedback + + + {FeedbackSection} + + + {isMobile && ( + + {Reviews} + + )} + + + +
+ ); +}; + +export default Home; + diff --git a/src/containers/Home/ReviewForm.tsx b/src/containers/Home/ReviewForm.tsx new file mode 100644 index 0000000..b626ce2 --- /dev/null +++ b/src/containers/Home/ReviewForm.tsx @@ -0,0 +1,74 @@ +import React, { useState } from 'react'; +import { useHistory } from 'react-router-dom'; +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'; + +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 history = useHistory(); + const { enqueueSnackbar } = useSnackbar(); + + const handleSubmit = (): void => { + if (score) { + post('/feedback', { contents, score, version }).then(() => { + enqueueSnackbar('Your feedback has been submitted!', { + variant: 'success' + }); + history.push('/feed'); + }); + } + }; + + const handleChange = (event: React.ChangeEvent): void => { + setContents(event.target?.value || ''); + }; + + const handleChangeRating = (event: React.ChangeEvent>, newScore: number | null): void => { + setScore(newScore || 0); + }; + + return ( +
+ + +
+ +
+
+ ); +}; + +export default ReviewForm; -- cgit v1.2.3