Web: Client: refactoring: added utils.js, replaced changeDocumentTitle() with setDocumentTitle()

web/ASC.Web.Client/src/components/pages/About/index.js

@@ -5,14 +5,15 @@ import { useTranslation } from "react-i18next";
 import version from "../../../../package.json";
 import styled from "styled-components";
 import { Trans } from "react-i18next";
-
 import { createI18N } from "../../../helpers/i18n";
+import { setDocumentTitle } from '../../../helpers/utils';
+
 const i18n = createI18N({
   page: "About",
   localesPath: "pages/About"
 });
 
-const { changeLanguage, changeDocumentTitle } = utils;
+const { changeLanguage } = utils;
 
 const BodyStyle = styled.div`
   margin-top: 24px;
@@ -84,8 +85,8 @@ const Body = () => {
 
   useEffect(() => {
     changeLanguage(i18n);
-    changeDocumentTitle(`${t("AboutTitle")} – ${t("People")}`);
-  }, [t, changeDocumentTitle]);
+    setDocumentTitle(t("AboutTitle"));//TODO: implement the ability to read the current module in redux to implement the template `${t("AboutTitle")} – ${t("People")}`
+  }, [t, setDocumentTitle]);
 
   const gitHub = "GitHub";
   const license = "AGPL-3.0";

web/ASC.Web.Client/src/components/pages/Home/index.js

@@ -8,12 +8,14 @@ import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 
 import { createI18N } from "../../../helpers/i18n";
+import { setDocumentTitle } from "../../../helpers/utils";
+
 const i18n = createI18N({
   page: "Home",
   localesPath: "pages/Home"
 });
 
-const { changeLanguage, changeDocumentTitle } = utils;
+const { changeLanguage } = utils;
 
 const HomeContainer = styled.div`
   padding: 62px 15px 0 15px;
@@ -80,7 +82,7 @@ const Body = ({ modules, match, isLoaded, organizationName }) => {
   const { t } = useTranslation("translation", { i18n });
   const { error } = match.params;
 
-  changeDocumentTitle(`${organizationName}`);
+  setDocumentTitle();
 
   useEffect(() => error && toastr.error(error), [error]);
 

web/ASC.Web.Client/src/components/pages/Settings/categories/common/custom-titles.js

@@ -15,9 +15,7 @@ import {
   restoreGreetingTitle
 } from "../../../../../store/settings/actions";
 import { saveToSessionStorage, getFromSessionStorage } from "../../utils";
-import { utils } from 'asc-web-common';
-
-const { changeDocumentTitle } = utils;
+import { setDocumentTitle } from "../../../../../helpers/utils";
 
 const StyledComponent = styled.div`
   .margin-top {
@@ -56,7 +54,7 @@ class CustomTitles extends React.Component {
 
     greetingTitleFromSessionStorage = getFromSessionStorage("greetingTitle");
 
-    changeDocumentTitle(`${t("Customization")} – ${organizationName}`);
+    setDocumentTitle(t("Customization"));
 
     this.state = {
       isLoadedData: false,

web/ASC.Web.Client/src/components/pages/Settings/categories/common/customization.js

@@ -9,8 +9,9 @@ import {
   getPortalTimezones
 } from "../../../../../store/settings/actions";
 import { default as clientStore } from "../../../../../store/store";
+import { setDocumentTitle } from "../../../../../helpers/utils";
 
-const { changeLanguage, changeDocumentTitle } = utils;
+const { changeLanguage } = utils;
 const {
   getPortalCultures,
   getModules,
@@ -101,7 +102,7 @@ class Customization extends React.Component {
     const languages = mapCulturesToArray(rawCultures, t);
     const timezones = mapTimezonesToArray(rawTimezones);
 
-    changeDocumentTitle(`${t("Customization")} – ${organizationName}`);
+    setDocumentTitle(t("Customization"));
 
     this.state = {
       isLoadedData: false,

web/ASC.Web.Client/src/components/pages/Settings/categories/common/language-and-time-zone.js

@@ -19,8 +19,9 @@ import {
 } from "../../../../../store/settings/actions";
 import { saveToSessionStorage, getFromSessionStorage } from "../../utils";
 import { default as clientStore } from "../../../../../store/store";
+import { setDocumentTitle } from "../../../../../helpers/utils";
 
-const { changeLanguage, changeDocumentTitle } = utils;
+const { changeLanguage } = utils;
 const {
   getPortalCultures,
   getModules,
@@ -96,7 +97,7 @@ class LanguageAndTimeZone extends React.Component {
     languageFromSessionStorage = getFromSessionStorage("language");
     timezoneFromSessionStorage = getFromSessionStorage("timezone");
 
-    changeDocumentTitle(`${t("Customization")} – ${organizationName}`);
+    setDocumentTitle(t("Customization"));
 
     this.state = {
       isLoadedData: false,

web/ASC.Web.Client/src/components/pages/Settings/categories/security/accessRights.js

@@ -12,12 +12,13 @@ import AdminsSettings from "./sub-components/admins";
 // import ModulesSettings from "./sub-components/modules";
 
 import { createI18N } from "../../../../../helpers/i18n";
+import { setDocumentTitle } from "../../../../../helpers/utils";
 const i18n = createI18N({
   page: "Settings",
   localesPath: "pages/Settings"
 });
 
-const { changeLanguage, changeDocumentTitle } = utils;
+const { changeLanguage } = utils;
 
 const MainContainer = styled.div`
   padding-bottom: 16px;
@@ -35,7 +36,7 @@ class PureAccessRights extends Component {
 
     const { t, organizationName } = props;
 
-    changeDocumentTitle(`${t("ManagementCategorySecurity")} – ${organizationName}`);
+    setDocumentTitle(t("ManagementCategorySecurity"));
 
     const url = props.history.location.pathname;
     const newUrl = url.split("/");

web/ASC.Web.Client/src/components/pages/Wizard/index.js

@@ -32,13 +32,15 @@ import {
 } from "../../../store/wizard/actions";
 
 import { createI18N } from "../../../helpers/i18n";
+import { setDocumentTitle } from "../../../helpers/utils";
+
 const i18n = createI18N({
   page: "Wizard",
   localesPath: "pages/Wizard"
 });
 
 const { tablet } = utils.device;
-const { changeLanguage, changeDocumentTitle } = commonUtils;
+const { changeLanguage } = commonUtils;
 
 const { EmailSettings } = utils.email;
 const emailSettings = new EmailSettings();
@@ -100,7 +102,7 @@ class Body extends Component {
       checkingMessages: []
     };
 
-    changeDocumentTitle(t("wizardTitle"));
+    setDocumentTitle(t("wizardTitle"));
   }
 
   async componentDidMount() {

web/ASC.Web.Client/src/helpers/utils.js

@@ -0,0 +1,31 @@
+import { store as commonStore } from 'asc-web-common';
+import store from '../store/store';
+
+const { getCurrentModule } = commonStore.auth.selectors;
+
+export const setDocumentTitle = (subTitle = null ) => {
+  const { auth: commonState } = store.getState();
+
+  const { isAuthenticated, modules, settings } = commonState;
+  const { organizationName, currentProductId } = settings;
+ 
+  let title, currentModule; 
+
+  if(modules && currentProductId ){
+    currentModule = getCurrentModule(modules, currentProductId);
+  }
+  
+  if (subTitle) {
+    if (isAuthenticated && currentModule) {
+      title = subTitle + ' - ' + currentModule.title;
+    } else {
+      title = subTitle + ' - ' + organizationName;
+    }
+  } else if (currentModule && organizationName) {
+    title = currentModule.title + ' - ' + organizationName; 
+  } else {
+    title = organizationName;
+  }
+
+  document.title = title; 
+}