feat(Information Overlay Added): Retrieves latest release information…

… from GitHub, e2e tests added.

cypress/integration/information/overlay.spec.ts

@@ -5,12 +5,12 @@ context('Factory', () => {
 
   it('view information overview', () => {
     cy.get('[aria-label="info"]').click();
-    cy.get('.MuiBox-root > .MuiTypography-root');
+    cy.get('[id="InformationOverlay"]');
   });
 
   it('dismiss information overview', () => {
     cy.get('[aria-label="info"]').click();
-    cy.get('.MuiBackdrop-root').click('left');
+    cy.get('[id="InformationOverlay"]').click('left');
     cy.get('canvas').click();
   });
 });

package.json

@@ -21,11 +21,13 @@
     "@types/redux-saga": "^0.10.5",
     "@types/uuid": "^7.0.0",
     "acorn": "^7.1.1",
+    "axios": "^0.19.2",
     "gh-pages": "^2.2.0",
     "minimist": "^1.2.2",
     "normalizr": "^3.6.0",
     "react": "^16.13.0",
     "react-dom": "^16.13.0",
+    "react-markdown": "^4.3.1",
     "react-redux": "^7.2.0",
     "react-scripts": "^3.4.1",
     "react-sizeme": "^2.6.12",

src/env/config.ts

@@ -2,6 +2,10 @@ export const config = {
   topNav: {
     gitHubURL: 'https://github.com/ThomasGale/bits-to-atoms',
   },
+  information: {
+    gitHubAPILatestReleaseEndPoint:
+      'https://api.github.com/repos/thomasgale/bits-to-atoms/releases/latest',
+  },
   market: {
     simpleMarketSaga: {
       partNames: [

src/store/information/types.ts

@@ -0,0 +1,4 @@
+export interface GitHubLatestReleaseAPIResponse {
+  name: string;
+  body: string;
+}

src/views/components/information/InformationOverlay.tsx

@@ -1,10 +1,41 @@
-import { Box, Typography } from '@material-ui/core';
-import React from 'react';
+import { Card, makeStyles } from '@material-ui/core';
+import axios from 'axios';
+import React, { useEffect, useState } from 'react';
+import ReactMarkdown from 'react-markdown';
+import { config } from '../../../env/config';
+import { GitHubLatestReleaseAPIResponse } from '../../../store/information/types';
+
+const useStyles = makeStyles((theme) => ({
+  InformationOverlay: {
+    width: '50%',
+    padding: theme.spacing(2),
+  },
+}));
+
+export function InformationOverlay() {
+  const classes = useStyles();
+  const [info, setInfo] = useState('Retriving release information...');
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const result = await axios(
+        config.information.gitHubAPILatestReleaseEndPoint
+      );
+      if (result.status === 200) {
+        const releaseResponse = result.data as GitHubLatestReleaseAPIResponse;
+        setInfo(releaseResponse.body);
+      } else {
+        setInfo(
+          `Unabled to get release information :( (status: ${result.status})`
+        );
+      }
+    };
+    fetchData();
+  }, []);
 
-export function InformationOverlay(): JSX.Element {
   return (
-    <Box>
-      <Typography>Markdown Formatted Release Information</Typography>
-    </Box>
+    <Card id="InformationOverlay" className={classes.InformationOverlay}>
+      <ReactMarkdown source={info} />
+    </Card>
   );
 }