Add user settings modal

client/src/containers/AppContainer.js

@@ -9,6 +9,7 @@ const mapStateToProps = (state) => {
 
   return {
     isUsersModalOpened: currentModal === ModalTypes.USERS,
+    isUserSettingsModalOpened: currentModal === ModalTypes.USER_SETTINGS,
     isAddProjectModalOpened: currentModal === ModalTypes.ADD_PROJECT,
   };
 };

client/src/containers/HeaderContainer.js

@@ -3,17 +3,10 @@ import { connect } from 'react-redux';
 
 import { currentUserSelector, notificationsForCurrentUserSelector } from '../selectors';
 import {
-  clearCurrentUserEmailUpdateError,
-  clearCurrentUserPasswordUpdateError,
-  clearCurrentUserUsernameUpdateError,
   deleteNotification,
   logout,
+  openUserSettingsModal,
   openUsersModal,
-  updateCurrentUser,
-  updateCurrentUserEmail,
-  updateCurrentUserPassword,
-  updateCurrentUserUsername,
-  uploadCurrentUserAvatar,
 } from '../actions/entry';
 import Header from '../components/Header';
 
@@ -33,14 +26,7 @@ const mapDispatchToProps = (dispatch) =>
     {
       onUsers: openUsersModal, // TODO: rename
       onNotificationDelete: deleteNotification,
-      onUserUpdate: updateCurrentUser,
-      onUserAvatarUpload: uploadCurrentUserAvatar,
-      onUserUsernameUpdate: updateCurrentUserUsername,
-      onUserUsernameUpdateMessageDismiss: clearCurrentUserUsernameUpdateError,
-      onUserEmailUpdate: updateCurrentUserEmail,
-      onUserEmailUpdateMessageDismiss: clearCurrentUserEmailUpdateError,
-      onUserPasswordUpdate: updateCurrentUserPassword,
-      onUserPasswordUpdateMessageDismiss: clearCurrentUserPasswordUpdateError,
+      onUserSettings: openUserSettingsModal,
       onLogout: logout,
     },
     dispatch,

client/src/containers/UserSettingsModalContainer.js

@@ -0,0 +1,58 @@
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+
+import { currentUserSelector } from '../selectors';
+import {
+  clearCurrentUserEmailUpdateError,
+  clearCurrentUserPasswordUpdateError,
+  clearCurrentUserUsernameUpdateError,
+  closeModal,
+  updateCurrentUser,
+  updateCurrentUserEmail,
+  updateCurrentUserPassword,
+  updateCurrentUserUsername,
+  uploadCurrentUserAvatar,
+} from '../actions/entry';
+import UserSettingsModal from '../components/UserSettingsModal';
+
+const mapStateToProps = (state) => {
+  const {
+    email,
+    name,
+    username,
+    avatar,
+    isAvatarUploading,
+    emailUpdateForm,
+    passwordUpdateForm,
+    usernameUpdateForm,
+  } = currentUserSelector(state);
+
+  return {
+    email,
+    name,
+    username,
+    avatar,
+    isAvatarUploading,
+    emailUpdateForm,
+    passwordUpdateForm,
+    usernameUpdateForm,
+  };
+};
+
+const mapDispatchToProps = (dispatch) =>
+  bindActionCreators(
+    {
+      onUpdate: updateCurrentUser,
+      onAvatarUpload: uploadCurrentUserAvatar,
+      onUsernameUpdate: updateCurrentUserUsername,
+      onUsernameUpdateMessageDismiss: clearCurrentUserUsernameUpdateError,
+      onEmailUpdate: updateCurrentUserEmail,
+      onEmailUpdateMessageDismiss: clearCurrentUserEmailUpdateError,
+      onPasswordUpdate: updateCurrentUserPassword,
+      onPasswordUpdateMessageDismiss: clearCurrentUserPasswordUpdateError,
+      onClose: closeModal,
+    },
+    dispatch,
+  );
+
+export default connect(mapStateToProps, mapDispatchToProps)(UserSettingsModal);