Merge pull request #104 from which-ecosystem/feat/patch-notes

Display patch notes on home screen

5 files changed, 65 insertions, 39 deletions

diff --git a/src/components/ReviewCard/ReviewCard.tsx b/src/components/ReviewCard/ReviewCard.tsx
index 2016a5e..ccf051c 100644
--- a/src/components/ReviewCard/ReviewCard.tsx
+++ b/src/components/ReviewCard/ReviewCard.tsx
@@ -4,7 +4,8 @@ import {
   Card,
   CardContent,
   Typography,
-  Divider
+  Divider,
+  Chip
 } from '@material-ui/core/';
 import { Rating } from '@material-ui/lab';
 import { Feedback } from 'which-types';
@@ -17,7 +18,13 @@ interface PropTypes {
 
 const useStyles = makeStyles(theme => ({
   root: {
-    margin: theme.spacing(4, 0, 1, 0)
+    margin: theme.spacing(4, 0, 1, 0),
+    position: 'relative'
+  },
+  versionChip: {
+    position: 'absolute',
+    right: theme.spacing(2),
+    top: theme.spacing(2)
   }
 }));
 
@@ -30,6 +37,12 @@ const ReviewCard: React.FC<PropTypes> = ({ feedback }) => {
         user={feedback.author}
         info={<Rating value={feedback.score} readOnly size="small" />}
       />
+      <Chip
+        size="small"
+        variant="outlined"
+        label={feedback.version}
+        className={classes.versionChip}
+      />
       {feedback.contents && (
         <>
           <Divider />
diff --git a/src/containers/Home/Home.tsx b/src/containers/Home/Home.tsx
index 072e2fa..4fd2833 100644
--- a/src/containers/Home/Home.tsx
+++ b/src/containers/Home/Home.tsx
@@ -9,7 +9,7 @@ import {
   useMediaQuery
 } from '@material-ui/core/';
 import { makeStyles, useTheme } from '@material-ui/core/styles';
-import TrendingUpIcon from '@material-ui/icons/TrendingUp';
+import GitHubIcon from '@material-ui/icons/GitHub';
 import { Rating } from '@material-ui/lab';
 import { Feedback } from 'which-types';
 
@@ -17,7 +17,7 @@ import ReviewCard from '../../components/ReviewCard/ReviewCard';
 import Image from '../../components/Image/Image';
 import ReviewForm from './ReviewForm';
 import { useAuth } from '../../hooks/useAuth';
-import { useFeedback } from '../../hooks/APIClient';
+import { useFeedback, usePatchNotes } from '../../hooks/APIClient';
 
 const useStyles = makeStyles(theme => ({
   root: {
@@ -28,6 +28,9 @@ const useStyles = makeStyles(theme => ({
     width: theme.spacing(20),
     height: theme.spacing(20)
   },
+  patchNotes: {
+    whiteSpace: 'pre-wrap'
+  },
   score: {
     fontWeight: 'bold'
   },
@@ -35,14 +38,16 @@ const useStyles = makeStyles(theme => ({
     marginLeft: theme.spacing(2)
   },
   reviews: {
+    margin: 'auto',
     [theme.breakpoints.up('md')]: {
-      padding: theme.spacing(0, 10)
+      width: '70%'
     }
   }
 }));
 
 const Home: React.FC = () => {
   const { data: feedbacks } = useFeedback();
+  const { data: release } = usePatchNotes();
   const classes = useStyles();
   const history = useHistory();
   const { isAuthenticated, user } = useAuth();
@@ -62,11 +67,6 @@ const Home: React.FC = () => {
     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 = (
@@ -76,7 +76,7 @@ const Home: React.FC = () => {
   );
 
   const FeedbackSection = feedbacks && feedbacks.findIndex(
-    (feedback: Feedback) => feedback.author._id === user?._id
+    (feedback: Feedback) => (feedback.author._id === user?._id && feedback.version === release?.version)
   ) >= 0 ? (
     <p>
       You have already left feedback for this version.
@@ -89,7 +89,7 @@ const Home: React.FC = () => {
           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 /> : (
+        {isAuthenticated ? <ReviewForm version={release?.version || 'N/A'} /> : (
           <>
             <p> You must be authorized to leave feedback.</p>
             <Button
@@ -152,31 +152,23 @@ const Home: React.FC = () => {
                 )}
               </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>
+            {release && (
+              <Grid item>
+                <Typography variant="h4">{`What's new in ${release?.version}?`}</Typography>
+                <Divider />
+                <Typography className={classes.patchNotes}>
+                  <p>{release?.description}</p>
+                </Typography>
                 <Button
                   variant="outlined"
                   color="primary"
-                  startIcon={<TrendingUpIcon />}
-                  href="https://github.com/orgs/which-ecosystem/projects/1"
+                  startIcon={<GitHubIcon />}
+                  href={release?.url}
                 >
-                  track our progress
+                  Learn more
                 </Button>
-              </Typography>
-            </Grid>
+              </Grid>
+            )}
             <Grid item>
               <Typography variant="h4"> Leave feedback </Typography>
               <Divider />
diff --git a/src/containers/Home/ReviewForm.tsx b/src/containers/Home/ReviewForm.tsx
index b626ce2..56f4f8e 100644
--- a/src/containers/Home/ReviewForm.tsx
+++ b/src/containers/Home/ReviewForm.tsx
@@ -1,13 +1,16 @@
 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 { useFeedback } from '../../hooks/APIClient';
 
 import { post } from '../../requests';
 
-const version = 'v1.0.0';
+
+interface PropTypes {
+  version: string;
+}
 
 const useStyles = makeStyles(theme => ({
   root: {
@@ -19,11 +22,11 @@ const useStyles = makeStyles(theme => ({
   }
 }));
 
-const ReviewForm: React.FC = () => {
+const ReviewForm: React.FC<PropTypes> = ({ version }) => {
   const [contents, setContents] = useState<string>('');
   const [score, setScore] = useState<number>(0);
+  const { mutate: updateFeedbacks } = useFeedback();
   const classes = useStyles();
-  const history = useHistory();
   const { enqueueSnackbar } = useSnackbar();
 
   const handleSubmit = (): void => {
@@ -32,7 +35,7 @@ const ReviewForm: React.FC = () => {
         enqueueSnackbar('Your feedback has been submitted!', {
           variant: 'success'
         });
-        history.push('/feed');
+        updateFeedbacks();
       });
     }
   };
diff --git a/src/containers/Page/Page.tsx b/src/containers/Page/Page.tsx
index 9a904a4..e60f7da 100644
--- a/src/containers/Page/Page.tsx
+++ b/src/containers/Page/Page.tsx
@@ -17,8 +17,7 @@ const useStyles = makeStyles(theme => ({
     },
     [theme.breakpoints.up('md')]: {
       padding: theme.spacing(15, 5, 8, 5)
-    },
-    backgroundColor: 'whitesmoke'
+    }
   }
 }));
 
diff --git a/src/hooks/APIClient.ts b/src/hooks/APIClient.ts
index 68413b0..1793843 100644
--- a/src/hooks/APIClient.ts
+++ b/src/hooks/APIClient.ts
@@ -1,5 +1,6 @@
 import useSWR, { responseInterface } from 'swr';
 import { User, Poll, Feedback } from 'which-types';
+import axios from 'axios';
 import { get } from '../requests';
 
 type Response<T> = responseInterface<T, Error>;
@@ -24,3 +25,21 @@ export const useFeed = (): Response<Poll[]> => {
 export const useFeedback = (): Response<Feedback[]> => {
   return useSWR('/feedback', fetcher);
 };
+
+export interface Release {
+  url: string;
+  description: string;
+  version: string;
+  name: string;
+}
+
+export const usePatchNotes = (): Response<Release> => {
+  const fetchRelease = () => axios.get('https://api.github.com/repos/which-ecosystem/which/releases/latest')
+    .then(({ data }) => ({
+      name: data.name,
+      url: data.html_url,
+      version: data.tag_name,
+      description: data.body
+    }));
+  return useSWR('/patchnotes', fetchRelease, { revalidateOnFocus: false });
+};