Web: People: refactoring - changing document.title with changeTitleDocument()

products/ASC.People/Client/src/components/Article/Body/index.js

@@ -13,7 +13,7 @@ const i18n = createI18N({
   localesPath: "Article"
 });
 
-const { changeLanguage } = commonUtils;
+const { changeLanguage, changeDocumentTitle } = commonUtils;
 const { getCurrentModule, isAdmin } = initStore.auth.selectors;
 
 const StyledTreeMenu = styled(TreeMenu)`
@@ -64,11 +64,13 @@ class ArticleBodyContent extends React.Component {
     this.changeTitleDocument();
   }
 
-  componentDidUpdate() {
-    this.changeTitleDocument();
+  componentDidUpdate(prevProps) {
+    if(prevProps.selectedKeys[0] !== this.props.selectedKeys[0]) {
+      this.changeTitleDocument();
+    }
   }
 
-  changeTitleDocument() {
+  changeTitleDocument(data = null) {
     const {
       organizationName,
       groups,
@@ -76,10 +78,10 @@ class ArticleBodyContent extends React.Component {
       currentModuleName
     } = this.props;
 
-    const currentGroup = getSelectedGroup(groups, selectedKeys[0]);
-    document.title = currentGroup
-      ? `${currentGroup.name} – ${currentModuleName}`
-      : `${currentModuleName} – ${organizationName}`;
+    const currentGroup = getSelectedGroup(groups, data ? data[0] : selectedKeys[0]);
+    currentGroup
+      ? changeDocumentTitle(`${currentGroup.name} – ${currentModuleName}`)
+      : changeDocumentTitle(`${currentModuleName} – ${organizationName}`);
   }
   shouldComponentUpdate(nextProps) {
     if (
@@ -97,17 +99,10 @@ class ArticleBodyContent extends React.Component {
 
   onSelect = data => {
     const {
-      currentModuleName,
-      selectGroup,
-      groups,
-      organizationName
+      selectGroup
     } = this.props;
 
-    const currentGroup = getSelectedGroup(groups, data[0]);
-    document.title = currentGroup
-      ? `${currentGroup.name} – ${currentModuleName}`
-      : `${currentModuleName} – ${organizationName}`;
-
+    this.changeTitleDocument(data)
     selectGroup(
       data && data.length === 1 && data[0] !== "root" ? data[0] : null
     );

products/ASC.People/Client/src/components/pages/GroupAction/index.js

@@ -15,7 +15,7 @@ const i18n = createI18N({
   page: "GroupAction",
   localesPath: "pages/GroupAction"
 });
-const { changeLanguage } = utils;
+const { changeLanguage, changeDocumentTitle } = utils;
 const { isAdmin } = store.auth.selectors;
 
 class GroupAction extends React.Component {
@@ -23,8 +23,7 @@ class GroupAction extends React.Component {
     const { match, fetchGroup, t } = this.props;
     const { groupId } = match.params;
 
-    document.title = `${t("GroupAction")} – ${t("People")}`;
-
+    changeDocumentTitle(`${t("GroupAction")} – ${t("People")}`);
     changeLanguage(i18n);
 
     if (groupId) {

products/ASC.People/Client/src/components/pages/Profile/index.js

@@ -16,15 +16,13 @@ const i18n = createI18N({
   page: "Profile",
   localesPath: "pages/Profile"
 });
-const { changeLanguage } = utils;
+const { changeLanguage, changeDocumentTitle } = utils;
 const { isAdmin } = store.auth.selectors;
 
 class PureProfile extends React.Component {
   constructor(props) {
     super(props);
 
-    document.title = `${props.t("Profile")} – ${props.t("People")}`;
-
     this.state = {
       queryString: `${props.location.search.slice(1)}`
     };
@@ -34,6 +32,8 @@ class PureProfile extends React.Component {
     const { match, fetchProfile, t } = this.props;
     const { userId } = match.params;
 
+    changeDocumentTitle(`${t("Profile")} – ${t("People")}`);
+
     const queryParams = this.state.queryString.split("&");
     const arrayOfQueryParams = queryParams.map(queryParam =>
       queryParam.split("=")

products/ASC.People/Client/src/components/pages/ProfileAction/index.js

@@ -20,7 +20,7 @@ const i18n = createI18N({
   page: "ProfileAction",
   localesPath: "pages/ProfileAction"
 });
-const { changeLanguage } = utils;
+const { changeLanguage, changeDocumentTitle } = utils;
 const { isAdmin } = store.auth.selectors;
 
 class ProfileAction extends React.Component {
@@ -28,8 +28,7 @@ class ProfileAction extends React.Component {
     const { match, fetchProfile, t } = this.props;
     const { userId } = match.params;
 
-    document.title = `${t("ProfileAction")} – ${t("People")}`;
-
+    changeDocumentTitle(`${t("ProfileAction")} – ${t("People")}`);
     changeLanguage(i18n);
 
     if (userId) {