From 78f7b2db2ad14b4e4547f4a9142b51ad56982670 Mon Sep 17 00:00:00 2001
From: Tudor Stanciu <tstanciu@totalsoft.ro>
Date: Sat, 25 Mar 2023 01:16:11 +0200
Subject: [PATCH] about page update

---
 public/locales/en/translations.json           |  6 +++
 public/locales/ro/translations.json           |  6 +++
 .../common/NavigationButtons.js}              | 10 ++--
 .../about/components/AboutComponent.js        | 39 ---------------
 .../about/components/AboutContainer.js        | 47 +++++++++++++++++--
 .../releaseNotes/ReleaseNotesContainer.js     |  7 +++
 .../about/system/AboutSystemContainer.js      |  6 +++
 7 files changed, 74 insertions(+), 47 deletions(-)
 rename src/{features/about/components/AboutPageNavigation.js => components/common/NavigationButtons.js} (82%)
 delete mode 100644 src/features/about/components/AboutComponent.js
 create mode 100644 src/features/about/releaseNotes/ReleaseNotesContainer.js
 create mode 100644 src/features/about/system/AboutSystemContainer.js

diff --git a/public/locales/en/translations.json b/public/locales/en/translations.json
index 611c4b7..7bcf54e 100644
--- a/public/locales/en/translations.json
+++ b/public/locales/en/translations.json
@@ -60,5 +60,11 @@
       "Restart": "Restart",
       "Advanced": "Advanced"
     }
+  },
+  "About": {
+    "Navigation": {
+      "System": "System",
+      "ReleaseNotes": "Release notes"
+    }
   }
 }
diff --git a/public/locales/ro/translations.json b/public/locales/ro/translations.json
index 357e813..fa200f6 100644
--- a/public/locales/ro/translations.json
+++ b/public/locales/ro/translations.json
@@ -51,5 +51,11 @@
       "Restart": "Repornește",
       "Advanced": "Avansat"
     }
+  },
+  "About": {
+    "Navigation": {
+      "System": "Sistem",
+      "ReleaseNotes": "Note de lansare"
+    }
   }
 }
diff --git a/src/features/about/components/AboutPageNavigation.js b/src/components/common/NavigationButtons.js
similarity index 82%
rename from src/features/about/components/AboutPageNavigation.js
rename to src/components/common/NavigationButtons.js
index 2d0f050..b270eca 100644
--- a/src/features/about/components/AboutPageNavigation.js
+++ b/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"
-          disabled={tab === tab.code}
+          aria-label="navigation buttons"
+          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;
diff --git a/src/features/about/components/AboutComponent.js b/src/features/about/components/AboutComponent.js
deleted file mode 100644
index 1556dce..0000000
--- a/src/features/about/components/AboutComponent.js
+++ /dev/null
@@ -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;
diff --git a/src/features/about/components/AboutContainer.js b/src/features/about/components/AboutContainer.js
index 0830f65..e9440a2 100644
--- a/src/features/about/components/AboutContainer.js
+++ b/src/features/about/components/AboutContainer.js
@@ -1,8 +1,49 @@
-import React from "react";
-import AboutComponent from "./AboutComponent";
+import React, { useState, useMemo } from "react";
+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;
diff --git a/src/features/about/releaseNotes/ReleaseNotesContainer.js b/src/features/about/releaseNotes/ReleaseNotesContainer.js
new file mode 100644
index 0000000..19eca2b
--- /dev/null
+++ b/src/features/about/releaseNotes/ReleaseNotesContainer.js
@@ -0,0 +1,7 @@
+import React from "react";
+
+const ReleaseNotesContainer = () => {
+  return <>ReleaseNotesContainer</>;
+};
+
+export default ReleaseNotesContainer;
diff --git a/src/features/about/system/AboutSystemContainer.js b/src/features/about/system/AboutSystemContainer.js
new file mode 100644
index 0000000..b508a0b
--- /dev/null
+++ b/src/features/about/system/AboutSystemContainer.js
@@ -0,0 +1,6 @@
+import React from "react";
+
+const AboutSystemContainer = () => {
+  return <>AboutSystemContainer</>;
+};
+export default AboutSystemContainer;