release notes page

.env

@@ -1,8 +1,8 @@
 #REACT_APP_TUITIO_URL=http://localhost:5063
 REACT_APP_TUITIO_URL=https://lab.code-rove.com/tuitio
 
-#REACT_APP_NETWORK_RESURRECTOR_API_URL=http://localhost:5064
-REACT_APP_NETWORK_RESURRECTOR_API_URL=https://lab.code-rove.com/network-resurrector-api
+REACT_APP_NETWORK_RESURRECTOR_API_URL=http://localhost:5064
+#REACT_APP_NETWORK_RESURRECTOR_API_URL=https://lab.code-rove.com/network-resurrector-api
 
 #600000 milliseconds = 10 minutes
 REACT_APP_MACHINE_PING_INTERVAL=600000

public/locales/en/translations.json

@@ -65,6 +65,10 @@
     "Navigation": {
       "System": "System",
       "ReleaseNotes": "Release notes"
+    },
+    "ReleaseNotes": {
+      "Version": "Version",
+      "Date": "Date"
     }
   }
 }

public/locales/ro/translations.json

@@ -56,6 +56,10 @@
     "Navigation": {
       "System": "Sistem",
       "ReleaseNotes": "Note de lansare"
+    },
+    "ReleaseNotes": {
+      "Version": "Versiune",
+      "Date": "Dată"
     }
   }
 }

src/api/useApi.js

@@ -2,6 +2,7 @@ import { useToast } from "../hooks";
 import { get, post } from "../utils/axios";
 
 const networkRoute = `${process.env.REACT_APP_NETWORK_RESURRECTOR_API_URL}/network`;
+const systemRoute = `${process.env.REACT_APP_NETWORK_RESURRECTOR_API_URL}/system`;
 const powerActionsRoute = `${process.env.REACT_APP_NETWORK_RESURRECTOR_API_URL}/resurrector`;
 
 const useApi = () => {
@@ -42,6 +43,14 @@ const useApi = () => {
     }
   };
 
+  const readReleaseNotes = (options = defaultOptions) => {
+    const releaseNotesPromise = call(
+      () => get(`${systemRoute}/release-notes`),
+      options
+    );
+    return releaseNotesPromise;
+  };
+
   const readMachines = (options = defaultOptions) => {
     const machinesPromise = call(
       () => get(`${networkRoute}/machines`),
@@ -93,6 +102,7 @@ const useApi = () => {
   };
 
   return {
+    readReleaseNotes,
     readMachines,
     wakeMachine,
     pingMachine,

src/features/about/releaseNotes/ReleaseNote.js

@@ -0,0 +1,27 @@
+import React from "react";
+import PropTypes from "prop-types";
+import Typography from "@material-ui/core/Typography";
+
+const ReleaseNote = ({ releaseNote }) => {
+  return (
+    <div>
+      {releaseNote.notes.map(note => {
+        return (
+          <Typography
+            key={releaseNote.notes.indexOf(note)}
+            variant="body2"
+            gutterBottom
+          >
+            {note}
+          </Typography>
+        );
+      })}
+    </div>
+  );
+};
+
+ReleaseNote.propTypes = {
+  releaseNote: PropTypes.object.isRequired
+};
+
+export default ReleaseNote;

src/features/about/releaseNotes/ReleaseNoteSummary.js

@@ -0,0 +1,37 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Grid, Typography } from "@material-ui/core";
+import { useTranslation } from "react-i18next";
+
+const ReleaseNoteSummary = ({ releaseNote, collapsed }) => {
+  const { t } = useTranslation();
+
+  return (
+    <Grid container>
+      <Grid item xs={6} sm={2} md={2}>
+        <Typography variant={collapsed ? "subtitle2" : "h6"}>
+          {`${t("About.ReleaseNotes.Version")}: ${releaseNote.version}`}
+        </Typography>
+      </Grid>
+      <Grid item xs={6} sm={2} md={collapsed ? 2 : 4}>
+        <Typography variant={collapsed ? "subtitle2" : "h6"}>
+          {`${t("About.ReleaseNotes.Date")}: ${t("DATE_FORMAT", {
+            date: { value: releaseNote.date, format: "DD-MM-YYYY HH:mm" }
+          })}`}
+        </Typography>
+      </Grid>
+      {collapsed && (
+        <Grid item xs={12} sm={8} md={8}>
+          <Typography variant="body2">{releaseNote.notes[0]}</Typography>
+        </Grid>
+      )}
+    </Grid>
+  );
+};
+
+ReleaseNoteSummary.propTypes = {
+  releaseNote: PropTypes.object.isRequired,
+  collapsed: PropTypes.bool.isRequired
+};
+
+export default ReleaseNoteSummary;

src/features/about/releaseNotes/ReleaseNotesContainer.js

@@ -1,7 +1,22 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
+import useApi from "../../../api";
+import ReleaseNotesList from "./ReleaseNotesList";
 
 const ReleaseNotesContainer = () => {
-  return <>ReleaseNotesContainer</>;
+  const [state, setState] = useState({ data: [], loaded: false });
+
+  const api = useApi();
+
+  useEffect(() => {
+    if (state.loaded) return;
+    api.readReleaseNotes({
+      onCompleted: data => {
+        setState({ data, loaded: true });
+      }
+    });
+  }, [api, state.loaded]);
+
+  return <>{state.loaded && <ReleaseNotesList releaseNotes={state.data} />}</>;
 };
 
 export default ReleaseNotesContainer;

src/features/about/releaseNotes/ReleaseNotesList.js

@@ -0,0 +1,56 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import {
+  Accordion,
+  AccordionSummary,
+  AccordionDetails
+} from "@material-ui/core";
+import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
+import ReleaseNoteSummary from "./ReleaseNoteSummary";
+import ReleaseNote from "./ReleaseNote";
+
+const ReleaseNotesList = ({ releaseNotes }) => {
+  const [flags, setFlags] = useState({});
+
+  const handleToggle = key => (_, expanded) => {
+    setFlags(prev => ({
+      ...prev,
+      [key]: expanded
+    }));
+  };
+
+  const isCollapsed = key => {
+    const expanded = flags[key];
+    const collapsed = !expanded || expanded === false;
+    return collapsed;
+  };
+
+  return (
+    <>
+      {releaseNotes.map(note => {
+        return (
+          <Accordion key={note.version} onChange={handleToggle(note.version)}>
+            <AccordionSummary
+              expandIcon={<ExpandMoreIcon />}
+              id={`panel-${note.version}-header`}
+            >
+              <ReleaseNoteSummary
+                releaseNote={note}
+                collapsed={isCollapsed(note.version)}
+              />
+            </AccordionSummary>
+            <AccordionDetails>
+              <ReleaseNote releaseNote={note} />
+            </AccordionDetails>
+          </Accordion>
+        );
+      })}
+    </>
+  );
+};
+
+ReleaseNotesList.propTypes = {
+  releaseNotes: PropTypes.array.isRequired
+};
+
+export default ReleaseNotesList;