release notes page update

src/features/releaseNotes/components/ReleaseNotesComponent.js

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

src/features/releaseNotes/components/ReleaseNotesContainer.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { connect } from "react-redux";
 import { bindActionCreators } from "redux";
 import PropTypes from "prop-types";
@@ -6,11 +6,26 @@ import { loadReleaseNotes } from "../actionCreators";
 import ReleaseNotesListComponent from "./ReleaseNotesListComponent";
 
 const ReleaseNotesContainer = ({ actions, releaseNotes }) => {
+  const [notesFlags, setNotesFlags] = useState({});
+
   useEffect(() => {
     actions.loadReleaseNotes();
   }, []);
 
-  return <ReleaseNotesListComponent releaseNotes={releaseNotes} />;
+  const handleToggle = (version) => (_, expanded) => {
+    setNotesFlags({
+      ...notesFlags,
+      [version]: expanded
+    });
+  };
+
+  return (
+    <ReleaseNotesListComponent
+      releaseNotes={releaseNotes}
+      handleToggle={handleToggle}
+      notesFlags={notesFlags}
+    />
+  );
 };
 
 ReleaseNotesContainer.propTypes = {

src/features/releaseNotes/components/ReleaseNotesListComponent.js

@@ -8,14 +8,25 @@ import PropTypes from "prop-types";
 import Spinner from "../../../components/common/Spinner";
 import { useTranslation } from "react-i18next";
 import ReleaseNotesSummary from "./ReleaseNotesSummary";
+import ReleaseNotesComponent from "./ReleaseNotesComponent";
 import styles from "../../../components/common/styles/divStyles";
 
 const useStyles = makeStyles(styles);
 
-const ReleaseNotesListComponent = ({ releaseNotes }) => {
+const ReleaseNotesListComponent = ({
+  releaseNotes,
+  handleToggle,
+  notesFlags
+}) => {
   const classes = useStyles();
   const { t } = useTranslation();
 
+  const getCollapsed = (version) => {
+    const flag = notesFlags[version];
+    const collapsed = !flag || flag === false;
+    return collapsed;
+  };
+
   return (
     <div className={classes.root}>
       <h2>{t("ReleaseNotes.Title")}</h2>
@@ -25,15 +36,21 @@ const ReleaseNotesListComponent = ({ releaseNotes }) => {
         releaseNotes.loaded &&
         releaseNotes.map((note) => {
           return (
-            <ExpansionPanel key={note.version}>
+            <ExpansionPanel
+              key={note.version}
+              onChange={handleToggle(note.version)}
+            >
               <ExpansionPanelSummary
                 expandIcon={<ExpandMoreIcon />}
                 id={`panel-${note.version}-header`}
               >
-                <ReleaseNotesSummary releaseNote={note} />
+                <ReleaseNotesSummary
+                  releaseNote={note}
+                  collapsed={getCollapsed(note.version)}
+                />
               </ExpansionPanelSummary>
               <ExpansionPanelDetails>
-                <div>TO DO</div>
+                <ReleaseNotesComponent releaseNote={note} />
               </ExpansionPanelDetails>
             </ExpansionPanel>
           );
@@ -44,7 +61,9 @@ const ReleaseNotesListComponent = ({ releaseNotes }) => {
 };
 
 ReleaseNotesListComponent.propTypes = {
-  releaseNotes: PropTypes.array.isRequired
+  releaseNotes: PropTypes.array.isRequired,
+  handleToggle: PropTypes.func.isRequired,
+  notesFlags: PropTypes.object.isRequired
 };
 
 export default ReleaseNotesListComponent;

src/features/releaseNotes/components/ReleaseNotesSummary.js

@@ -4,30 +4,33 @@ import { Grid } from "@material-ui/core";
 import { makeStyles } from "@material-ui/core/styles";
 import { useTranslation } from "react-i18next";
 import styles from "../../../components/common/styles/gridStyles";
+import Typography from "@material-ui/core/Typography";
 
 const useStyles = makeStyles(styles);
 
-const ReleaseNotesSummary = ({ releaseNote }) => {
+const ReleaseNotesSummary = ({ releaseNote, collapsed }) => {
   const classes = useStyles();
   const { t } = useTranslation();
 
   return (
     <Grid container className={classes.miniContainer}>
-      <Grid item xs={12} sm={5} md={5}>
-        {`${t("ReleaseNotes.Version")}: `}
-        <span className={classes.value}>{releaseNote.version}</span>
+      <Grid item xs={12} sm={2} md={2}>
+        <Typography variant={collapsed ? "subtitle2" : "h6"}>
+          {`${t("ReleaseNotes.Version")}: ${releaseNote.version}`}
+        </Typography>
       </Grid>
-
-      <Grid item xs={12} sm={5} md={5}>
-        {`${t("ReleaseNotes.Version")}: `}
-        <span className={classes.value}>{releaseNote.version}</span>
+      {collapsed && (
+        <Grid item xs={12} sm={10} md={10}>
+          <Typography variant="body2">{releaseNote.notes[0]}</Typography>
         </Grid>
+      )}
     </Grid>
   );
 };
 
 ReleaseNotesSummary.propTypes = {
-  releaseNote: PropTypes.object.isRequired
+  releaseNote: PropTypes.object.isRequired,
+  collapsed: PropTypes.bool.isRequired
 };
 
 export default ReleaseNotesSummary;