Web: Files: Settings: refactoring

products/ASC.Files/Client/src/components/Article/Body/TreeSettings.js

@@ -81,15 +81,8 @@ const PureTreeSettings = ({
 }) => {
   useEffect(() => {
     const { setting } = match.params;
-    if (selectedTreeNode[0] !== setting) setSelectedNode([setting]);
     if (setting && !expandedSetting) setExpandSettingsTree(["settings"]);
-  }, [
-    match,
-    selectedTreeNode,
-    expandedSetting,
-    setExpandSettingsTree,
-    setSelectedNode,
-  ]);
+  }, [match, expandedSetting, setExpandSettingsTree]);
 
   useEffect(() => {
     getFilesSettings();
@@ -158,7 +151,7 @@ const PureTreeSettings = ({
             selectable={true}
             className="settings-node"
             id="connected-clouds"
-            key="thirdParty"
+            key="thirdparty"
             isLeaf={true}
             title={t("TreeSettingsConnectedCloud")}
           />

products/ASC.Files/Client/src/components/pages/Settings/Section/Body/index.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React from "react";
 import styled from "styled-components";
 import { connect } from "react-redux";
 import { Heading, ToggleButton } from "asc-web-components";
@@ -22,7 +22,6 @@ import {
   getSettingsTreeEnableThirdParty,
   getSettingsTree,
 } from "../../../../../store/files/selectors";
-import { setDocumentTitle } from "../../../../../helpers/utils";
 
 const { isAdmin } = store.auth.selectors;
 
@@ -62,13 +61,9 @@ const SectionBodyContent = ({
   isAdmin,
   isErrorSettings,
   settingsTree,
+
   t,
 }) => {
-  useEffect(() => {
-    const title = setting[0].toUpperCase() + setting.slice(1);
-    setDocumentTitle(t(`${title}`));
-  }, [setting, t]);
-
   const onChangeStoreForceSave = () => {
     setStoreForceSave(!storeForceSave, "storeForceSave");
   };
@@ -175,9 +170,9 @@ const SectionBodyContent = ({
 
   if (setting === "admin" && isAdmin) content = renderAdminSettings();
   if (setting === "common") content = renderCommonSettings();
-  if (setting === "thirdParty" && enableThirdParty) content = renderClouds();
+  if (setting === "thirdparty" && enableThirdParty) content = renderClouds();
 
-  return isLoading ? null : (!enableThirdParty && setting === "thirdParty") ||
+  return isLoading ? null : (!enableThirdParty && setting === "thirdparty") ||
     (!isAdmin && setting === "admin") ? (
     <Error403 />
   ) : isErrorSettings ? (

products/ASC.Files/Client/src/components/pages/Settings/Section/Header/index.js

@@ -1,11 +1,10 @@
 import React from "react";
 import { Headline } from "asc-web-common";
 
-const SectionHeaderContent = ({ setting, t }) => {
-  const title = setting[0].toUpperCase() + setting.slice(1);
+const SectionHeaderContent = ({ title }) => {
   return (
     <Headline className="headline-header" type="content" truncate={true}>
-      {t(`${title}Settings`)}
+      {title}
     </Headline>
   );
 };

products/ASC.Files/Client/src/components/pages/Settings/index.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { connect } from "react-redux";
 import { withRouter } from "react-router";
 import { PageLayout, utils, Loaders } from "asc-web-common";
@@ -14,9 +14,12 @@ import {
   getFilesSettings,
   setIsLoading,
   setFirstLoad,
+  setSelectedNode,
 } from "../../../store/files/actions";
 import { getSettingsTree, getIsLoading } from "../../../store/files/selectors";
 
+import { setDocumentTitle } from "../../../helpers/utils";
+
 const i18n = createI18N({
   page: "Settings",
   localesPath: "pages/Settings",
@@ -32,19 +35,44 @@ const PureSettings = ({
   getFilesSettings,
   setIsLoading,
   setFirstLoad,
+  setSelectedNode,
 }) => {
-  //console.log("Settings render()");
+  const [title, setTitle] = useState("");
   const { setting } = match.params;
 
+  useEffect(() => {
+    switch (setting) {
+      case "common":
+        setTitle("CommonSettings");
+        break;
+      case "admin":
+        setTitle("AdminSettings");
+        break;
+      case "thirdparty":
+        setTitle("ThirdPartySettings");
+        break;
+      default:
+        setTitle("CommonSettings");
+        break;
+    }
+  }, [setting]);
   useEffect(() => {
     if (Object.keys(settingsTree).length === 0) {
       setIsLoading(true);
       getFilesSettings().then(() => {
         setIsLoading(false);
         setFirstLoad(false);
+        setSelectedNode([setting]);
       });
     }
-  }, [getFilesSettings, setIsLoading, setFirstLoad, settingsTree]);
+  }, [
+    setting,
+    getFilesSettings,
+    setIsLoading,
+    setFirstLoad,
+    settingsTree,
+    setSelectedNode,
+  ]);
 
   useEffect(() => {
     if (isLoading) {
@@ -56,6 +84,10 @@ const PureSettings = ({
 
   //console.log("render settings");
 
+  useEffect(() => {
+    setDocumentTitle(t(`${title}`));
+  }, [title, t]);
+
   return (
     <>
       <PageLayout>
@@ -75,7 +107,7 @@ const PureSettings = ({
           {Object.keys(settingsTree).length === 0 && isLoading ? (
             <Loaders.Headline />
           ) : (
-            <SectionHeaderContent setting={setting} t={t} />
+            <SectionHeaderContent title={t(`${title}`)} />
           )}
         </PageLayout.SectionHeader>
 
@@ -116,6 +148,7 @@ const mapDispatchToProps = (dispatch) => {
     setIsLoading: (isLoading) => dispatch(setIsLoading(isLoading)),
     getFilesSettings: () => dispatch(getFilesSettings()),
     setFirstLoad: (firstLoad) => dispatch(setFirstLoad(firstLoad)),
+    setSelectedNode: (node) => dispatch(setSelectedNode(node)),
   };
 };