From 46581b33c9f684572a425f854f06e121f697f97e Mon Sep 17 00:00:00 2001
From: Tudor Stanciu <tstanciu@totalsoft.ro>
Date: Mon, 27 Mar 2023 01:08:55 +0300
Subject: [PATCH] settings page changes

---
 public/locales/en/translations.json           |  6 +++
 public/locales/ro/translations.json           |  6 +++
 src/components/layout/AppRoutes.js            |  2 +-
 src/features/settings/SettingsContainer.js    | 49 +++++++++++++++++++
 .../AppearanceContainer.js}                   |  4 +-
 .../ThemeSettings.js                          |  0
 .../language/LanguageComponent.js             |  0
 .../language/LanguageContainer.js             |  0
 .../notifications/NotificationsContainer.js   | 13 +++++
 9 files changed, 77 insertions(+), 3 deletions(-)
 create mode 100644 src/features/settings/SettingsContainer.js
 rename src/features/settings/{components/SettingsContainer.js => appearance/AppearanceContainer.js} (75%)
 rename src/features/settings/{components => appearance}/ThemeSettings.js (100%)
 rename src/features/settings/{components => appearance}/language/LanguageComponent.js (100%)
 rename src/features/settings/{components => appearance}/language/LanguageContainer.js (100%)
 create mode 100644 src/features/settings/notifications/NotificationsContainer.js

diff --git a/public/locales/en/translations.json b/public/locales/en/translations.json
index 4c67fa5..6f54e06 100644
--- a/public/locales/en/translations.json
+++ b/public/locales/en/translations.json
@@ -61,6 +61,12 @@
       "Advanced": "Advanced"
     }
   },
+  "Settings": {
+    "Navigation": {
+      "Appearance": "Appearance",
+      "Notifications": "Notifications"
+    }
+  },
   "About": {
     "Navigation": {
       "System": "System",
diff --git a/public/locales/ro/translations.json b/public/locales/ro/translations.json
index b54b91b..135429b 100644
--- a/public/locales/ro/translations.json
+++ b/public/locales/ro/translations.json
@@ -52,6 +52,12 @@
       "Advanced": "Avansat"
     }
   },
+  "Settings": {
+    "Navigation": {
+      "Appearance": "Aspect",
+      "Notifications": "Notificări"
+    }
+  },
   "About": {
     "Navigation": {
       "System": "Sistem",
diff --git a/src/components/layout/AppRoutes.js b/src/components/layout/AppRoutes.js
index 6935a82..43e83bb 100644
--- a/src/components/layout/AppRoutes.js
+++ b/src/components/layout/AppRoutes.js
@@ -2,7 +2,7 @@ import React from "react";
 import { Route, Switch } from "react-router-dom";
 import PageNotFound from "./PageNotFound";
 import NetworkContainer from "../../features/network/components/NetworkContainer";
-import SettingsContainer from "../../features/settings/components/SettingsContainer";
+import SettingsContainer from "../../features/settings/SettingsContainer";
 import DashboardContainer from "../../features/dashboard/components/DashboardContainer";
 import UserProfileContainer from "../../features/user/profile/components/UserProfileContainer";
 import AboutContainer from "../../features/about/AboutContainer";
diff --git a/src/features/settings/SettingsContainer.js b/src/features/settings/SettingsContainer.js
new file mode 100644
index 0000000..8e1ace8
--- /dev/null
+++ b/src/features/settings/SettingsContainer.js
@@ -0,0 +1,49 @@
+import React, { useState, useMemo } from "react";
+import BrushIcon from "@material-ui/icons/Brush";
+import NotificationsIcon from "@material-ui/icons/Notifications";
+import { useTranslation } from "react-i18next";
+import PageTitle from "../../components/common/PageTitle";
+import NavigationButtons from "../../components/common/NavigationButtons";
+import AppearanceContainer from "./appearance/AppearanceContainer";
+import NotificationsContainer from "./notifications/NotificationsContainer";
+
+const NavigationTabs = {
+  APPEARANCE: "Settings.Navigation.Appearance",
+  NOTIFICATIONS: "Settings.Navigation.Notifications"
+};
+
+const tabs = [
+  {
+    code: NavigationTabs.APPEARANCE,
+    icon: BrushIcon
+  },
+  {
+    code: NavigationTabs.NOTIFICATIONS,
+    icon: NotificationsIcon
+  }
+];
+
+const SettingsContainer = () => {
+  const [tab, setTab] = useState(NavigationTabs.APPEARANCE);
+  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.APPEARANCE && <AppearanceContainer />}
+      {tab === NavigationTabs.NOTIFICATIONS && <NotificationsContainer />}
+    </>
+  );
+};
+
+export default SettingsContainer;
diff --git a/src/features/settings/components/SettingsContainer.js b/src/features/settings/appearance/AppearanceContainer.js
similarity index 75%
rename from src/features/settings/components/SettingsContainer.js
rename to src/features/settings/appearance/AppearanceContainer.js
index bace773..868b2e0 100644
--- a/src/features/settings/components/SettingsContainer.js
+++ b/src/features/settings/appearance/AppearanceContainer.js
@@ -2,7 +2,7 @@ import React from "react";
 import LanguageContainer from "./language/LanguageContainer";
 import ThemeSettings from "./ThemeSettings";
 
-const SettingsContainer = () => {
+const AppearanceContainer = () => {
   return (
     <>
       <LanguageContainer />
@@ -11,4 +11,4 @@ const SettingsContainer = () => {
   );
 };
 
-export default SettingsContainer;
+export default AppearanceContainer;
diff --git a/src/features/settings/components/ThemeSettings.js b/src/features/settings/appearance/ThemeSettings.js
similarity index 100%
rename from src/features/settings/components/ThemeSettings.js
rename to src/features/settings/appearance/ThemeSettings.js
diff --git a/src/features/settings/components/language/LanguageComponent.js b/src/features/settings/appearance/language/LanguageComponent.js
similarity index 100%
rename from src/features/settings/components/language/LanguageComponent.js
rename to src/features/settings/appearance/language/LanguageComponent.js
diff --git a/src/features/settings/components/language/LanguageContainer.js b/src/features/settings/appearance/language/LanguageContainer.js
similarity index 100%
rename from src/features/settings/components/language/LanguageContainer.js
rename to src/features/settings/appearance/language/LanguageContainer.js
diff --git a/src/features/settings/notifications/NotificationsContainer.js b/src/features/settings/notifications/NotificationsContainer.js
new file mode 100644
index 0000000..5195ed3
--- /dev/null
+++ b/src/features/settings/notifications/NotificationsContainer.js
@@ -0,0 +1,13 @@
+import React from "react";
+
+const NotificationsContainer = () => {
+  return (
+    <div>
+      Enable/Disable email notifications (for each one separately - when
+      starting the machine, when stopping) You can go even further and have an
+      advanced site where you can configure each individual machine.
+    </div>
+  );
+};
+
+export default NotificationsContainer;