web: People: ProfileAction loader
This commit is contained in:
parent
3b4ddd6847
commit
e41ca63bcf
@ -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;
|
@ -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;
|
@ -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) {
|
||||
|
Loading…
Reference in New Issue
Block a user