Web: People: refactoring LeaveFormDialog

products/ASC.People/Client/src/components/dialogs/LeaveFormDialog/index.js

@@ -6,6 +6,11 @@ import { withTranslation } from "react-i18next";
 import { utils } from "asc-web-common";
 import ModalDialogContainer from "../ModalDialogContainer";
 import { createI18N } from "../../../helpers/i18n";
+import {
+  setIsVisibleModalLeave,
+  setIsEditingForm,
+} from "../../../store/people/actions";
+
 const i18n = createI18N({
   page: "LeaveFormDialog",
   localesPath: "dialogs/LeaveFormDialog",
@@ -16,28 +21,28 @@ const { changeLanguage } = utils;
 class LeaveFormDialogComponent extends React.Component {
   constructor(props) {
     super(props);
-
-    this.state = {
-      visible: props.visible,
-    };
     changeLanguage(i18n);
   }
 
   onClose = () => {
-    this.setState({ visible: false });
+    const { setIsVisibleModalLeave } = this.props;
+    setIsVisibleModalLeave(false);
   };
 
-  onSubbmit = () => {
-    const { onContinue } = this.props;
+  onSubmit = () => {
+    const { onContinue, setIsVisibleModalLeave, setIsEditingForm } = this.props;
+
+    setIsVisibleModalLeave(false);
+    setIsEditingForm(false);
+
     onContinue && onContinue();
   };
   render() {
-    const { t } = this.props;
-    const { visible } = this.state;
+    const { t, isVisibleModalLeave } = this.props;
 
     return (
       <ModalDialogContainer>
-        <ModalDialog visible={visible} onClose={this.onClose}>
+        <ModalDialog visible={isVisibleModalLeave} onClose={this.onClose}>
           <ModalDialog.Header>{t("LeaveDialogHeader")}</ModalDialog.Header>
           <ModalDialog.Body>
             <Text fontSize="13px">{t("LeaveDialogBody")}</Text>
@@ -48,7 +53,7 @@ class LeaveFormDialogComponent extends React.Component {
               label={t("LeaveDialogLeaveBtn")}
               size="medium"
               primary={true}
-              onClick={this.onSubbmit}
+              onClick={this.onSubmit}
             />
             <Button
               className="button-dialog"
@@ -71,8 +76,17 @@ const LeaveFormDialog = (props) => (
 );
 
 LeaveFormDialog.propTypes = {
-  visible: PropTypes.bool.isRequired,
+  isVisibleModalLeave: PropTypes.bool.isRequired,
   onContinue: PropTypes.func.isRequired,
 };
 
-export default LeaveFormDialog;
+function mapStateToProps(state) {
+  return {
+    isVisibleModalLeave: state.people.editingForm.isVisibleModalLeave,
+  };
+}
+
+export default connect(mapStateToProps, {
+  setIsVisibleModalLeave,
+  setIsEditingForm,
+})(LeaveFormDialog);

products/ASC.People/Client/src/store/people/actions.js

@@ -26,6 +26,8 @@ export const SET_SELECTED = "SET_SELECTED";
 export const SET_FILTER = "SET_FILTER";
 export const SELECT_GROUP = "SELECT_GROUP";
 export const SET_SELECTOR_USERS = "SET_SELECTOR_USERS";
+export const SET_IS_VISIBLE_MODAL_LEAVE = "SET_IS_VISIBLE_MODAL_LEAVE";
+export const SET_IS_EDITING_FORM = "SET_IS_EDITING_FORM";
 
 export function setUser(user) {
   return {
@@ -141,6 +143,20 @@ export function setSelectorUsers(users) {
   };
 }
 
+export function setIsVisibleModalLeave(isVisible) {
+  return {
+    type: SET_IS_VISIBLE_MODAL_LEAVE,
+    isVisible,
+  };
+}
+
+export function setIsEditingForm(isEdit) {
+  return {
+    type: SET_IS_EDITING_FORM,
+    isEdit,
+  };
+}
+
 export function fetchSelectorUsers() {
   return (dispatch) => {
     api.people.getSelectorUserList().then((data) => {
@@ -245,12 +261,6 @@ export function resetFilter() {
 
 export function updateProfileInUsers(updatedProfile) {
   return (dispatch, getState) => {
-    if (!updatedProfile) {
-      const { profile } = getState();
-      updatedProfile = profile.targetUser;
-    }
-
-    const { userName } = updatedProfile;
     const { people } = getState();
     const { users } = people;
 
@@ -258,6 +268,12 @@ export function updateProfileInUsers(updatedProfile) {
       return updateUserList(dispatch);
     }
 
+    if (!updatedProfile) {
+      const { profile } = getState();
+      updatedProfile = profile.targetUser;
+    }
+
+    const { userName } = updatedProfile;
     const oldProfile = getUserByUserName(users, userName);
     const newProfile = {};
 

products/ASC.People/Client/src/store/people/reducers.js

@@ -8,7 +8,9 @@ import {
   SET_FILTER,
   SELECT_GROUP,
   SET_USER,
-  SET_SELECTOR_USERS
+  SET_SELECTOR_USERS,
+  SET_IS_VISIBLE_MODAL_LEAVE,
+  SET_IS_EDITING_FORM,
 } from "./actions";
 import { isUserSelected, skipUser, getUsersBySelected } from "./selectors";
 import { api } from "asc-web-common";
@@ -22,60 +24,78 @@ const initialState = {
   selectedGroup: null,
   filter: Filter.getDefault(),
   selector: {
-    users: []
-  }
+    users: [],
+  },
+  editingForm: {
+    isEdit: false,
+    isVisibleModalLeave: false,
+  },
 };
 
 const peopleReducer = (state = initialState, action) => {
   switch (action.type) {
     case SET_GROUPS:
       return Object.assign({}, state, {
-        groups: action.groups
+        groups: action.groups,
       });
     case SET_USERS:
       return Object.assign({}, state, {
-        users: action.users
+        users: action.users,
       });
     case SET_USER:
       return Object.assign({}, state, {
-        users: state.users.map(user =>
+        users: state.users.map((user) =>
           user.id === action.user.id ? action.user : user
-        )
+        ),
       });
     case SET_SELECTION:
       return Object.assign({}, state, {
-        selection: action.selection
+        selection: action.selection,
       });
     case SELECT_USER:
       if (!isUserSelected(state.selection, action.user.id)) {
         return Object.assign({}, state, {
-          selection: [...state.selection, action.user]
+          selection: [...state.selection, action.user],
         });
       } else return state;
     case DESELECT_USER:
       if (isUserSelected(state.selection, action.user.id)) {
         return Object.assign({}, state, {
-          selection: skipUser(state.selection, action.user.id)
+          selection: skipUser(state.selection, action.user.id),
         });
       } else return state;
     case SET_SELECTED:
       return Object.assign({}, state, {
         selected: action.selected,
-        selection: getUsersBySelected(state.users, action.selected)
+        selection: getUsersBySelected(state.users, action.selected),
       });
     case SET_FILTER:
       return Object.assign({}, state, {
-        filter: action.filter
+        filter: action.filter,
       });
     case SELECT_GROUP:
       return Object.assign({}, state, {
-        selectedGroup: action.groupId
+        selectedGroup: action.groupId,
       });
     case SET_SELECTOR_USERS:
       return Object.assign({}, state, {
         selector: Object.assign({}, state.selector, {
-          users: action.users
-        })
+          users: action.users,
+        }),
+      });
+    case SET_IS_VISIBLE_MODAL_LEAVE:
+      return Object.assign({}, state, {
+        editingForm: {
+          ...state.editingForm,
+          isVisibleModalLeave: action.isVisible,
+        },
+      });
+    case SET_IS_EDITING_FORM:
+      return Object.assign({}, state, {
+        editingForm: {
+          ...state.editingForm,
+          isEdit: action.isEdit,
+        },
       });
     default:
       return state;