Web: People: Added conditions for going to the page with the avatar editor

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

@@ -3,26 +3,73 @@ import { withRouter } from "react-router";
 import { connect } from "react-redux";
 import styled from 'styled-components';
 import { withTranslation } from "react-i18next";
+import { Button } from "asc-web-components";
+import { fetchProfile } from "../../../../../store/profile/actions";
+import { setDocumentTitle } from "../../../../../helpers/utils";
 
 
 const InfoContainer = styled.div`
   margin-bottom: 24px;
 `;
 
-const SectionBodyContent = props => {
+class SectionBodyContent extends React.PureComponent{
+  constructor(props) {
+    super(props);
+  }
 
-  const {t} = props
+  componentDidMount() {
+    const { match, fetchProfile, t } = this.props;
+    const { userId } = match.params;
 
-  return (
-    <InfoContainer>
+    setDocumentTitle(t("ProfileAction"));
+
+    if (userId) {
+      fetchProfile(userId);
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    const { match, fetchProfile } = this.props;
+    const { userId } = match.params;
+    const prevUserId = prevProps.match.params.userId;
+
+    if (userId !== undefined && userId !== prevUserId) {
+      fetchProfile(userId);
+    }
+  }
+
+  onBackClick = () => {
+    const {profile, settings} = this.props
+
+    debugger
+
+    this.props.history.push(`${settings.homepage}/edit/${profile.userName}`)
+  }
+
+  render(){
+
+    const {t, profile} = this.props
+
+    return(
+      <InfoContainer>
         {t("UploadNewPhoto")}
-    </InfoContainer>
-  );
-};
+        <Button
+          label={t("Back")}
+          onClick={this.onBackClick}
+          size="big"
+          primary
+        />
+      </InfoContainer>
+      
+    )
+  }
+}
 
 function mapStateToProps(state) {
   return {
+    profile: state.profile.targetUser,
+    settings: state.auth.settings
   };
 }
 
-export default connect(mapStateToProps)(withTranslation()(withRouter(SectionBodyContent)));
+export default connect(mapStateToProps, { fetchProfile })(withTranslation()(withRouter(SectionBodyContent)));

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

@@ -24,12 +24,12 @@ const textStyle = {
 };
 
 const SectionHeaderContent = props => {
-  const { history, settings } = props;
+  const { history, settings, profile } = props;
   const { t } = useTranslation();
 
   const onClickBack = useCallback(() => {
-    history.push(settings.homepage);
-  }, [history, settings]);
+    history.push(`${settings.homepage}/edit/${profile.userName}`);
+  }, [history, settings, profile]);
 
   return (
     <Wrapper>

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

@@ -6,7 +6,8 @@ import {
   Button,
   Textarea,
   AvatarEditor,
-  Text
+  Text,
+  utils
 } from "asc-web-components";
 import { withTranslation, Trans } from "react-i18next";
 import {
@@ -33,7 +34,9 @@ import DepartmentField from "./FormFields/DepartmentField";
 import ContactsField from "./FormFields/ContactsField";
 import InfoFieldContainer from "./FormFields/InfoFieldContainer";
 import { api, toastr } from "asc-web-common";
+import { isMobile } from "react-device-detect";
 const { createThumbnailsAvatar, loadAvatar } = api.people;
+const { isTablet } = utils.device;
 
 class CreateUserForm extends React.Component {
   constructor(props) {
@@ -60,6 +63,7 @@ class CreateUserForm extends React.Component {
     this.onRemoveGroup = this.onRemoveGroup.bind(this);
 
     this.openAvatarEditor = this.openAvatarEditor.bind(this);
+    this.openAvatarEditorPage = this.openAvatarEditorPage.bind(this);
     this.onSaveAvatar = this.onSaveAvatar.bind(this);
     this.onCloseAvatarEditor = this.onCloseAvatarEditor.bind(this);
     this.createAvatar = this.createAvatar.bind(this);
@@ -109,6 +113,10 @@ class CreateUserForm extends React.Component {
     });
   }
 
+  openAvatarEditorPage() {
+    this.props.history.push(`${this.props.settings.homepage}/edit-avatar/${this.props.profile.userName}`);
+  }
+
   onLoadFileAvatar(file) {
     let data = new FormData();
     let _this = this;
@@ -165,6 +173,12 @@ class CreateUserForm extends React.Component {
     if (this.props.match.params.type !== prevProps.match.params.type) {
       this.setState(this.mapPropsToState(this.props));
     }
+
+    const isMobileDevice = isMobile || isTablet()
+
+    if(prevState.isMobile !== isMobileDevice){
+      this.setState({ isMobile: isMobileDevice });
+    }
   }
 
   mapPropsToState = props => {
@@ -200,7 +214,8 @@ class CreateUserForm extends React.Component {
         y: 0,
         width: 0,
         height: 0
-      }
+      },
+      isMobile: isMobile || isTablet
     };
   };
 
@@ -352,7 +367,7 @@ class CreateUserForm extends React.Component {
     this.setState({ errors: { ...this.state.errors, email: !value.isValid } });
 
   render() {
-    const { isLoading, errors, profile, selector } = this.state;
+    const { isLoading, errors, profile, selector, isMobile } = this.state;
     const { t, settings, i18n } = this.props;
     const {
       regDateCaption,
@@ -373,7 +388,7 @@ class CreateUserForm extends React.Component {
               editing={true}
               source={this.state.croppedAvatarImage}
               editLabel={t("AddButton")}
-              editAction={this.openAvatarEditor}
+              editAction={isMobile ? this.openAvatarEditorPage : this.openAvatarEditor}
             />
             <AvatarEditor
               image={this.state.avatar.image}

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

@@ -7,7 +7,8 @@ import {
   Textarea,
   Text,
   AvatarEditor,
-  Link
+  Link,
+  utils
 } from "asc-web-components";
 import { withTranslation, Trans } from "react-i18next";
 import {
@@ -43,7 +44,9 @@ import {
   ChangePasswordDialog,
   ChangePhoneDialog
 } from "../../../../dialogs";
+import { isMobile } from "react-device-detect";
 const { createThumbnailsAvatar, loadAvatar, deleteAvatar } = api.people;
+const { isTablet } = utils.device;
 
 const dialogsDataset = {
   changeEmail: "changeEmail",
@@ -83,6 +86,7 @@ class UpdateUserForm extends React.Component {
     this.onContactsItemRemove = this.onContactsItemRemove.bind(this);
 
     this.openAvatarEditor = this.openAvatarEditor.bind(this);
+    this.openAvatarEditorPage = this.openAvatarEditorPage.bind(this);
     this.onSaveAvatar = this.onSaveAvatar.bind(this);
     this.onCloseAvatarEditor = this.onCloseAvatarEditor.bind(this);
     this.onLoadFileAvatar = this.onLoadFileAvatar.bind(this);
@@ -100,6 +104,12 @@ class UpdateUserForm extends React.Component {
     if (this.props.match.params.userId !== prevProps.match.params.userId) {
       this.setState(this.mapPropsToState(this.props));
     }
+
+    const isMobileDevice = isMobile || isTablet()
+
+    if(prevState.isMobile !== isMobileDevice){
+      this.setState({ isMobile: isMobileDevice });
+    }
   }
 
   mapPropsToState = props => {
@@ -152,7 +162,8 @@ class UpdateUserForm extends React.Component {
         [dialogsDataset.changePhone]: false,
         [dialogsDataset.changeEmail]: false,
         currentDialog: ""
-      }
+      },
+      isMobile: isMobile || isTablet
     };
 
     //Set unique contacts id
@@ -305,6 +316,10 @@ class UpdateUserForm extends React.Component {
     });
   }
 
+  openAvatarEditorPage() {
+    this.props.history.push(`${this.props.settings.homepage}/edit-avatar/${this.props.profile.userName}`);
+  }
+
   onLoadFileAvatar(file, callback) {
     this.setState({ isLoading: true });
     let data = new FormData();
@@ -426,7 +441,7 @@ class UpdateUserForm extends React.Component {
   }
 
   render() {
-    const { isLoading, errors, profile, selector, dialogsVisible } = this.state;
+    const { isLoading, errors, profile, selector, dialogsVisible, isMobile } = this.state;
     const { t, i18n, settings } = this.props;
     const {
       guestCaption,
@@ -525,7 +540,7 @@ class UpdateUserForm extends React.Component {
               userName={profile.displayName}
               editing={true}
               editLabel={t("editAvatar")}
-              editAction={this.openAvatarEditor}
+              editAction={isMobile ? this.openAvatarEditorPage : this.openAvatarEditor}
             />
             <AvatarEditor
               image={this.state.avatar.image}