about page update

public/locales/en/translations.json

@@ -60,5 +60,11 @@
       "Restart": "Restart",
       "Advanced": "Advanced"
     }
+  },
+  "About": {
+    "Navigation": {
+      "System": "System",
+      "ReleaseNotes": "Release notes"
+    }
   }
 }

public/locales/ro/translations.json

@@ -51,5 +51,11 @@
       "Restart": "Repornește",
       "Advanced": "Avansat"
     }
+  },
+  "About": {
+    "Navigation": {
+      "System": "Sistem",
+      "ReleaseNotes": "Note de lansare"
+    }
   }
 }

src/components/common/NavigationButtons.js

@@ -4,7 +4,7 @@ import ToggleButton from "@material-ui/lab/ToggleButton";
 import ToggleButtonGroup from "@material-ui/lab/ToggleButtonGroup";
 import { Tooltip } from "@material-ui/core";
 
-const AboutPageNavigation = ({ tabs, onTabChange }) => {
+const NavigationButtons = ({ tabs, onTabChange }) => {
   const [selected, setSelected] = useState(tabs[0].code);
 
   const handleTabSelection = (_event, tabCode) => {
@@ -23,8 +23,8 @@ const AboutPageNavigation = ({ tabs, onTabChange }) => {
         <ToggleButton
           key={tab.code}
           value={tab.code}
-          aria-label="navigation tabs"
+          aria-label="navigation buttons"
-          disabled={tab === tab.code}
+          disabled={selected === tab.code}
         >
           <Tooltip title={tab.tooltip}>
             <tab.icon />
@@ -35,11 +35,11 @@ const AboutPageNavigation = ({ tabs, onTabChange }) => {
   );
 };
 
-AboutPageNavigation.propTypes = {
+NavigationButtons.propTypes = {
   tabs: PropTypes.arrayOf(
     PropTypes.shape({ code: PropTypes.string.isRequired })
   ).isRequired,
   onTabChange: PropTypes.func
 };
 
-export default AboutPageNavigation;
+export default NavigationButtons;

src/features/about/components/AboutComponent.js

@@ -1,39 +0,0 @@
-import React, { useState } from "react";
-//import PropTypes from "prop-types";
-import PageTitle from "../../../components/common/PageTitle";
-import ViewListIcon from "@material-ui/icons/ViewList";
-import AboutPageNavigation from "./AboutPageNavigation";
-
-const NavigationTabs = {
-  ABOUT: "About.Navigation.System",
-  RELEASE_NOTES: "About.Navigation.ReleaseNotes"
-};
-
-const tabs = [
-  {
-    code: NavigationTabs.ABOUT,
-    tooltip: NavigationTabs.ABOUT,
-    icon: ViewListIcon
-  },
-  {
-    code: NavigationTabs.RELEASE_NOTES,
-    tooltip: NavigationTabs.RELEASE_NOTES,
-    icon: ViewListIcon
-  }
-];
-
-const AboutComponent = () => {
-  const [tab, setTab] = useState(null);
-  return (
-    <>
-      <PageTitle
-        text={"Release notes"}
-        navigation={<AboutPageNavigation tabs={tabs} onTabChange={setTab} />}
-      />
-    </>
-  );
-};
-
-AboutComponent.propTypes = {};
-
-export default AboutComponent;

src/features/about/components/AboutContainer.js

@@ -1,8 +1,49 @@
-import React from "react";
+import React, { useState, useMemo } from "react";
-import AboutComponent from "./AboutComponent";
+import PageTitle from "../../../components/common/PageTitle";
+import BubbleChartIcon from "@material-ui/icons/BubbleChart";
+import NotesIcon from "@material-ui/icons/Notes";
+import { useTranslation } from "react-i18next";
+import AboutSystemContainer from "../system/AboutSystemContainer";
+import ReleaseNotesContainer from "../releaseNotes/ReleaseNotesContainer";
+import NavigationButtons from "../../../components/common/NavigationButtons";
+
+const NavigationTabs = {
+  SYSTEM: "About.Navigation.System",
+  RELEASE_NOTES: "About.Navigation.ReleaseNotes"
+};
+
+const tabs = [
+  {
+    code: NavigationTabs.SYSTEM,
+    icon: BubbleChartIcon
+  },
+  {
+    code: NavigationTabs.RELEASE_NOTES,
+    icon: NotesIcon
+  }
+];
 
 const AboutContainer = () => {
-  return <AboutComponent />;
+  const [tab, setTab] = useState(NavigationTabs.SYSTEM);
+  const { t } = useTranslation();
+
+  const navigationTabs = useMemo(
+    () => tabs.map(z => ({ ...z, tooltip: t(z.code) })),
+    [t]
+  );
+
+  return (
+    <>
+      <PageTitle
+        text={t(tab)}
+        navigation={
+          <NavigationButtons tabs={navigationTabs} onTabChange={setTab} />
+        }
+      />
+      {tab === NavigationTabs.SYSTEM && <AboutSystemContainer />}
+      {tab === NavigationTabs.RELEASE_NOTES && <ReleaseNotesContainer />}
+    </>
+  );
 };
 
 export default AboutContainer;

src/features/about/releaseNotes/ReleaseNotesContainer.js

@@ -0,0 +1,7 @@
+import React from "react";
+
+const ReleaseNotesContainer = () => {
+  return <>ReleaseNotesContainer</>;
+};
+
+export default ReleaseNotesContainer;

src/features/about/system/AboutSystemContainer.js

@@ -0,0 +1,6 @@
+import React from "react";
+
+const AboutSystemContainer = () => {
+  return <>AboutSystemContainer</>;
+};
+export default AboutSystemContainer;