aboutsummaryrefslogtreecommitdiff
path: root/src/pages/HomePage
diff options
context:
space:
mode:
Diffstat (limited to 'src/pages/HomePage')
-rw-r--r--src/pages/HomePage/HomePage.tsx203
-rw-r--r--src/pages/HomePage/ReviewForm.tsx74
2 files changed, 0 insertions, 277 deletions
diff --git a/src/pages/HomePage/HomePage.tsx b/src/pages/HomePage/HomePage.tsx
deleted file mode 100644
index b1dc506..0000000
--- a/src/pages/HomePage/HomePage.tsx
+++ /dev/null
@@ -1,203 +0,0 @@
-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 HomePage: React.FC = () => {
- const [feedbacks, setFeedbacks] = useState<Feedback[]>([]);
- 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 = <Link href="https://github.com/which-ecosystem">GitHub</Link>;
- const TypescriptLink = <Link href="https://www.typescriptlang.org/">Typescript</Link>;
- const ReactLink = <Link href="https://reactjs.org/">React</Link>;
- const FeathersLink = <Link href="https://feathersjs.com">Feathers</Link>;
- const MUILink = <Link href="https://material-ui.com">Material-UI</Link>;
- const EmailLink = <Link href="mailto: eug-vs@keemail.me">eug-vs@keemail.me</Link>;
-
- const Reviews = (
- <div className={classes.reviews}>
- {feedbacks.map(feedback => <ReviewCard feedback={feedback} />)}
- </div>
- );
-
- const FeedbackSection = feedbacks.findIndex((feedback: Feedback) => feedback.author._id === user?._id) >= 0 ? (
- <p>
- 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.
- </p>
- ) : (
- <>
- <p>
- 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).
- </p>
- {isAuthenticated ? <ReviewForm /> : (
- <>
- <p> You must be authorized to leave feedback.</p>
- <Button
- variant="outlined"
- color="primary"
- onClick={handleSignUp}
- >
- sign in
- </Button>
- </>
- )}
- </>
- );
-
- return (
- <div className={classes.root}>
- <Grid container spacing={4}>
- <Grid item xs={12} md={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 !== 0 && <Rating value={rating} readOnly size="large" />}
- </Grid>
- <Grid item>
- {rating !== 0 && (
- <Typography variant="h5" className={classes.score}>
- User score: {rating.toFixed(1)}
- </Typography>
- )}
- </Grid>
- </Grid>
- {isMobile || Reviews}
- </Grid>
- <Grid item xs={12} md={5}>
- <Grid container direction="column" spacing={6}>
- <Grid item>
- <Typography variant="h4"> Which one to choose? </Typography>
- <Divider />
- <Typography>
- <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!'}
- </Button>
- {!isAuthenticated && (
- <Button
- variant="outlined"
- color="primary"
- size="large"
- className={classes.signup}
- onClick={handleSignUp}
- >
- sign up
- </Button>
- )}
- </Typography>
- </Grid>
- <Grid item>
- <Typography variant="h4"> About the project </Typography>
- <Divider />
- <Typography>
- <p>
- 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)!
- </p>
- <p>
- We encourage any developer to check it out. Feel free to open issues and create Pull Requests!
- </p>
- <p>
- 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.
- </p>
- <Button
- variant="outlined"
- color="primary"
- startIcon={<TrendingUpIcon />}
- href="https://github.com/orgs/which-ecosystem/projects/1"
- >
- track our progress
- </Button>
- </Typography>
- </Grid>
- <Grid item>
- <Typography variant="h4"> Leave feedback </Typography>
- <Divider />
- <Typography>
- {FeedbackSection}
- </Typography>
- </Grid>
- {isMobile && (
- <Grid item>
- {Reviews}
- </Grid>
- )}
- </Grid>
- </Grid>
- </Grid>
- </div>
- );
-};
-
-export default HomePage;
-
diff --git a/src/pages/HomePage/ReviewForm.tsx b/src/pages/HomePage/ReviewForm.tsx
deleted file mode 100644
index b626ce2..0000000
--- a/src/pages/HomePage/ReviewForm.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-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<string>('');
- const [score, setScore] = useState<number>(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<HTMLInputElement>): void => {
- setContents(event.target?.value || '');
- };
-
- const handleChangeRating = (event: React.ChangeEvent<Record<string, unknown>>, newScore: number | null): void => {
- setScore(newScore || 0);
- };
-
- return (
- <div className={classes.root}>
- <Rating value={score} onChange={handleChangeRating} size="large" />
- <TextField
- value={contents}
- onChange={handleChange}
- label="Feedback"
- variant="outlined"
- className={classes.textField}
- rows={4}
- multiline
- />
- <div>
- <Button
- variant="contained"
- color="primary"
- size="large"
- onClick={handleSubmit}
- >
- submit
- </Button>
- </div>
- </div>
- );
-};
-
-export default ReviewForm;
generated by cgit v1.2.3 (git 2.25.1) at 2025-02-01 04:09:36 +0000