Prepare for collection board type, refactoring, update dependencies

client/src/components/UserSettingsModal/AccountPane/AccountPane.jsx

@@ -3,11 +3,11 @@ import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import { Button, Divider, Header, Tab } from 'semantic-ui-react';
 
-import EditInformation from './EditInformation';
-import EditAvatarPopup from './EditAvatarPopup';
-import EditUsernamePopup from './EditUsernamePopup';
-import EditEmailPopup from './EditEmailPopup';
-import EditPasswordPopup from './EditPasswordPopup';
+import InformationEdit from './InformationEdit';
+import AvatarEditPopup from './AvatarEditPopup';
+import UsernameEditPopup from './UsernameEditPopup';
+import EmailEditPopup from './EmailEditPopup';
+import PasswordEditPopup from './PasswordEditPopup';
 import User from '../../User';
 
 import styles from './AccountPane.module.scss';
@@ -43,16 +43,16 @@ const AccountPane = React.memo(
 
     return (
       <Tab.Pane attached={false} className={styles.wrapper}>
-        <EditAvatarPopup
+        <AvatarEditPopup
           defaultValue={avatarUrl}
           onUpdate={onAvatarUpdate}
           onDelete={handleAvatarDelete}
         >
           <User name={name} avatarUrl={avatarUrl} size="massive" isDisabled={isAvatarUpdating} />
-        </EditAvatarPopup>
+        </AvatarEditPopup>
         <br />
         <br />
-        <EditInformation
+        <InformationEdit
           defaultData={{
             name,
             phone,
@@ -68,7 +68,7 @@ const AccountPane = React.memo(
           </Header>
         </Divider>
         <div className={styles.action}>
-          <EditUsernamePopup
+          <UsernameEditPopup
             defaultData={usernameUpdateForm.data}
             username={username}
             isSubmitting={usernameUpdateForm.isSubmitting}
@@ -81,10 +81,10 @@ const AccountPane = React.memo(
                 context: 'title',
               })}
             </Button>
-          </EditUsernamePopup>
+          </UsernameEditPopup>
         </div>
         <div className={styles.action}>
-          <EditEmailPopup
+          <EmailEditPopup
             defaultData={emailUpdateForm.data}
             email={email}
             isSubmitting={emailUpdateForm.isSubmitting}
@@ -97,10 +97,10 @@ const AccountPane = React.memo(
                 context: 'title',
               })}
             </Button>
-          </EditEmailPopup>
+          </EmailEditPopup>
         </div>
         <div className={styles.action}>
-          <EditPasswordPopup
+          <PasswordEditPopup
             defaultData={passwordUpdateForm.data}
             isSubmitting={passwordUpdateForm.isSubmitting}
             error={passwordUpdateForm.error}
@@ -112,7 +112,7 @@ const AccountPane = React.memo(
                 context: 'title',
               })}
             </Button>
-          </EditPasswordPopup>
+          </PasswordEditPopup>
         </div>
       </Tab.Pane>
     );

client/src/components/UserSettingsModal/AccountPane/AvatarEditPopup.jsx

@@ -5,9 +5,9 @@ import { Button } from 'semantic-ui-react';
 import { withPopup } from '../../../lib/popup';
 import { FilePicker, Popup } from '../../../lib/custom-ui';
 
-import styles from './EditAvatarPopup.module.scss';
+import styles from './AvatarEditPopup.module.scss';
 
-const EditAvatarStep = React.memo(({ defaultValue, onUpdate, onDelete, onClose }) => {
+const AvatarEditStep = React.memo(({ defaultValue, onUpdate, onDelete, onClose }) => {
   const [t] = useTranslation();
 
   const field = useRef(null);
@@ -57,15 +57,15 @@ const EditAvatarStep = React.memo(({ defaultValue, onUpdate, onDelete, onClose }
   );
 });
 
-EditAvatarStep.propTypes = {
+AvatarEditStep.propTypes = {
   defaultValue: PropTypes.string,
   onUpdate: PropTypes.func.isRequired,
   onDelete: PropTypes.func.isRequired,
   onClose: PropTypes.func.isRequired,
 };
 
-EditAvatarStep.defaultProps = {
+AvatarEditStep.defaultProps = {
   defaultValue: undefined,
 };
 
-export default withPopup(EditAvatarStep);
+export default withPopup(AvatarEditStep);

client/src/components/UserSettingsModal/AccountPane/EmailEditPopup.jsx

@@ -9,7 +9,7 @@ import { Input, Popup } from '../../../lib/custom-ui';
 
 import { useForm } from '../../../hooks';
 
-import styles from './EditEmailPopup.module.scss';
+import styles from './EmailEditPopup.module.scss';
 
 const createMessage = (error) => {
   if (!error) {
@@ -35,7 +35,7 @@ const createMessage = (error) => {
   }
 };
 
-const EditEmailStep = React.memo(
+const EmailEditStep = React.memo(
   ({ defaultData, email, isSubmitting, error, onUpdate, onMessageDismiss, onClose }) => {
     const [t] = useTranslation();
     const wasSubmitting = usePrevious(isSubmitting);
@@ -160,7 +160,7 @@ const EditEmailStep = React.memo(
   },
 );
 
-EditEmailStep.propTypes = {
+EmailEditStep.propTypes = {
   defaultData: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
   email: PropTypes.string.isRequired,
   isSubmitting: PropTypes.bool.isRequired,
@@ -170,8 +170,8 @@ EditEmailStep.propTypes = {
   onClose: PropTypes.func.isRequired,
 };
 
-EditEmailStep.defaultProps = {
+EmailEditStep.defaultProps = {
   error: undefined,
 };
 
-export default withPopup(EditEmailStep);
+export default withPopup(EmailEditStep);

client/src/components/UserSettingsModal/AccountPane/InformationEdit.jsx

@@ -7,9 +7,9 @@ import { Button, Form, Input } from 'semantic-ui-react';
 
 import { useForm } from '../../../hooks';
 
-import styles from './EditInformation.module.scss';
+import styles from './InformationEdit.module.scss';
 
-const EditInformation = React.memo(({ defaultData, onUpdate }) => {
+const InformationEdit = React.memo(({ defaultData, onUpdate }) => {
   const [t] = useTranslation();
 
   const [data, handleFieldChange] = useForm(() => ({
@@ -72,9 +72,9 @@ const EditInformation = React.memo(({ defaultData, onUpdate }) => {
   );
 });
 
-EditInformation.propTypes = {
+InformationEdit.propTypes = {
   defaultData: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
   onUpdate: PropTypes.func.isRequired,
 };
 
-export default EditInformation;
+export default InformationEdit;

client/src/components/UserSettingsModal/AccountPane/PasswordEditPopup.jsx

@@ -8,7 +8,7 @@ import { Input, Popup } from '../../../lib/custom-ui';
 
 import { useForm } from '../../../hooks';
 
-import styles from './EditPasswordPopup.module.scss';
+import styles from './PasswordEditPopup.module.scss';
 
 const createMessage = (error) => {
   if (!error) {
@@ -29,7 +29,7 @@ const createMessage = (error) => {
   }
 };
 
-const EditPasswordStep = React.memo(
+const PasswordEditStep = React.memo(
   ({ defaultData, isSubmitting, error, onUpdate, onMessageDismiss, onClose }) => {
     const [t] = useTranslation();
     const wasSubmitting = usePrevious(isSubmitting);
@@ -133,7 +133,7 @@ const EditPasswordStep = React.memo(
   },
 );
 
-EditPasswordStep.propTypes = {
+PasswordEditStep.propTypes = {
   defaultData: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
   isSubmitting: PropTypes.bool.isRequired,
   error: PropTypes.object, // eslint-disable-line react/forbid-prop-types
@@ -142,8 +142,8 @@ EditPasswordStep.propTypes = {
   onClose: PropTypes.func.isRequired,
 };
 
-EditPasswordStep.defaultProps = {
+PasswordEditStep.defaultProps = {
   error: undefined,
 };
 
-export default withPopup(EditPasswordStep);
+export default withPopup(PasswordEditStep);

client/src/components/UserSettingsModal/AccountPane/UsernameEditPopup.jsx

@@ -9,7 +9,7 @@ import { Input, Popup } from '../../../lib/custom-ui';
 import { useForm } from '../../../hooks';
 import { isUsername } from '../../../utils/validator';
 
-import styles from './EditUsernamePopup.module.scss';
+import styles from './UsernameEditPopup.module.scss';
 
 const createMessage = (error) => {
   if (!error) {
@@ -35,7 +35,7 @@ const createMessage = (error) => {
   }
 };
 
-const EditUsernameStep = React.memo(
+const UsernameEditStep = React.memo(
   ({ defaultData, username, isSubmitting, error, onUpdate, onMessageDismiss, onClose }) => {
     const [t] = useTranslation();
     const wasSubmitting = usePrevious(isSubmitting);
@@ -160,7 +160,7 @@ const EditUsernameStep = React.memo(
   },
 );
 
-EditUsernameStep.propTypes = {
+UsernameEditStep.propTypes = {
   defaultData: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
   username: PropTypes.string,
   isSubmitting: PropTypes.bool.isRequired,
@@ -170,9 +170,9 @@ EditUsernameStep.propTypes = {
   onClose: PropTypes.func.isRequired,
 };
 
-EditUsernameStep.defaultProps = {
+UsernameEditStep.defaultProps = {
   username: undefined,
   error: undefined,
 };
 
-export default withPopup(EditUsernameStep);
+export default withPopup(UsernameEditStep);