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,116 +275,129 @@ 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 =
+        (contacts &&
+          contacts.social &&
+          contacts.social.length > 0 &&
+          createContacts(contacts.social)) ||
+        null;
+      const infoContacts = contacts && createContacts(contacts.contact);
+      //const isSelf = isMe(viewer, profile.userName);
 
-    const contacts = profile.contacts && getUserContacts(profile.contacts);
-    const role = getUserRole(profile);
-    const socialContacts =
-      (contacts &&
-        contacts.social &&
-        contacts.social.length > 0 &&
-        createContacts(contacts.social)) ||
-      null;
-    const infoContacts = contacts && createContacts(contacts.contact);
-    //const isSelf = isMe(viewer, profile.userName);
-
-    return (
-      <ProfileWrapper>
-        <AvatarWrapper>
-          <Avatar
-            size="max"
-            role={role}
-            source={profile.avatarMax}
-            userName={profile.displayName}
-          />
-          {profile.status !== 2 && (isAdmin || isSelf) && (
-            <EditButtonWrapper>
-              <Button
-                size="big"
-                scale={true}
-                label={t("EditUser")}
-                title={t("EditUser")}
-                onClick={this.onEditProfileClick}
-              />
-            </EditButtonWrapper>
-          )}
-        </AvatarWrapper>
-        <ProfileInfo
-          profile={profile}
-          isSelf={isSelf}
-          isAdmin={isAdmin}
-          t={t}
-          //cultures={cultures}
-          //culture={culture}
-        />
-
-        {isSelf && this.oauthDataExists() && (
-          <ToggleWrapper>
-            <ToggleContent label={t("LoginSettings")} isOpen={true}>
-              <ProviderButtonsWrapper>
-                {this.providerButtons()}
-              </ProviderButtonsWrapper>
-            </ToggleContent>
-          </ToggleWrapper>
-        )}
-        {isSelf && false && (
-          <ToggleWrapper isSelf={true}>
-            <ToggleContent label={t("Subscriptions")} isOpen={true}>
-              <Text as="span">
+      return (
+        <ProfileWrapper>
+          <AvatarWrapper>
+            <Avatar
+              size="max"
+              role={role}
+              source={profile.avatarMax}
+              userName={profile.displayName}
+            />
+            {profile.status !== 2 && (isAdmin || isSelf) && (
+              <EditButtonWrapper>
                 <Button
                   size="big"
-                  label={t("EditSubscriptionsBtn")}
-                  primary={true}
-                  onClick={this.onEditSubscriptionsClick}
+                  scale={true}
+                  label={t("EditUser")}
+                  title={t("EditUser")}
+                  onClick={this.onEditProfileClick}
                 />
-              </Text>
-            </ToggleContent>
-          </ToggleWrapper>
-        )}
-        {profile.notes && (
-          <ToggleWrapper>
-            <ToggleContent label={t("Translations:Comments")} isOpen={true}>
-              <Text as="span">{profile.notes}</Text>
-            </ToggleContent>
-          </ToggleWrapper>
-        )}
-        {profile.contacts && (
-          <ToggleWrapper isContacts={true}>
-            <ToggleContent label={t("ContactInformation")} isOpen={true}>
-              <Text as="span">{infoContacts}</Text>
-            </ToggleContent>
-          </ToggleWrapper>
-        )}
-        {socialContacts && (
-          <ToggleWrapper isContacts={true}>
-            <ToggleContent
-              label={t("Translations:SocialProfiles")}
-              isOpen={true}
-            >
-              <Text as="span">{socialContacts}</Text>
-            </ToggleContent>
-          </ToggleWrapper>
-        )}
-      </ProfileWrapper>
-    );
+              </EditButtonWrapper>
+            )}
+          </AvatarWrapper>
+          <ProfileInfo
+            profile={profile}
+            isSelf={isSelf}
+            isAdmin={isAdmin}
+            t={t}
+            //cultures={cultures}
+            //culture={culture}
+          />
+
+          {isSelf && this.oauthDataExists() && (
+            <ToggleWrapper>
+              <ToggleContent label={t("LoginSettings")} isOpen={true}>
+                <ProviderButtonsWrapper>
+                  {this.providerButtons()}
+                </ProviderButtonsWrapper>
+              </ToggleContent>
+            </ToggleWrapper>
+          )}
+          {isSelf && false && (
+            <ToggleWrapper isSelf={true}>
+              <ToggleContent label={t("Subscriptions")} isOpen={true}>
+                <Text as="span">
+                  <Button
+                    size="big"
+                    label={t("EditSubscriptionsBtn")}
+                    primary={true}
+                    onClick={this.onEditSubscriptionsClick}
+                  />
+                </Text>
+              </ToggleContent>
+            </ToggleWrapper>
+          )}
+          {profile.notes && (
+            <ToggleWrapper>
+              <ToggleContent label={t("Translations:Comments")} isOpen={true}>
+                <Text as="span">{profile.notes}</Text>
+              </ToggleContent>
+            </ToggleWrapper>
+          )}
+          {profile.contacts && (
+            <ToggleWrapper isContacts={true}>
+              <ToggleContent label={t("ContactInformation")} isOpen={true}>
+                <Text as="span">{infoContacts}</Text>
+              </ToggleContent>
+            </ToggleWrapper>
+          )}
+          {socialContacts && (
+            <ToggleWrapper isContacts={true}>
+              <ToggleContent
+                label={t("Translations:SocialProfiles")}
+                isOpen={true}
+              >
+                <Text as="span">{socialContacts}</Text>
+              </ToggleContent>
+            </ToggleWrapper>
+          )}
+        </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,88 +427,90 @@ class SectionHeaderContent extends React.PureComponent {
   render() {
     const { profile, isAdmin, viewer, t, filter, history, isMe } = this.props;
     const { avatar, visibleAvatarEditor, dialogsVisible } = this.state;
-    const contextOptions = () => this.getUserContextOptions(profile, viewer);
+    if (profile) {
+      const contextOptions = () => this.getUserContextOptions(profile, viewer);
 
-    return (
-      <StyledContainer
-        showContextButton={(isAdmin && !profile.isOwner) || isMe}
-      >
-        <IconButton
-          iconName="/static/images/arrow.path.react.svg"
-          color="#A3A9AE"
-          size="17"
-          hoverColor="#657077"
-          isFill={true}
-          onClick={this.onClickBack}
-          className="arrow-button"
-        />
-        <Headline className="header-headline" type="content" truncate={true}>
-          {profile.displayName}
-          {profile.isLDAP && ` (${t("Translations:LDAPLbl")})`}
-        </Headline>
-        {((isAdmin && !profile.isOwner) || isMe) && (
-          <ContextMenuButton
-            className="action-button"
-            directionX="right"
-            title={t("Common:Actions")}
-            iconName="/static/images/vertical-dots.react.svg"
-            size={17}
+      return (
+        <StyledContainer
+          showContextButton={(isAdmin && !profile.isOwner) || isMe}
+        >
+          <IconButton
+            iconName="/static/images/arrow.path.react.svg"
             color="#A3A9AE"
-            getData={contextOptions}
-            isDisabled={false}
+            size="17"
+            hoverColor="#657077"
+            isFill={true}
+            onClick={this.onClickBack}
+            className="arrow-button"
           />
-        )}
+          <Headline className="header-headline" type="content" truncate={true}>
+            {profile.displayName}
+            {profile.isLDAP && ` (${t("Translations:LDAPLbl")})`}
+          </Headline>
+          {((isAdmin && !profile.isOwner) || isMe) && (
+            <ContextMenuButton
+              className="action-button"
+              directionX="right"
+              title={t("Common:Actions")}
+              iconName="/static/images/vertical-dots.react.svg"
+              size={17}
+              color="#A3A9AE"
+              getData={contextOptions}
+              isDisabled={false}
+            />
+          )}
 
-        <AvatarEditor
-          image={avatar.image}
-          visible={visibleAvatarEditor}
-          onClose={this.onCloseAvatarEditor}
-          onSave={this.onSaveAvatar}
-          onLoadFile={this.onLoadFileAvatar}
-          headerLabel={t("Common:EditAvatar")}
-          selectNewPhotoLabel={t("Translations:selectNewPhotoLabel")}
-          orDropFileHereLabel={t("Translations:orDropFileHereLabel")}
-          unknownTypeError={t("Translations:ErrorUnknownFileImageType")}
-          maxSizeFileError={t("Translations:maxSizeFileError")}
-          unknownError={t("Common:Error")}
-          saveButtonLabel={t("Common:SaveButton")}
-        />
-
-        {dialogsVisible.deleteSelfProfile && (
-          <DeleteSelfProfileDialog
-            visible={dialogsVisible.deleteSelfProfile}
-            onClose={this.toggleDeleteSelfProfileDialog}
-            email={this.state.profile.email}
+          <AvatarEditor
+            image={avatar.image}
+            visible={visibleAvatarEditor}
+            onClose={this.onCloseAvatarEditor}
+            onSave={this.onSaveAvatar}
+            onLoadFile={this.onLoadFileAvatar}
+            headerLabel={t("Common:EditAvatar")}
+            selectNewPhotoLabel={t("Translations:selectNewPhotoLabel")}
+            orDropFileHereLabel={t("Translations:orDropFileHereLabel")}
+            unknownTypeError={t("Translations:ErrorUnknownFileImageType")}
+            maxSizeFileError={t("Translations:maxSizeFileError")}
+            unknownError={t("Common:Error")}
+            saveButtonLabel={t("Common:SaveButton")}
           />
-        )}
 
-        {dialogsVisible.changePassword && (
-          <ChangePasswordDialog
-            visible={dialogsVisible.changePassword}
-            onClose={this.toggleChangePasswordDialog}
-            email={this.state.profile.email}
-          />
-        )}
+          {dialogsVisible.deleteSelfProfile && (
+            <DeleteSelfProfileDialog
+              visible={dialogsVisible.deleteSelfProfile}
+              onClose={this.toggleDeleteSelfProfileDialog}
+              email={this.state.profile.email}
+            />
+          )}
 
-        {dialogsVisible.changeEmail && (
-          <ChangeEmailDialog
-            visible={dialogsVisible.changeEmail}
-            onClose={this.toggleChangeEmailDialog}
-            user={this.state.profile}
-          />
-        )}
+          {dialogsVisible.changePassword && (
+            <ChangePasswordDialog
+              visible={dialogsVisible.changePassword}
+              onClose={this.toggleChangePasswordDialog}
+              email={this.state.profile.email}
+            />
+          )}
 
-        {dialogsVisible.deleteProfileEver && (
-          <DeleteProfileEverDialog
-            visible={dialogsVisible.deleteProfileEver}
-            onClose={this.toggleDeleteProfileEverDialog}
-            user={this.state.profile}
-            filter={filter}
-            history={history}
-          />
-        )}
-      </StyledContainer>
-    );
+          {dialogsVisible.changeEmail && (
+            <ChangeEmailDialog
+              visible={dialogsVisible.changeEmail}
+              onClose={this.toggleChangeEmailDialog}
+              user={this.state.profile}
+            />
+          )}
+
+          {dialogsVisible.deleteProfileEver && (
+            <DeleteProfileEverDialog
+              visible={dialogsVisible.deleteProfileEver}
+              onClose={this.toggleDeleteProfileEverDialog}
+              user={this.state.profile}
+              filter={filter}
+              history={history}
+            />
+          )}
+        </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,