Web: People: added withLoader to Profile

products/ASC.People/Client/src/HOCs/withLoader.js

@@ -30,12 +30,12 @@ const WithLoader = (WrappedComponent) => (Loader) => {
         cleanTimer();
       };
     }, [isLoading]);
-    console.log(firstLoad, isLoading, isLoaded, isMobile && inLoad, tReady);
-    return firstLoad || isLoading || !tReady || inLoad || isRefresh ? (
-      //!isLoaded ||
-      //(isMobile && inLoad) ||
+
+    return firstLoad ||
+      !isLoaded ||
+      (isMobile && inLoad) ||
       //isRefresh ||
-      //!tReady ?
+      !tReady ? (
       Loader
     ) : (
       <WrappedComponent {...props} />

products/ASC.People/Client/src/pages/Profile/Section/Body/index.js

@@ -28,6 +28,9 @@ import { AppServerConfig, providersData } from "@appserver/common/constants";
 import { unlinkOAuth, linkOAuth } from "@appserver/common/api/people";
 import { getAuthProviders } from "@appserver/common/api/settings";
 
+import Loaders from "@appserver/common/components/Loaders";
+import withLoader from "../../../../HOCs/withLoader";
+
 const ProfileWrapper = styled.div`
   display: flex;
   align-items: flex-start;
@@ -119,6 +122,7 @@ class SectionBodyContent extends React.PureComponent {
     //}
 
     if (!isSelf) return;
+
     try {
       await getAuthProviders().then((providers) => {
         setProviders(providers);
@@ -271,7 +275,7 @@ class SectionBodyContent extends React.PureComponent {
 
   render() {
     const { profile, isAdmin, t, isSelf } = this.props;
-
+    if (profile) {
       const contacts = profile.contacts && getUserContacts(profile.contacts);
       const role = getUserRole(profile);
       const socialContacts =
@@ -362,25 +366,38 @@ class SectionBodyContent extends React.PureComponent {
           )}
         </ProfileWrapper>
       );
+    } else return null;
   }
 }
 
 export default withRouter(
-  inject(({ auth, peopleStore }) => ({
-    isAdmin: auth.isAdmin,
-    profile: peopleStore.targetUserStore.targetUser,
-    viewer: auth.userStore.user,
-    isTabletView: auth.settingsStore.isTabletView,
-    isSelf: peopleStore.targetUserStore.isMe,
-    avatarMax: peopleStore.avatarEditorStore.avatarMax,
-    setAvatarMax: peopleStore.avatarEditorStore.setAvatarMax,
-    providers: peopleStore.usersStore.providers,
-    setProviders: peopleStore.usersStore.setProviders,
-    getOAuthToken: auth.settingsStore.getOAuthToken,
-    getLoginLink: auth.settingsStore.getLoginLink,
-  }))(
+  inject(({ auth, peopleStore }) => {
+    const { isAdmin, userStore, settingsStore } = auth;
+    const { user: viewer } = userStore;
+    const { isTabletView, getOAuthToken, getLoginLink } = settingsStore;
+    const { targetUserStore, avatarEditorStore, usersStore } = peopleStore;
+    const { targetUser: profile, isMe: isSelf } = targetUserStore;
+    const { avatarMax, setAvatarMax } = avatarEditorStore;
+    const { providers, setProviders } = usersStore;
+
+    return {
+      isAdmin,
+      profile,
+      viewer,
+      isTabletView,
+      isSelf,
+      avatarMax,
+      setAvatarMax,
+      providers,
+      setProviders,
+      getOAuthToken,
+      getLoginLink,
+    };
+  })(
     observer(
-      withTranslation(["Profile", "Common", "Translations"])(SectionBodyContent)
+      withTranslation(["Profile", "Common", "Translations"])(
+        withLoader(SectionBodyContent)(<Loaders.ProfileView />)
+      )
     )
   )
 );

products/ASC.People/Client/src/pages/Profile/Section/Header/index.js

@@ -28,6 +28,9 @@ import {
 import config from "../../../../../package.json";
 import { combineUrl } from "@appserver/common/utils";
 
+import Loaders from "@appserver/common/components/Loaders";
+import withLoader from "../../../../HOCs/withLoader";
+
 const StyledContainer = styled.div`
   position: relative;
 
@@ -74,8 +77,10 @@ class SectionHeaderContent extends React.PureComponent {
   }
 
   componentDidUpdate(prevProps) {
-    if (this.props.profile.userName !== prevProps.profile.userName) {
-      console.log(this.props.profile.userName);
+    if (
+      !prevProps.profile ||
+      this.props.profile.userName !== prevProps.profile.userName
+    ) {
       this.setState(this.mapPropsToState(this.props));
     }
   }
@@ -422,6 +427,7 @@ class SectionHeaderContent extends React.PureComponent {
   render() {
     const { profile, isAdmin, viewer, t, filter, history, isMe } = this.props;
     const { avatar, visibleAvatarEditor, dialogsVisible } = this.state;
+    if (profile) {
       const contextOptions = () => this.getUserContextOptions(profile, viewer);
 
       return (
@@ -504,6 +510,7 @@ class SectionHeaderContent extends React.PureComponent {
           )}
         </StyledContainer>
       );
+    } else return null;
   }
 }
 
@@ -527,7 +534,7 @@ export default withRouter(
   })(
     observer(
       withTranslation(["Profile", "Common", "Translations"])(
-        SectionHeaderContent
+        withLoader(SectionHeaderContent)(<Loaders.SectionHeader />)
       )
     )
   )

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

@@ -2,7 +2,6 @@ import React from "react";
 import PropTypes from "prop-types";
 import PageLayout from "@appserver/common/components/PageLayout";
 import toastr from "studio/toastr";
-import Loaders from "@appserver/common/components/Loaders";
 import {
   ArticleHeaderContent,
   ArticleMainButtonContent,
@@ -94,11 +93,11 @@ class Profile extends React.Component {
         </PageLayout.ArticleBody>
 
         <PageLayout.SectionHeader>
-          {profile ? <SectionHeaderContent /> : <Loaders.SectionHeader />}
+          <SectionHeaderContent />
         </PageLayout.SectionHeader>
 
         <PageLayout.SectionBody>
-          {profile ? <SectionBodyContent /> : <Loaders.ProfileView />}
+          <SectionBodyContent />
         </PageLayout.SectionBody>
       </PageLayout>
     );
@@ -124,7 +123,6 @@ export default withRouter(
       targetUser: profile,
     } = targetUserStore;
     const { setFirstLoad } = loadingStore;
-    console.log(targetUserStore);
     return {
       setDocumentTitle,
       isAdmin,