1 files changed, 144 insertions, 0 deletions
diff --git a/src/pages/HomePage/HomePage.tsx b/src/pages/HomePage/HomePage.tsx
new file mode 100644
index 0000000..f00289a
--- /dev/null
+++ b/src/pages/HomePage/HomePage.tsx
@@ -0,0 +1,144 @@
+import React, { useState, useEffect } from 'react';
+import {
+  Typography,
+  Divider,
+  Grid,
+  Button,
+  Link
+} from '@material-ui/core/';
+import { makeStyles } from '@material-ui/core/styles';
+import TrendingUpIcon from '@material-ui/icons/TrendingUp';
+import { Rating } from '@material-ui/lab';
+import { Feedback } from 'which-types';
+
+import { useNavigate } from '../../hooks/useNavigate';
+import { useAuth } from '../../hooks/useAuth';
+import { get } from '../../requests';
+
+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)
+  }
+}));
+
+const HomePage: React.FC = () => {
+  const [feedbacks, setFeedbacks] = useState<Feedback[]>([]);
+  const classes = useStyles();
+  const { navigate } = useNavigate();
+  const { isAuthenticated } = useAuth();
+
+  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 = () => {
+    navigate('feed');
+  };
+
+  const handleSignUp = () => {
+    navigate('auth');
+  };
+
+  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>;
+
+  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 value={rating} readOnly size="large" />
+            </Grid>
+            <Grid item>
+              <Typography variant="h5" className={classes.score}>
+                User score: {rating.toFixed(1)}
+              </Typography>
+            </Grid>
+          </Grid>
+        </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>
+        </Grid>
+      </Grid>
+    </div>
+  );
+};
+
+export default HomePage;
+