diff --git a/products/ASC.People/Client/src/components/pages/ProfileAction/index.js b/products/ASC.People/Client/src/components/pages/ProfileAction/index.js
index 2fd3735450..0e9ea2d8ac 100644
--- a/products/ASC.People/Client/src/components/pages/ProfileAction/index.js
+++ b/products/ASC.People/Client/src/components/pages/ProfileAction/index.js
@@ -1,122 +1,163 @@
-import React, { useEffect, useState } from "react";
+import React from "react";
import { connect } from "react-redux";
import PropTypes from "prop-types";
import { Backdrop, NewPageLayout as NPL, Loader } from "asc-web-components";
import { ArticleHeaderContent, ArticleMainButtonContent, ArticleBodyContent } from '../../Article';
import { SectionHeaderContent, SectionBodyContent } from './Section';
-import { getUser } from '../../../utils/api';
+import { setUser, fetchAndSetUser } from '../../../actions/peopleActions';
-const ProfileAction = (props) => {
- console.log("ProfileAction render");
-
- const { auth, match, location } = props;
- const { userId, type } = match.params;
+class ProfileAction extends React.Component {
+ constructor(props) {
+ super(props);
- const [profile, setProfile] = useState(props.profile);
- const [isLoaded, setLoaded] = useState(props.isLoaded);
+ this.state = {
+ isBackdropVisible: false,
+ isArticleVisible: false,
+ isArticlePinned: false
+ }
- const [isBackdropVisible, setIsBackdropVisible] = useState(false);
- const [isArticleVisible, setIsArticleVisible] = useState(false);
- const [isArticlePinned, setIsArticlePinned] = useState(false);
-
- const isEdit = location.pathname.split("/").includes("edit");
+ this.onBackdropClick = this.onBackdropClick.bind(this);
+ this.onPinArticle = this.onPinArticle.bind(this);
+ this.onUnpinArticle = this.onUnpinArticle.bind(this);
+ this.onShowArticle = this.onShowArticle.bind(this);
+ }
- useEffect(() => {
- if (isEdit) {
+ onBackdropClick() {
+ this.setState({
+ isBackdropVisible: false,
+ isArticleVisible: false,
+ isArticlePinned: false
+ });
+ }
+
+ onPinArticle() {
+ this.setState({
+ isBackdropVisible: false,
+ isArticleVisible: true,
+ isArticlePinned: true
+ });
+ }
+
+ onUnpinArticle() {
+ this.setState({
+ isBackdropVisible: true,
+ isArticleVisible: true,
+ isArticlePinned: false
+ });
+ }
+
+ onShowArticle() {
+ this.setState({
+ isBackdropVisible: true,
+ isArticleVisible: true,
+ isArticlePinned: false
+ });
+ }
+
+ componentDidMount() {
+ const { auth, match } = this.props;
+ const { userId, type } = match.params;
+ if (userId) {
if (userId === "@self") {
- setProfile(auth.user);
- setLoaded(true);
+ this.props.setUser(auth.user);
} else {
- getUser(userId)
- .then((res) => {
- if (res.data.error)
- throw (res.data.error);
-
- setProfile(res.data.response);
- setLoaded(true);
- })
- .catch(error => {
- console.error(error);
- });
+ this.props.fetchAndSetUser(userId);
}
} else {
- setProfile(null);
- setLoaded(true);
+ this.props.setUser({isVisitor: type === "guest"});
+ }
+ }
+
+ componentDidUpdate(prevProps) {
+ const currentParams = this.props.match.params;
+ const prevParams = prevProps.match.params;
+
+ if (currentParams.userId !== prevParams.userId || currentParams.type !== prevParams.type) {
+ if (currentParams.userId) {
+ if (currentParams.userId === "@self") {
+ this.props.setUser(this.props.auth.user);
+ } else {
+ this.props.fetchAndSetUser(currentParams.userId);
+ }
+ } else {
+ this.props.setUser({isVisitor: currentParams.type === "guest"});
+ }
}
- }, [isEdit, auth.user, userId]);
+ }
- const onBackdropClick = () => {
- setIsBackdropVisible(false);
- setIsArticleVisible(false);
- setIsArticlePinned(false);
- };
+ componentWillUnmount() {
+ this.props.setUser(null);
+ }
- const onPinArticle = () => {
- setIsBackdropVisible(false);
- setIsArticleVisible(true);
- setIsArticlePinned(true);
- };
+ render() {
+ console.log("ProfileAction render")
- const onUnpinArticle = () => {
- setIsBackdropVisible(true);
- setIsArticleVisible(true);
- setIsArticlePinned(false);
- };
+ const { isBackdropVisible, isArticleVisible, isArticlePinned } = this.state;
+ const { profile, match } = this.props;
+ const { type } = match.params;
- const onShowArticle = () => {
- setIsBackdropVisible(true);
- setIsArticleVisible(true);
- setIsArticlePinned(false);
- };
-
- return (
- isLoaded
- ? <>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- : <>
-
-
-
-
-
-
- );
-};
+ return (
+ profile
+ ? <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ : <>
+
+
+
+
+
+
+ );
+ }
+}
ProfileAction.propTypes = {
auth: PropTypes.object.isRequired,
match: PropTypes.object.isRequired,
profile: PropTypes.object,
- isLoaded: PropTypes.bool
+ fetchAndSetUser: PropTypes.func.isRequired,
+ setUser: PropTypes.func.isRequired
};
function mapStateToProps(state) {
return {
- auth: state.auth
+ auth: state.auth,
+ profile: state.people.targetUser
};
}
-export default connect(mapStateToProps)(ProfileAction);
\ No newline at end of file
+function mapDispatchToProps(dispatch){
+ return {
+ fetchAndSetUser: function (userId) {
+ dispatch(fetchAndSetUser(userId));
+ },
+ setUser: function (user){
+ dispatch(setUser(user));
+ }
+ }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(ProfileAction);
\ No newline at end of file