refactor: remove "Page" from container names

2 files changed, 277 insertions, 0 deletions

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<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 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<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;