web: People: ProfileAction loader

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

@@ -4,9 +4,7 @@ import { Avatar } from 'asc-web-components';
 
 
 const SectionBodyContent = (props) => {
-  const {profile, history} = props;
-
-  const isEditProfile = profile && profile.id;
+  const {profile} = props;
 
   const getUserRole = (user) => {
     if(user.isOwner) return "owner";
@@ -15,9 +13,7 @@ const SectionBodyContent = (props) => {
     return "user";
   };
 
-  const getEditAvatarLabel = () => {
-    return isEditProfile ? "Edity photo" : "Add photo";
-  }
+  const avatarLabel = profile && profile.id ? "Edit photo" : "Add photo";
 
   const onEditAvatar = () => {};
 
@@ -29,7 +25,7 @@ const SectionBodyContent = (props) => {
           source={profile.avatarBig}
           userName={profile.userName}
           editing={true}
-          editLabel={getEditAvatarLabel()}
+          editLabel={avatarLabel}
           editAction={onEditAvatar}
         />
     </div>
@@ -37,8 +33,7 @@ const SectionBodyContent = (props) => {
 };
 
 SectionBodyContent.propTypes = {
-  profile: PropTypes.object.isRequired,
-  isLoaded: PropTypes.bool
+  profile: PropTypes.object.isRequired
 };
 
 export default SectionBodyContent;

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

@@ -2,7 +2,6 @@ import React from 'react';
 import PropTypes from "prop-types";
 import { IconButton, Text } from 'asc-web-components';
 
-const config = require('../../../../../../package.json');
 
 const wrapperStyle = {
   display: "flex",
@@ -15,29 +14,19 @@ const textStyle = {
 
 const SectionHeaderContent = (props) => {
   const {profile, history} = props;
-
-  const isEditProfile = profile && profile.id;
-
-  const onGoBack = () => {
-    window.location.href = history && history.location ? history.location.pathname : config.homepage;
-  }
-
-  const getHeaderText = () => {
-    return isEditProfile ? profile.userName : "New employee";
-  }
+  const headerText = profile && profile.userName ? profile.userName : "New employee";
 
   return (
     <div style={wrapperStyle}>
-      <IconButton iconName={'ProjectDocumentsUpIcon'} size="16" onClick={onGoBack}/>
-      <Text.ContentHeader style={textStyle}>{getHeaderText()}</Text.ContentHeader>
+      <IconButton iconName={'ProjectDocumentsUpIcon'} size="16" onClick={history.goBack}/>
+      <Text.ContentHeader style={textStyle}>{headerText}</Text.ContentHeader>
     </div>
   );
 };
 
 SectionHeaderContent.propTypes = {
   profile: PropTypes.object.isRequired,
-  history: PropTypes.object.isRequired,
-  isLoaded: PropTypes.bool
+  history: PropTypes.object.isRequired
 };
 
 export default SectionHeaderContent;

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

@@ -2,36 +2,41 @@ import React, { useEffect, useState } from "react";
 import { connect } from "react-redux";
 import PropTypes from "prop-types";
 import { withRouter } from "react-router";
-import _ from "lodash";
-import { PageLayout } from "asc-web-components";
-import {ArticleHeaderContent, ArticleBodyContent} from '../../Article';
-import {SectionHeaderContent, SectionBodyContent} from './Section';
+import { PageLayout, Loader } from "asc-web-components";
+import { ArticleHeaderContent, ArticleBodyContent } from '../../Article';
+import { SectionHeaderContent, SectionBodyContent } from './Section';
 import { getUser } from '../../../utils/api';
 
 const ProfileAction = (props) => {
-  console.log("Profile userId", props.match.params.userId);
-  const { userId } = props.match.params;
-  const { history, auth } = props;
-  const [profile, setProfile] = useState(auth.user);
+  const { auth, history, match } = props;
+  const { userId } = match.params;
+  const [profile, setProfile] = useState(props.profile);
+  const [isLoaded, setLoaded] = useState(props.isLoaded);
 
-  useEffect(() =>{
+  useEffect(() => {
     if(userId === "@self") {
       setProfile(auth.user);
+      setLoaded(true);
     }
     else {
       getUser(userId)
       .then((res) => { 
         setProfile(res.data.response);
+        setLoaded(true);
       });
     }
   }, []);
 
   return (
+    isLoaded ?
       <PageLayout
-          articleHeaderContent={<ArticleHeaderContent />}
-          articleBodyContent={<ArticleBodyContent />}
-          sectionHeaderContent={<SectionHeaderContent profile={profile} history={history} />}
-          sectionBodyContent={<SectionBodyContent profile={profile} history={history} /> }
+        articleHeaderContent={<ArticleHeaderContent />}
+        articleBodyContent={<ArticleBodyContent />}
+        sectionHeaderContent={<SectionHeaderContent profile={profile} history={history} />}
+        sectionBodyContent={<SectionBodyContent profile={profile} history={history} /> }
+      />
+    : <PageLayout
+        sectionBodyContent={<Loader className="pageLoader" type="rombs" size={40} />}
       />
   );
 };
@@ -39,7 +44,9 @@ const ProfileAction = (props) => {
 ProfileAction.propTypes = {
   auth: PropTypes.object.isRequired,
   history: PropTypes.object.isRequired,
-  match: PropTypes.object.isRequired
+  match: PropTypes.object.isRequired,
+  profile: PropTypes.object,
+  isLoaded: PropTypes.bool
 };
 
 function mapStateToProps(state) {