web: People: ProfileAction:

1) changed ProfileAction to class component
2) react hooks replaced with component state
3) fetching profile data from redux store

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
-      ? <>
-        <Backdrop visible={isBackdropVisible} onClick={onBackdropClick} />
-        <NPL.Article visible={isArticleVisible} pinned={isArticlePinned}>
-          <NPL.ArticleHeader visible={isArticlePinned}>
-            <ArticleHeaderContent />
-          </NPL.ArticleHeader>
-          <NPL.ArticleMainButton>
-            <ArticleMainButtonContent />
-          </NPL.ArticleMainButton>
-          <NPL.ArticleBody>
-            <ArticleBodyContent />
-          </NPL.ArticleBody>
-          <NPL.ArticlePinPanel pinned={isArticlePinned} pinText="Pin this panel" onPin={onPinArticle} unpinText="Unpin this panel" onUnpin={onUnpinArticle} />
-        </NPL.Article>
-        <NPL.Section>
-          <NPL.SectionHeader>
-            <SectionHeaderContent profile={profile} userType={type} />
-          </NPL.SectionHeader>
-          <NPL.SectionBody>
-            <SectionBodyContent profile={profile} userType={type} />
-          </NPL.SectionBody>
-          <NPL.SectionToggler visible={!isArticlePinned} onClick={onShowArticle} />
-        </NPL.Section>
-      </>
-      : <>
-        <NPL.Section>
-          <NPL.SectionBody>
-            <Loader className="pageLoader" type="rombs" size={40} />
-          </NPL.SectionBody>
-        </NPL.Section>
-      </> 
-  );
-};
+    return (
+      profile
+        ? <>
+          <Backdrop visible={isBackdropVisible} onClick={this.onBackdropClick} />
+          <NPL.Article visible={isArticleVisible} pinned={isArticlePinned}>
+            <NPL.ArticleHeader visible={isArticlePinned}>
+              <ArticleHeaderContent />
+            </NPL.ArticleHeader>
+            <NPL.ArticleMainButton>
+              <ArticleMainButtonContent />
+            </NPL.ArticleMainButton>
+            <NPL.ArticleBody>
+              <ArticleBodyContent />
+            </NPL.ArticleBody>
+            <NPL.ArticlePinPanel pinned={isArticlePinned} pinText="Pin this panel" onPin={this.onPinArticle} unpinText="Unpin this panel" onUnpin={this.onUnpinArticle} />
+          </NPL.Article>
+          <NPL.Section>
+            <NPL.SectionHeader>
+              <SectionHeaderContent profile={profile} userType={type} />
+            </NPL.SectionHeader>
+            <NPL.SectionBody>
+              <SectionBodyContent profile={profile} userType={type} />
+            </NPL.SectionBody>
+            <NPL.SectionToggler visible={!isArticlePinned} onClick={this.onShowArticle} />
+          </NPL.Section>
+        </>
+        : <>
+          <NPL.Section>
+            <NPL.SectionBody>
+              <Loader className="pageLoader" type="rombs" size={40} />
+            </NPL.SectionBody>
+          </NPL.Section>
+        </> 
+    );
+  }
+}
 
 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);
+function mapDispatchToProps(dispatch){
+  return {
+    fetchAndSetUser: function (userId) {
+      dispatch(fetchAndSetUser(userId));
+    },
+    setUser: function (user){
+      dispatch(setUser(user));
+    }
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(ProfileAction);