Prepare for collection board type, refactoring, update dependencies

client/src/components/Project/ActionsPopup/ActionsPopup.jsx

@@ -6,8 +6,8 @@ import { withPopup } from '../../../lib/popup';
 import { Popup } from '../../../lib/custom-ui';
 
 import { useSteps } from '../../../hooks';
-import EditNameStep from './EditNameStep';
-import EditBackgroundStep from './EditBackgroundStep';
+import NameEditStep from './NameEditStep';
+import BackgroundEditStep from './BackgroundEditStep';
 import DeleteStep from '../../DeleteStep';
 
 import styles from './ActionsPopup.module.scss';
@@ -64,7 +64,7 @@ const ActionsStep = React.memo(
         switch (step.type) {
           case StepTypes.EDIT_NAME:
             return (
-              <EditNameStep
+              <NameEditStep
                 defaultValue={project.name}
                 onUpdate={handleNameUpdate}
                 onBack={handleBack}
@@ -73,7 +73,7 @@ const ActionsStep = React.memo(
             );
           case StepTypes.EDIT_BACKGROUND:
             return (
-              <EditBackgroundStep
+              <BackgroundEditStep
                 defaultValue={project.background}
                 imageCoverUrl={project.backgroundImage && project.backgroundImage.coverUrl}
                 isImageUpdating={project.isBackgroundImageUpdating}

client/src/components/Project/ActionsPopup/BackgroundEditStep.jsx

@@ -11,10 +11,10 @@ import { FilePicker, Popup } from '../../../lib/custom-ui';
 import ProjectBackgroundGradients from '../../../constants/ProjectBackgroundGradients';
 import { ProjectBackgroundTypes } from '../../../constants/Enums';
 
-import styles from './EditBackgroundStep.module.scss';
+import styles from './BackgroundEditStep.module.scss';
 import globalStyles from '../../../styles.module.scss';
 
-const EditBackgroundStep = React.memo(
+const BackgroundEditStep = React.memo(
   ({
     defaultValue,
     imageCoverUrl,
@@ -158,7 +158,7 @@ const EditBackgroundStep = React.memo(
   },
 );
 
-EditBackgroundStep.propTypes = {
+BackgroundEditStep.propTypes = {
   defaultValue: PropTypes.object, // eslint-disable-line react/forbid-prop-types
   imageCoverUrl: PropTypes.string,
   isImageUpdating: PropTypes.bool.isRequired,
@@ -168,9 +168,9 @@ EditBackgroundStep.propTypes = {
   onBack: PropTypes.func.isRequired,
 };
 
-EditBackgroundStep.defaultProps = {
+BackgroundEditStep.defaultProps = {
   defaultValue: undefined,
   imageCoverUrl: undefined,
 };
 
-export default EditBackgroundStep;
+export default BackgroundEditStep;

client/src/components/Project/ActionsPopup/NameEditStep.jsx

@@ -6,9 +6,9 @@ import { Input, Popup } from '../../../lib/custom-ui';
 
 import { useField } from '../../../hooks';
 
-import styles from './EditNameStep.module.scss';
+import styles from './NameEditStep.module.scss';
 
-const EditNameStep = React.memo(({ defaultValue, onUpdate, onBack, onClose }) => {
+const NameEditStep = React.memo(({ defaultValue, onUpdate, onBack, onClose }) => {
   const [t] = useTranslation();
   const [value, handleFieldChange] = useField(defaultValue);
 
@@ -57,11 +57,11 @@ const EditNameStep = React.memo(({ defaultValue, onUpdate, onBack, onClose }) =>
   );
 });
 
-EditNameStep.propTypes = {
+NameEditStep.propTypes = {
   defaultValue: PropTypes.string.isRequired,
   onUpdate: PropTypes.func.isRequired,
   onBack: PropTypes.func.isRequired,
   onClose: PropTypes.func.isRequired,
 };
 
-export default EditNameStep;
+export default NameEditStep;

client/src/components/Project/AddMembershipPopup/index.js

@@ -1,3 +0,0 @@
-import AddMembershipPopup from './AddMembershipPopup';
-
-export default AddMembershipPopup;

client/src/components/Project/MembershipAddPopup/MembershipAddPopup.jsx

@@ -6,9 +6,9 @@ import { Popup } from '../../../lib/custom-ui';
 
 import UserItem from './UserItem';
 
-import styles from './AddMembershipPopup.module.scss';
+import styles from './MembershipAddPopup.module.scss';
 
-const AddMembershipStep = React.memo(({ users, currentUserIds, onCreate, onClose }) => {
+const MembershipAddStep = React.memo(({ users, currentUserIds, onCreate, onClose }) => {
   const [t] = useTranslation();
 
   const handleUserSelect = useCallback(
@@ -46,7 +46,7 @@ const AddMembershipStep = React.memo(({ users, currentUserIds, onCreate, onClose
   );
 });
 
-AddMembershipStep.propTypes = {
+MembershipAddStep.propTypes = {
   /* eslint-disable react/forbid-prop-types */
   users: PropTypes.array.isRequired,
   currentUserIds: PropTypes.array.isRequired,
@@ -55,4 +55,4 @@ AddMembershipStep.propTypes = {
   onClose: PropTypes.func.isRequired,
 };
 
-export default withPopup(AddMembershipStep);
+export default withPopup(MembershipAddStep);

client/src/components/Project/MembershipAddPopup/index.js

@@ -0,0 +1,3 @@
+import MembershipAddPopup from './MembershipAddPopup';
+
+export default MembershipAddPopup;

client/src/components/Project/MembershipEditPopup.jsx

@@ -8,13 +8,13 @@ import { useSteps } from '../../hooks';
 import User from '../User';
 import DeleteStep from '../DeleteStep';
 
-import styles from './EditMembershipPopup.module.scss';
+import styles from './MembershipEditPopup.module.scss';
 
 const StepTypes = {
   DELETE: 'DELETE',
 };
 
-const EditMembershipStep = React.memo(({ user, isEditable, onDelete }) => {
+const MembershipEditStep = React.memo(({ user, isEditable, onDelete }) => {
   const [t] = useTranslation();
   const [step, openStep, handleBack] = useSteps();
 
@@ -56,10 +56,10 @@ const EditMembershipStep = React.memo(({ user, isEditable, onDelete }) => {
   );
 });
 
-EditMembershipStep.propTypes = {
+MembershipEditStep.propTypes = {
   user: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
   isEditable: PropTypes.bool.isRequired,
   onDelete: PropTypes.func.isRequired,
 };
 
-export default withPopup(EditMembershipStep);
+export default withPopup(MembershipEditStep);

client/src/components/Project/Project.jsx

@@ -4,8 +4,8 @@ import { Button, Grid } from 'semantic-ui-react';
 
 import BoardsContainer from '../../containers/BoardsContainer';
 import ActionsPopup from './ActionsPopup';
-import AddMembershipPopup from './AddMembershipPopup';
-import EditMembershipPopup from './EditMembershipPopup';
+import MembershipAddPopup from './MembershipAddPopup';
+import MembershipEditPopup from './MembershipEditPopup';
 import User from '../User';
 
 import styles from './Project.module.scss';
@@ -63,7 +63,7 @@ const Project = React.memo(
               <span className={styles.users}>
                 {memberships.map((membership) => (
                   <span key={membership.id} className={styles.user}>
-                    <EditMembershipPopup
+                    <MembershipEditPopup
                       user={membership.user}
                       isEditable={isEditable}
                       onDelete={() => handleMembershipDelete(membership.id)}
@@ -74,18 +74,18 @@ const Project = React.memo(
                         size="large"
                         isDisabled={!membership.isPersisted}
                       />
-                    </EditMembershipPopup>
+                    </MembershipEditPopup>
                   </span>
                 ))}
               </span>
               {isEditable && (
-                <AddMembershipPopup
+                <MembershipAddPopup
                   users={allUsers}
                   currentUserIds={memberships.map((membership) => membership.user.id)}
                   onCreate={onMembershipCreate}
                 >
                   <Button icon="add user" className={styles.addUser} />
-                </AddMembershipPopup>
+                </MembershipAddPopup>
               )}
             </Grid.Column>
           </Grid.Row>