Prepare for collection board type, refactoring, update dependencies

client/package.json

@@ -48,47 +48,47 @@
   "dependencies": {
     "classnames": "^2.2.6",
     "connected-react-router": "^6.8.0",
-    "date-fns": "^2.14.0",
-    "dequal": "^1.0.0",
+    "date-fns": "^2.15.0",
+    "dequal": "^1.0.1",
     "history": "^4.10.1",
-    "i18next": "^19.4.5",
-    "i18next-browser-languagedetector": "^4.2.0",
-    "initials": "^3.1.0",
-    "lodash": "^4.17.15",
+    "i18next": "^19.6.3",
+    "i18next-browser-languagedetector": "^5.0.0",
+    "initials": "^3.1.1",
+    "lodash": "^4.17.19",
     "node-sass": "^4.14.1",
     "prop-types": "^15.7.2",
     "react": "^16.13.1",
     "react-beautiful-dnd": "^13.0.0",
-    "react-datepicker": "^3.0.0",
+    "react-datepicker": "^3.1.3",
     "react-dom": "^16.13.1",
-    "react-dropzone": "^11.0.1",
-    "react-i18next": "^11.5.0",
+    "react-dropzone": "^11.0.2",
+    "react-i18next": "^11.7.0",
     "react-input-mask": "^2.0.4",
     "react-markdown": "^4.3.1",
-    "react-redux": "^7.2.0",
+    "react-redux": "^7.2.1",
     "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.1",
-    "react-textarea-autosize": "^8.0.1",
+    "react-textarea-autosize": "^8.2.0",
     "redux": "^4.0.5",
     "redux-logger": "^3.0.6",
     "redux-orm": "^0.16.1",
     "redux-saga": "^1.1.3",
     "reselect": "^4.0.0",
     "sails.io.js": "^1.2.1",
-    "semantic-ui-react": "^0.88.2",
+    "semantic-ui-react": "^1.1.1",
     "socket.io-client": "^2.3.0",
-    "validator": "^13.0.0",
-    "whatwg-fetch": "^3.0.0"
+    "validator": "^13.1.1",
+    "whatwg-fetch": "^3.2.0"
   },
   "devDependencies": {
     "eslint": "^6.8.0",
-    "eslint-config-airbnb": "^18.1.0",
+    "eslint-config-airbnb": "^18.2.0",
     "eslint-config-prettier": "^6.11.0",
-    "eslint-plugin-import": "^2.21.1",
-    "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-prettier": "^3.1.3",
-    "eslint-plugin-react": "^7.20.0",
-    "eslint-plugin-react-hooks": "^4.0.4",
+    "eslint-plugin-import": "^2.22.0",
+    "eslint-plugin-jsx-a11y": "^6.3.1",
+    "eslint-plugin-prettier": "^3.1.4",
+    "eslint-plugin-react": "^7.20.5",
+    "eslint-plugin-react-hooks": "^4.0.8",
     "prettier": "2.0.5"
   }
 }

client/src/actions/board.js

@@ -70,8 +70,8 @@ export const fetchBoardRequested = (id) => ({
 
 export const fetchBoardSucceeded = (
   board,
-  lists,
   labels,
+  lists,
   cards,
   cardMemberships,
   cardLabels,
@@ -81,8 +81,8 @@ export const fetchBoardSucceeded = (
   type: ActionTypes.BOARD_FETCH_SUCCEEDED,
   payload: {
     board,
-    lists,
     labels,
+    lists,
     cards,
     cardMemberships,
     cardLabels,

client/src/actions/entry/index.js

@@ -4,8 +4,8 @@ export * from './user';
 export * from './project';
 export * from './project-membership';
 export * from './board';
-export * from './list';
 export * from './label';
+export * from './list';
 export * from './card';
 export * from './task';
 export * from './attachment';

client/src/actions/entry/modal.js

@@ -15,10 +15,10 @@ export const openUserSettingsModal = () => ({
   },
 });
 
-export const openAddProjectModal = () => ({
+export const openProjectAddModal = () => ({
   type: EntryActionTypes.MODAL_OPEN,
   payload: {
-    type: ModalTypes.ADD_PROJECT,
+    type: ModalTypes.PROJECT_ADD,
   },
 });
 

client/src/actions/index.js

@@ -8,8 +8,8 @@ export * from './projects';
 export * from './project';
 export * from './project-membership';
 export * from './board';
-export * from './list';
 export * from './label';
+export * from './list';
 export * from './card';
 export * from './card-membership';
 export * from './card-label';

client/src/api/cards.js

@@ -35,8 +35,18 @@ export const transformCardData = (data) => ({
 
 /* Actions */
 
-const createCard = (listId, data, headers) =>
-  socket.post(`/lists/${listId}/cards`, transformCardData(data), headers).then((body) => ({
+const getCards = (boardId, data, headers) =>
+  socket.get(`/board/${boardId}/cards`, data, headers).then((body) => ({
+    ...body,
+    items: body.items.map(transformCard),
+    included: {
+      ...body.included,
+      attachments: body.included.attachments.map(transformAttachment),
+    },
+  }));
+
+const createCard = (boardId, data, headers) =>
+  socket.post(`/boards/${boardId}/cards`, transformCardData(data), headers).then((body) => ({
     ...body,
     item: transformCard(body.item),
     included: {
@@ -86,6 +96,7 @@ const makeHandleCardUpdate = (next) => (body) => {
 const makeHandleCardDelete = makeHandleCardUpdate;
 
 export default {
+  getCards,
   createCard,
   getCard,
   updateCard,

client/src/api/index.js

@@ -5,8 +5,8 @@ import users from './users';
 import projects from './projects';
 import projectMemberships from './project-memberships';
 import boards from './boards';
-import lists from './lists';
 import labels from './labels';
+import lists from './lists';
 import cards from './cards';
 import cardMemberships from './card-memberships';
 import cardLabels from './card-labels';
@@ -24,8 +24,8 @@ export default {
   ...projects,
   ...projectMemberships,
   ...boards,
-  ...lists,
   ...labels,
+  ...lists,
   ...cards,
   ...cardMemberships,
   ...cardLabels,

client/src/components/AddProjectModal/index.js

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

client/src/components/AddUserPopup/index.js

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

client/src/components/Board/index.js

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

client/src/components/BoardKanban/BoardKanban.jsx

@@ -7,15 +7,15 @@ import { closePopup } from '../../lib/popup';
 import DroppableTypes from '../../constants/DroppableTypes';
 import ListContainer from '../../containers/ListContainer';
 import CardModalContainer from '../../containers/CardModalContainer';
-import AddList from './AddList';
+import ListAdd from './ListAdd';
 import Filter from './Filter';
 import { ReactComponent as PlusMathIcon } from '../../assets/images/plus-math-icon.svg';
 
-import styles from './Board.module.scss';
+import styles from './BoardKanban.module.scss';
 
 const parseDndId = (dndId) => dndId.split(':')[1];
 
-const Board = React.memo(
+const BoardKanban = React.memo(
   ({
     listIds,
     filterUsers,
@@ -167,7 +167,7 @@ const Board = React.memo(
                     {placeholder}
                     <div data-drag-scroller className={styles.list}>
                       {isAddListOpened ? (
-                        <AddList
+                        <ListAdd
                           isOpened={isAddListOpened}
                           onCreate={onListCreate}
                           onClose={handleAddListClose}
@@ -197,7 +197,7 @@ const Board = React.memo(
   },
 );
 
-Board.propTypes = {
+BoardKanban.propTypes = {
   /* eslint-disable react/forbid-prop-types */
   listIds: PropTypes.array.isRequired,
   filterUsers: PropTypes.array.isRequired,
@@ -218,4 +218,4 @@ Board.propTypes = {
   onLabelDelete: PropTypes.func.isRequired,
 };
 
-export default Board;
+export default BoardKanban;

client/src/components/BoardKanban/ListAdd.jsx

@@ -6,13 +6,13 @@ import { useDidUpdate, useToggle } from '../../lib/hooks';
 
 import { useClosableForm, useForm } from '../../hooks';
 
-import styles from './AddList.module.scss';
+import styles from './ListAdd.module.scss';
 
 const DEFAULT_DATA = {
   name: '',
 };
 
-const AddList = React.memo(({ onCreate, onClose }) => {
+const ListAdd = React.memo(({ onCreate, onClose }) => {
   const [t] = useTranslation();
   const [data, handleFieldChange, setData] = useForm(DEFAULT_DATA);
   const [selectNameFieldState, selectNameField] = useToggle();
@@ -81,9 +81,9 @@ const AddList = React.memo(({ onCreate, onClose }) => {
   );
 });
 
-AddList.propTypes = {
+ListAdd.propTypes = {
   onCreate: PropTypes.func.isRequired,
   onClose: PropTypes.func.isRequired,
 };
 
-export default AddList;
+export default ListAdd;

client/src/components/BoardKanban/index.js

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

client/src/components/BoardWrapper.jsx

@@ -2,17 +2,23 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Loader } from 'semantic-ui-react';
 
-import BoardContainer from '../containers/BoardContainer';
+import { BoardTypes } from '../constants/Enums';
+import BoardKanbanContainer from '../containers/BoardKanbanContainer';
 
-const BoardWrapper = React.memo(({ isFetching }) => {
+const BoardWrapper = React.memo(({ type, isFetching }) => {
   if (isFetching) {
     return <Loader active />;
   }
 
-  return <BoardContainer />;
+  if (type === BoardTypes.KANBAN) {
+    return <BoardKanbanContainer />;
+  }
+
+  return null;
 });
 
 BoardWrapper.propTypes = {
+  type: PropTypes.string.isRequired,
   isFetching: PropTypes.bool.isRequired,
 };
 

client/src/components/Boards/AddPopup.jsx

@@ -21,6 +21,7 @@ const AddStep = React.memo(({ onCreate, onClose }) => {
   const handleSubmit = useCallback(() => {
     const cleanData = {
       ...data,
+      type: 'kanban',
       name: data.name.trim(),
     };
 

client/src/components/Card/ActionsPopup.jsx

@@ -9,9 +9,9 @@ import { Popup } from '../../lib/custom-ui';
 import { useSteps } from '../../hooks';
 import ProjectMembershipsStep from '../ProjectMembershipsStep';
 import LabelsStep from '../LabelsStep';
-import EditDueDateStep from '../EditDueDateStep';
-import EditTimerStep from '../EditTimerStep';
-import MoveCardStep from '../MoveCardStep';
+import DueDateEditStep from '../DueDateEditStep';
+import TimerEditStep from '../TimerEditStep';
+import CardMoveStep from '../CardMoveStep';
 import DeleteStep from '../DeleteStep';
 
 import styles from './ActionsPopup.module.scss';
@@ -125,7 +125,7 @@ const ActionsStep = React.memo(
           );
         case StepTypes.EDIT_DUE_DATE:
           return (
-            <EditDueDateStep
+            <DueDateEditStep
               defaultValue={card.dueDate}
               onUpdate={handleDueDateUpdate}
               onBack={handleBack}
@@ -134,7 +134,7 @@ const ActionsStep = React.memo(
           );
         case StepTypes.EDIT_TIMER:
           return (
-            <EditTimerStep
+            <TimerEditStep
               defaultValue={card.timer}
               onUpdate={handleTimerUpdate}
               onBack={handleBack}
@@ -143,7 +143,7 @@ const ActionsStep = React.memo(
           );
         case StepTypes.MOVE:
           return (
-            <MoveCardStep
+            <CardMoveStep
               projectsToLists={projectsToLists}
               defaultPath={pick(card, ['projectId', 'boardId', 'listId'])}
               onMove={onMove}

client/src/components/Card/Card.jsx

@@ -7,7 +7,7 @@ import { Draggable } from 'react-beautiful-dnd';
 
 import Paths from '../../constants/Paths';
 import Tasks from './Tasks';
-import EditName from './EditName';
+import NameEdit from './NameEdit';
 import ActionsPopup from './ActionsPopup';
 import User from '../User';
 import Label from '../Label';
@@ -24,8 +24,8 @@ const Card = React.memo(
     dueDate,
     timer,
     coverUrl,
-    listId,
     boardId,
+    listId,
     projectId,
     isPersisted,
     notificationsTotal,
@@ -48,7 +48,7 @@ const Card = React.memo(
     onLabelUpdate,
     onLabelDelete,
   }) => {
-    const editName = useRef(null);
+    const nameEdit = useRef(null);
 
     const handleClick = useCallback(() => {
       if (document.activeElement) {
@@ -66,7 +66,7 @@ const Card = React.memo(
     );
 
     const handleNameEdit = useCallback(() => {
-      editName.current.open();
+      nameEdit.current.open();
     }, []);
 
     const contentNode = (
@@ -133,7 +133,7 @@ const Card = React.memo(
         {({ innerRef, draggableProps, dragHandleProps }) => (
           // eslint-disable-next-line react/jsx-props-no-spreading
           <div {...draggableProps} {...dragHandleProps} ref={innerRef} className={styles.wrapper}>
-            <EditName ref={editName} defaultValue={name} onUpdate={handleNameUpdate}>
+            <NameEdit ref={nameEdit} defaultValue={name} onUpdate={handleNameUpdate}>
               <div className={styles.card}>
                 {isPersisted ? (
                   <>
@@ -150,8 +150,8 @@ const Card = React.memo(
                         name,
                         dueDate,
                         timer,
-                        listId,
                         boardId,
+                        listId,
                         projectId,
                         isPersisted,
                       }}
@@ -183,7 +183,7 @@ const Card = React.memo(
                   <span className={styles.content}>{contentNode}</span>
                 )}
               </div>
-            </EditName>
+            </NameEdit>
           </div>
         )}
       </Draggable>
@@ -198,8 +198,8 @@ Card.propTypes = {
   dueDate: PropTypes.instanceOf(Date),
   timer: PropTypes.object, // eslint-disable-line react/forbid-prop-types
   coverUrl: PropTypes.string,
-  listId: PropTypes.string.isRequired,
   boardId: PropTypes.string.isRequired,
+  listId: PropTypes.string.isRequired,
   projectId: PropTypes.string.isRequired,
   isPersisted: PropTypes.bool.isRequired,
   notificationsTotal: PropTypes.number.isRequired,

client/src/components/Card/NameEdit.jsx

@@ -6,9 +6,9 @@ import { Button, Form, TextArea } from 'semantic-ui-react';
 
 import { useClosableForm, useField } from '../../hooks';
 
-import styles from './EditName.module.scss';
+import styles from './NameEdit.module.scss';
 
-const EditName = React.forwardRef(({ children, defaultValue, onUpdate }, ref) => {
+const NameEdit = React.forwardRef(({ children, defaultValue, onUpdate }, ref) => {
   const [t] = useTranslation();
   const [isOpened, setIsOpened] = useState(false);
   const [value, handleFieldChange, setValue] = useField(defaultValue);
@@ -117,10 +117,10 @@ const EditName = React.forwardRef(({ children, defaultValue, onUpdate }, ref) =>
   );
 });
 
-EditName.propTypes = {
+NameEdit.propTypes = {
   children: PropTypes.element.isRequired,
   defaultValue: PropTypes.string.isRequired,
   onUpdate: PropTypes.func.isRequired,
 };
 
-export default React.memo(EditName);
+export default React.memo(NameEdit);

client/src/components/CardModal/Actions/Actions.jsx

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { Comment, Icon, Loader, Visibility } from 'semantic-ui-react';
 
 import { ActionTypes } from '../../../constants/Enums';
-import AddComment from './AddComment';
+import CommentAdd from './CommentAdd';
 import Item from './Item';
 
 import styles from './Actions.module.scss';
@@ -42,7 +42,7 @@ const Actions = React.memo(
           <div className={styles.moduleWrapper}>
             <Icon name="comment outline" className={styles.moduleIcon} />
             <div className={styles.moduleHeader}>{t('common.addComment')}</div>
-            <AddComment onCreate={onCommentCreate} />
+            <CommentAdd onCreate={onCommentCreate} />
           </div>
         </div>
         <div className={styles.contentModule}>

client/src/components/CardModal/Actions/CommentAdd.jsx

@@ -6,13 +6,13 @@ import { Button, Form, TextArea } from 'semantic-ui-react';
 
 import { useForm } from '../../../hooks';
 
-import styles from './AddComment.module.scss';
+import styles from './CommentAdd.module.scss';
 
 const DEFAULT_DATA = {
   text: '',
 };
 
-const AddComment = React.memo(({ onCreate }) => {
+const CommentAdd = React.memo(({ onCreate }) => {
   const [t] = useTranslation();
   const [data, handleFieldChange, setData] = useForm(DEFAULT_DATA);
 
@@ -68,8 +68,8 @@ const AddComment = React.memo(({ onCreate }) => {
   );
 });
 
-AddComment.propTypes = {
+CommentAdd.propTypes = {
   onCreate: PropTypes.func.isRequired,
 };
 
-export default AddComment;
+export default CommentAdd;

client/src/components/CardModal/Actions/CommentEdit.jsx

@@ -7,9 +7,9 @@ import { Button, Form, TextArea } from 'semantic-ui-react';
 
 import { useClosableForm, useForm } from '../../../hooks';
 
-import styles from './EditComment.module.scss';
+import styles from './CommentEdit.module.scss';
 
-const EditComment = React.forwardRef(({ children, defaultData, onUpdate }, ref) => {
+const CommentEdit = React.forwardRef(({ children, defaultData, onUpdate }, ref) => {
   const [t] = useTranslation();
   const [isOpened, setIsOpened] = useState(false);
   const [data, handleFieldChange, setData] = useForm(null);
@@ -111,10 +111,10 @@ const EditComment = React.forwardRef(({ children, defaultData, onUpdate }, ref)
   );
 });
 
-EditComment.propTypes = {
+CommentEdit.propTypes = {
   children: PropTypes.element.isRequired,
   defaultData: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
   onUpdate: PropTypes.func.isRequired,
 };
 
-export default React.memo(EditComment);
+export default React.memo(CommentEdit);

client/src/components/CardModal/Actions/ItemComment.jsx

@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
 import { Comment } from 'semantic-ui-react';
 import { Markdown } from '../../../lib/custom-ui';
 
-import EditComment from './EditComment';
+import CommentEdit from './CommentEdit';
 import User from '../../User';
 import DeletePopup from '../../DeletePopup';
 
@@ -15,10 +15,10 @@ const ItemComment = React.memo(
   ({ data, createdAt, isPersisted, user, isEditable, onUpdate, onDelete }) => {
     const [t] = useTranslation();
 
-    const editComment = useRef(null);
+    const commentEdit = useRef(null);
 
     const handleEditClick = useCallback(() => {
-      editComment.current.open();
+      commentEdit.current.open();
     }, []);
 
     return (
@@ -36,7 +36,7 @@ const ItemComment = React.memo(
               })}
             </span>
           </div>
-          <EditComment ref={editComment} defaultData={data} onUpdate={onUpdate}>
+          <CommentEdit ref={commentEdit} defaultData={data} onUpdate={onUpdate}>
             <>
               <Markdown source={data.text} linkTarget="_blank" className={styles.text} />
               <Comment.Actions>
@@ -66,7 +66,7 @@ const ItemComment = React.memo(
                 )}
               </Comment.Actions>
             </>
-          </EditComment>
+          </CommentEdit>
         </div>
       </Comment>
     );

client/src/components/CardModal/AddAttachmentZone/index.js

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

client/src/components/CardModal/AttachmentAddPopup.jsx

@@ -5,9 +5,9 @@ import { Menu } from 'semantic-ui-react';
 import { withPopup } from '../../lib/popup';
 import { FilePicker, Popup } from '../../lib/custom-ui';
 
-import styles from './AddAttachmentPopup.module.scss';
+import styles from './AttachmentAddPopup.module.scss';
 
-const AddAttachmentStep = React.memo(({ onCreate, onClose }) => {
+const AttachmentAddStep = React.memo(({ onCreate, onClose }) => {
   const [t] = useTranslation();
 
   const handleFileSelect = useCallback(
@@ -46,9 +46,9 @@ const AddAttachmentStep = React.memo(({ onCreate, onClose }) => {
   );
 });
 
-AddAttachmentStep.propTypes = {
+AttachmentAddStep.propTypes = {
   onCreate: PropTypes.func.isRequired,
   onClose: PropTypes.func.isRequired,
 };
 
-export default withPopup(AddAttachmentStep);
+export default withPopup(AttachmentAddStep);

client/src/components/CardModal/AttachmentAddZone/AttachmentAddZone.jsx

@@ -5,11 +5,11 @@ import { useTranslation } from 'react-i18next';
 import { closePopup } from '../../../lib/popup';
 
 import { useModal } from '../../../hooks';
-import AddTextFileModal from './AddTextFileModal';
+import TextFileAddModal from './TextFileAddModal';
 
-import styles from './AddAttachmentZone.module.scss';
+import styles from './AttachmentAddZone.module.scss';
 
-const AddAttachmentZone = React.memo(({ children, onCreate }) => {
+const AttachmentAddZone = React.memo(({ children, onCreate }) => {
   const [t] = useTranslation();
   const [modal, openModal, handleModalClose] = useModal();
 
@@ -90,7 +90,7 @@ const AddAttachmentZone = React.memo(({ children, onCreate }) => {
         <input {...getInputProps()} />
       </div>
       {modal && (
-        <AddTextFileModal
+        <TextFileAddModal
           content={modal.content}
           onCreate={handleFileCreate}
           onClose={handleModalClose}
@@ -100,9 +100,9 @@ const AddAttachmentZone = React.memo(({ children, onCreate }) => {
   );
 });
 
-AddAttachmentZone.propTypes = {
+AttachmentAddZone.propTypes = {
   children: PropTypes.element.isRequired,
   onCreate: PropTypes.func.isRequired,
 };
 
-export default AddAttachmentZone;
+export default AttachmentAddZone;

client/src/components/CardModal/AttachmentAddZone/TextFileAddModal.jsx

@@ -6,9 +6,9 @@ import { Input } from '../../../lib/custom-ui';
 
 import { useForm } from '../../../hooks';
 
-import styles from './AddTextFileModal.module.scss';
+import styles from './TextFileAddModal.module.scss';
 
-const AddTextFileModal = React.memo(({ content, onCreate, onClose }) => {
+const TextFileAddModal = React.memo(({ content, onCreate, onClose }) => {
   const [t] = useTranslation();
 
   const [data, handleFieldChange] = useForm(() => ({
@@ -74,10 +74,10 @@ const AddTextFileModal = React.memo(({ content, onCreate, onClose }) => {
   );
 });
 
-AddTextFileModal.propTypes = {
+TextFileAddModal.propTypes = {
   content: PropTypes.string.isRequired,
   onCreate: PropTypes.func.isRequired,
   onClose: PropTypes.func.isRequired,
 };
 
-export default AddTextFileModal;
+export default TextFileAddModal;

client/src/components/CardModal/AttachmentAddZone/index.js

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

client/src/components/CardModal/CardModal.jsx

@@ -6,11 +6,11 @@ import { Button, Grid, Icon, Modal } from 'semantic-ui-react';
 import { Markdown } from '../../lib/custom-ui';
 
 import NameField from './NameField';
-import EditDescription from './EditDescription';
+import DescriptionEdit from './DescriptionEdit';
 import Tasks from './Tasks';
 import Attachments from './Attachments';
-import AddAttachmentZone from './AddAttachmentZone';
-import AddAttachmentPopup from './AddAttachmentPopup';
+import AttachmentAddZone from './AttachmentAddZone';
+import AttachmentAddPopup from './AttachmentAddPopup';
 import Actions from './Actions';
 import User from '../User';
 import Label from '../Label';
@@ -18,9 +18,9 @@ import DueDate from '../DueDate';
 import Timer from '../Timer';
 import ProjectMembershipsPopup from '../ProjectMembershipsPopup';
 import LabelsPopup from '../LabelsPopup';
-import EditDueDatePopup from '../EditDueDatePopup';
-import EditTimerPopup from '../EditTimerPopup';
-import MoveCardPopup from '../MoveCardPopup';
+import DueDateEditPopup from '../DueDateEditPopup';
+import TimerEditPopup from '../TimerEditPopup';
+import CardMovePopup from '../CardMovePopup';
 import DeletePopup from '../DeletePopup';
 
 import styles from './CardModal.module.scss';
@@ -128,7 +128,7 @@ const CardModal = React.memo(
 
     return (
       <Modal open closeIcon size="small" centered={false} onClose={onClose}>
-        <AddAttachmentZone onCreate={onAttachmentCreate}>
+        <AttachmentAddZone onCreate={onAttachmentCreate}>
           <Grid className={styles.grid}>
             <Grid.Row className={styles.headerPadding}>
               <Grid.Column width={16} className={styles.headerPadding}>
@@ -227,9 +227,9 @@ const CardModal = React.memo(
                           })}
                         </div>
                         <span className={styles.attachment}>
-                          <EditDueDatePopup defaultValue={dueDate} onUpdate={handleDueDateUpdate}>
+                          <DueDateEditPopup defaultValue={dueDate} onUpdate={handleDueDateUpdate}>
                             <DueDate value={dueDate} />
-                          </EditDueDatePopup>
+                          </DueDateEditPopup>
                         </span>
                       </div>
                     )}
@@ -241,9 +241,9 @@ const CardModal = React.memo(
                           })}
                         </div>
                         <span className={styles.attachment}>
-                          <EditTimerPopup defaultValue={timer} onUpdate={handleTimerUpdate}>
+                          <TimerEditPopup defaultValue={timer} onUpdate={handleTimerUpdate}>
                             <Timer startedAt={timer.startedAt} total={timer.total} />
-                          </EditTimerPopup>
+                          </TimerEditPopup>
                         </span>
                       </div>
                     )}
@@ -253,7 +253,7 @@ const CardModal = React.memo(
                   <div className={styles.moduleWrapper}>
                     <Icon name="align justify" className={styles.moduleIcon} />
                     <div className={styles.moduleHeader}>{t('common.description')}</div>
-                    <EditDescription defaultValue={description} onUpdate={handleDescriptionUpdate}>
+                    <DescriptionEdit defaultValue={description} onUpdate={handleDescriptionUpdate}>
                       {description ? (
                         <button type="button" className={styles.descriptionText}>
                           <Markdown linkStopPropagation source={description} linkTarget="_blank" />
@@ -265,7 +265,7 @@ const CardModal = React.memo(
                           </span>
                         </button>
                       )}
-                    </EditDescription>
+                    </DescriptionEdit>
                   </div>
                 </div>
                 <div className={styles.contentModule}>
@@ -333,26 +333,26 @@ const CardModal = React.memo(
                       {t('common.labels')}
                     </Button>
                   </LabelsPopup>
-                  <EditDueDatePopup defaultValue={dueDate} onUpdate={handleDueDateUpdate}>
+                  <DueDateEditPopup defaultValue={dueDate} onUpdate={handleDueDateUpdate}>
                     <Button fluid className={styles.actionButton}>
                       <Icon name="calendar check outline" className={styles.actionIcon} />
                       {t('common.dueDate', {
                         context: 'title',
                       })}
                     </Button>
-                  </EditDueDatePopup>
-                  <EditTimerPopup defaultValue={timer} onUpdate={handleTimerUpdate}>
+                  </DueDateEditPopup>
+                  <TimerEditPopup defaultValue={timer} onUpdate={handleTimerUpdate}>
                     <Button fluid className={styles.actionButton}>
                       <Icon name="clock outline" className={styles.actionIcon} />
                       {t('common.timer')}
                     </Button>
-                  </EditTimerPopup>
-                  <AddAttachmentPopup onCreate={onAttachmentCreate}>
+                  </TimerEditPopup>
+                  <AttachmentAddPopup onCreate={onAttachmentCreate}>
                     <Button fluid className={styles.actionButton}>
                       <Icon name="attach" className={styles.actionIcon} />
                       {t('common.attachment')}
                     </Button>
-                  </AddAttachmentPopup>
+                  </AttachmentAddPopup>
                 </div>
                 <div className={styles.actions}>
                   <span className={styles.actionsTitle}>{t('common.actions')}</span>
@@ -364,7 +364,7 @@ const CardModal = React.memo(
                     <Icon name="paper plane outline" className={styles.actionIcon} />
                     {isSubscribed ? t('action.unsubscribe') : t('action.subscribe')}
                   </Button>
-                  <MoveCardPopup
+                  <CardMovePopup
                     projectsToLists={allProjectsToLists}
                     defaultPath={{
                       projectId,
@@ -383,7 +383,7 @@ const CardModal = React.memo(
                       <Icon name="share square outline" className={styles.actionIcon} />
                       {t('action.move')}
                     </Button>
-                  </MoveCardPopup>
+                  </CardMovePopup>
                   <DeletePopup
                     title={t('common.deleteCard', {
                       context: 'title',
@@ -401,7 +401,7 @@ const CardModal = React.memo(
               </Grid.Column>
             </Grid.Row>
           </Grid>
-        </AddAttachmentZone>
+        </AttachmentAddZone>
       </Modal>
     );
   },

client/src/components/CardModal/DescriptionEdit.jsx

@@ -6,9 +6,9 @@ import { Button, Form, TextArea } from 'semantic-ui-react';
 
 import { useClosableForm, useField } from '../../hooks';
 
-import styles from './EditDescription.module.scss';
+import styles from './DescriptionEdit.module.scss';
 
-const EditDescription = React.forwardRef(({ children, defaultValue, onUpdate }, ref) => {
+const DescriptionEdit = React.forwardRef(({ children, defaultValue, onUpdate }, ref) => {
   const [t] = useTranslation();
   const [isOpened, setIsOpened] = useState(false);
   const [value, handleFieldChange, setValue] = useField(null);
@@ -103,14 +103,14 @@ const EditDescription = React.forwardRef(({ children, defaultValue, onUpdate },
   );
 });
 
-EditDescription.propTypes = {
+DescriptionEdit.propTypes = {
   children: PropTypes.element.isRequired,
   defaultValue: PropTypes.string,
   onUpdate: PropTypes.func.isRequired,
 };
 
-EditDescription.defaultProps = {
+DescriptionEdit.defaultProps = {
   defaultValue: undefined,
 };
 
-export default React.memo(EditDescription);
+export default React.memo(DescriptionEdit);

client/src/components/CardModal/Tasks/Item.jsx

@@ -3,17 +3,17 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { Button, Checkbox, Icon } from 'semantic-ui-react';
 
-import EditName from './EditName';
+import NameEdit from './NameEdit';
 import ActionsPopup from './ActionsPopup';
 
 import styles from './Item.module.scss';
 
 const Item = React.memo(({ name, isCompleted, isPersisted, onUpdate, onDelete }) => {
-  const editName = useRef(null);
+  const nameEdit = useRef(null);
 
   const handleClick = useCallback(() => {
     if (isPersisted) {
-      editName.current.open();
+      nameEdit.current.open();
     }
   }, [isPersisted]);
 
@@ -33,7 +33,7 @@ const Item = React.memo(({ name, isCompleted, isPersisted, onUpdate, onDelete })
   }, [isCompleted, onUpdate]);
 
   const handleNameEdit = useCallback(() => {
-    editName.current.open();
+    nameEdit.current.open();
   }, []);
 
   return (
@@ -46,7 +46,7 @@ const Item = React.memo(({ name, isCompleted, isPersisted, onUpdate, onDelete })
           onChange={handleToggleChange}
         />
       </span>
-      <EditName ref={editName} defaultValue={name} onUpdate={handleNameUpdate}>
+      <NameEdit ref={nameEdit} defaultValue={name} onUpdate={handleNameUpdate}>
         <div className={styles.content}>
           {/* eslint-disable jsx-a11y/click-events-have-key-events,
                              jsx-a11y/no-static-element-interactions */}
@@ -65,7 +65,7 @@ const Item = React.memo(({ name, isCompleted, isPersisted, onUpdate, onDelete })
             </ActionsPopup>
           )}
         </div>
-      </EditName>
+      </NameEdit>
     </div>
   );
 });

client/src/components/CardModal/Tasks/NameEdit.jsx

@@ -6,9 +6,9 @@ import { Button, Form, TextArea } from 'semantic-ui-react';
 
 import { useClosableForm, useField } from '../../../hooks';
 
-import styles from './EditName.module.scss';
+import styles from './NameEdit.module.scss';
 
-const EditName = React.forwardRef(({ children, defaultValue, onUpdate }, ref) => {
+const NameEdit = React.forwardRef(({ children, defaultValue, onUpdate }, ref) => {
   const [t] = useTranslation();
   const [isOpened, setIsOpened] = useState(false);
   const [value, handleFieldChange, setValue] = useField(null);
@@ -105,10 +105,10 @@ const EditName = React.forwardRef(({ children, defaultValue, onUpdate }, ref) =>
   );
 });
 
-EditName.propTypes = {
+NameEdit.propTypes = {
   children: PropTypes.element.isRequired,
   defaultValue: PropTypes.string.isRequired,
   onUpdate: PropTypes.func.isRequired,
 };
 
-export default React.memo(EditName);
+export default React.memo(NameEdit);

client/src/components/CardMovePopup.jsx

@@ -0,0 +1,5 @@
+import { withPopup } from '../lib/popup';
+
+import CardMoveStep from './CardMoveStep';
+
+export default withPopup(CardMoveStep);

client/src/components/CardMoveStep/CardMoveStep.jsx

@@ -6,9 +6,9 @@ import { Popup } from '../../lib/custom-ui';
 
 import { useForm } from '../../hooks';
 
-import styles from './MoveCardStep.module.scss';
+import styles from './CardMoveStep.module.scss';
 
-const MoveCardStep = React.memo(
+const CardMoveStep = React.memo(
   ({ projectsToLists, defaultPath, onMove, onTransfer, onBoardFetch, onBack, onClose }) => {
     const [t] = useTranslation();
 
@@ -142,7 +142,7 @@ const MoveCardStep = React.memo(
   },
 );
 
-MoveCardStep.propTypes = {
+CardMoveStep.propTypes = {
   /* eslint-disable react/forbid-prop-types */
   projectsToLists: PropTypes.array.isRequired,
   defaultPath: PropTypes.object.isRequired,
@@ -154,8 +154,8 @@ MoveCardStep.propTypes = {
   onClose: PropTypes.func.isRequired,
 };
 
-MoveCardStep.defaultProps = {
+CardMoveStep.defaultProps = {
   onBack: undefined,
 };
 
-export default MoveCardStep;
+export default CardMoveStep;

client/src/components/CardMoveStep/index.js

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

client/src/components/Core.jsx

@@ -6,7 +6,7 @@ import FixedContainer from '../containers/FixedContainer';
 import StaticContainer from '../containers/StaticContainer';
 import UsersModalContainer from '../containers/UsersModalContainer';
 import UserSettingsModalContainer from '../containers/UserSettingsModalContainer';
-import AddProjectModalContainer from '../containers/AddProjectModalContainer';
+import ProjectAddModalContainer from '../containers/ProjectAddModalContainer';
 import Background from './Background';
 
 const Core = ({ currentModal, currentProject }) => (
@@ -22,7 +22,7 @@ const Core = ({ currentModal, currentProject }) => (
     <StaticContainer />
     {currentModal === ModalTypes.USERS && <UsersModalContainer />}
     {currentModal === ModalTypes.USER_SETTINGS && <UserSettingsModalContainer />}
-    {currentModal === ModalTypes.ADD_PROJECT && <AddProjectModalContainer />}
+    {currentModal === ModalTypes.ADD_PROJECT && <ProjectAddModalContainer />}
   </>
 );
 

client/src/components/DueDateEditPopup.jsx

@@ -0,0 +1,5 @@
+import { withPopup } from '../lib/popup';
+
+import DueDateEditStep from './DueDateEditStep';
+
+export default withPopup(DueDateEditStep);

client/src/components/DueDateEditStep/DueDateEditStep.jsx

@@ -8,9 +8,9 @@ import { Input, Popup } from '../../lib/custom-ui';
 
 import { useForm } from '../../hooks';
 
-import styles from './EditDueDateStep.module.scss';
+import styles from './DueDateEditStep.module.scss';
 
-const EditDueDateStep = React.memo(({ defaultValue, onUpdate, onBack, onClose }) => {
+const DueDateEditStep = React.memo(({ defaultValue, onUpdate, onBack, onClose }) => {
   const [t] = useTranslation();
 
   const [data, handleFieldChange, setData] = useForm(() => {
@@ -132,16 +132,16 @@ const EditDueDateStep = React.memo(({ defaultValue, onUpdate, onBack, onClose })
   );
 });
 
-EditDueDateStep.propTypes = {
+DueDateEditStep.propTypes = {
   defaultValue: PropTypes.instanceOf(Date),
   onUpdate: PropTypes.func.isRequired,
   onBack: PropTypes.func,
   onClose: PropTypes.func.isRequired,
 };
 
-EditDueDateStep.defaultProps = {
+DueDateEditStep.defaultProps = {
   defaultValue: undefined,
   onBack: undefined,
 };
 
-export default EditDueDateStep;
+export default DueDateEditStep;

client/src/components/DueDateEditStep/index.js

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

client/src/components/EditDueDatePopup.jsx

@@ -1,5 +0,0 @@
-import { withPopup } from '../lib/popup';
-
-import EditDueDateStep from './EditDueDateStep';
-
-export default withPopup(EditDueDateStep);

client/src/components/EditDueDateStep/index.js

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

client/src/components/EditTimerPopup.jsx

@@ -1,5 +0,0 @@
-import { withPopup } from '../lib/popup';
-
-import EditTimerStep from './EditTimerStep';
-
-export default withPopup(EditTimerStep);

client/src/components/EditTimerStep/index.js

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

client/src/components/List/CardAdd.jsx

@@ -8,13 +8,13 @@ import { useDidUpdate, useToggle } from '../../lib/hooks';
 
 import { useClosableForm, useForm } from '../../hooks';
 
-import styles from './AddCard.module.scss';
+import styles from './CardAdd.module.scss';
 
 const DEFAULT_DATA = {
   name: '',
 };
 
-const AddCard = React.memo(({ isOpened, onCreate, onClose }) => {
+const CardAdd = React.memo(({ isOpened, onCreate, onClose }) => {
   const [t] = useTranslation();
   const [data, handleFieldChange, setData] = useForm(DEFAULT_DATA);
   const [selectNameFieldState, selectNameField] = useToggle();
@@ -107,10 +107,10 @@ const AddCard = React.memo(({ isOpened, onCreate, onClose }) => {
   );
 });
 
-AddCard.propTypes = {
+CardAdd.propTypes = {
   isOpened: PropTypes.bool.isRequired,
   onCreate: PropTypes.func.isRequired,
   onClose: PropTypes.func.isRequired,
 };
 
-export default AddCard;
+export default CardAdd;

client/src/components/List/List.jsx

@@ -7,8 +7,8 @@ import { Button, Icon } from 'semantic-ui-react';
 
 import DroppableTypes from '../../constants/DroppableTypes';
 import CardContainer from '../../containers/CardContainer';
-import EditName from './EditName';
-import AddCard from './AddCard';
+import NameEdit from './NameEdit';
+import CardAdd from './CardAdd';
 import ActionsPopup from './ActionsPopup';
 import { ReactComponent as PlusMathIcon } from '../../assets/images/plus-math-icon.svg';
 
@@ -19,12 +19,12 @@ const List = React.memo(
     const [t] = useTranslation();
     const [isAddCardOpened, setIsAddCardOpened] = useState(false);
 
-    const editName = useRef(null);
+    const nameEdit = useRef(null);
     const listWrapper = useRef(null);
 
     const handleHeaderClick = useCallback(() => {
       if (isPersisted) {
-        editName.current.open();
+        nameEdit.current.open();
       }
     }, [isPersisted]);
 
@@ -46,7 +46,7 @@ const List = React.memo(
     }, []);
 
     const handleNameEdit = useCallback(() => {
-      editName.current.open();
+      nameEdit.current.open();
     }, []);
 
     const handleCardAdd = useCallback(() => {
@@ -73,7 +73,7 @@ const List = React.memo(
                 <CardContainer key={cardId} id={cardId} index={cardIndex} />
               ))}
               {placeholder}
-              <AddCard
+              <CardAdd
                 isOpened={isAddCardOpened}
                 onCreate={onCardCreate}
                 onClose={handleAddCardClose}
@@ -96,9 +96,9 @@ const List = React.memo(
               {/* eslint-enable jsx-a11y/click-events-have-key-events,
                                 jsx-a11y/no-static-element-interactions,
                                 react/jsx-props-no-spreading */}
-              <EditName ref={editName} defaultValue={name} onUpdate={handleNameUpdate}>
+              <NameEdit ref={nameEdit} defaultValue={name} onUpdate={handleNameUpdate}>
                 <div className={styles.headerName}>{name}</div>
-              </EditName>
+              </NameEdit>
               {isPersisted && (
                 <ActionsPopup
                   onNameEdit={handleNameEdit}

client/src/components/List/NameEdit.jsx

@@ -5,9 +5,9 @@ import { TextArea } from 'semantic-ui-react';
 
 import { useField } from '../../hooks';
 
-import styles from './EditName.module.scss';
+import styles from './NameEdit.module.scss';
 
-const EditName = React.forwardRef(({ children, defaultValue, onUpdate }, ref) => {
+const NameEdit = React.forwardRef(({ children, defaultValue, onUpdate }, ref) => {
   const [isOpened, setIsOpened] = useState(false);
   const [value, handleFieldChange, setValue] = useField(defaultValue);
 
@@ -94,10 +94,10 @@ const EditName = React.forwardRef(({ children, defaultValue, onUpdate }, ref) =>
   );
 });
 
-EditName.propTypes = {
+NameEdit.propTypes = {
   children: PropTypes.element.isRequired,
   defaultValue: PropTypes.string.isRequired,
   onUpdate: PropTypes.func.isRequired,
 };
 
-export default React.memo(EditName);
+export default React.memo(NameEdit);

client/src/components/MoveCardPopup.jsx

@@ -1,5 +0,0 @@
-import { withPopup } from '../lib/popup';
-
-import MoveCardStep from './MoveCardStep';
-
-export default withPopup(MoveCardStep);

client/src/components/MoveCardStep/index.js

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

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>

client/src/components/ProjectAddModal/ProjectAddModal.jsx

@@ -6,9 +6,9 @@ import { Input } from '../../lib/custom-ui';
 
 import { useForm } from '../../hooks';
 
-import styles from './AddProjectModal.module.scss';
+import styles from './ProjectAddModal.module.scss';
 
-const AddProjectModal = React.memo(({ defaultData, isSubmitting, onCreate, onClose }) => {
+const ProjectAddModal = React.memo(({ defaultData, isSubmitting, onCreate, onClose }) => {
   const [t] = useTranslation();
 
   const [data, handleFieldChange] = useForm(() => ({
@@ -71,11 +71,11 @@ const AddProjectModal = React.memo(({ defaultData, isSubmitting, onCreate, onClo
   );
 });
 
-AddProjectModal.propTypes = {
+ProjectAddModal.propTypes = {
   defaultData: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
   isSubmitting: PropTypes.bool.isRequired,
   onCreate: PropTypes.func.isRequired,
   onClose: PropTypes.func.isRequired,
 };
 
-export default AddProjectModal;
+export default ProjectAddModal;

client/src/components/ProjectAddModal/index.js

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

client/src/components/TimerEditPopup.jsx

@@ -0,0 +1,5 @@
+import { withPopup } from '../lib/popup';
+
+import TimerEditStep from './TimerEditStep';
+
+export default withPopup(TimerEditStep);

client/src/components/TimerEditStep/TimerEditStep.jsx

@@ -9,7 +9,7 @@ import { Input, Popup } from '../../lib/custom-ui';
 import { useForm } from '../../hooks';
 import { createTimer, getTimerParts, startTimer, stopTimer, updateTimer } from '../../utils/timer';
 
-import styles from './EditTimerStep.module.scss';
+import styles from './TimerEditStep.module.scss';
 
 const createData = (timer) => {
   if (!timer) {
@@ -29,7 +29,7 @@ const createData = (timer) => {
   };
 };
 
-const EditTimerStep = React.memo(({ defaultValue, onUpdate, onBack, onClose }) => {
+const TimerEditStep = React.memo(({ defaultValue, onUpdate, onBack, onClose }) => {
   const [t] = useTranslation();
   const [data, handleFieldChange, setData] = useForm(() => createData(defaultValue));
   const [isEditing, toggleEdit] = useToggle();
@@ -171,16 +171,16 @@ const EditTimerStep = React.memo(({ defaultValue, onUpdate, onBack, onClose }) =
   );
 });
 
-EditTimerStep.propTypes = {
+TimerEditStep.propTypes = {
   defaultValue: PropTypes.object, // eslint-disable-line react/forbid-prop-types
   onUpdate: PropTypes.func.isRequired,
   onBack: PropTypes.func,
   onClose: PropTypes.func.isRequired,
 };
 
-EditTimerStep.defaultProps = {
+TimerEditStep.defaultProps = {
   defaultValue: undefined,
   onBack: undefined,
 };
 
-export default EditTimerStep;
+export default TimerEditStep;

client/src/components/TimerEditStep/index.js

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

client/src/components/UserAddPopup/UserAddPopup.jsx

@@ -10,7 +10,7 @@ import { Input, Popup } from '../../lib/custom-ui';
 import { useForm } from '../../hooks';
 import { isUsername } from '../../utils/validator';
 
-import styles from './AddUserPopup.module.scss';
+import styles from './UserAddPopup.module.scss';
 
 const createMessage = (error) => {
   if (!error) {
@@ -36,7 +36,7 @@ const createMessage = (error) => {
   }
 };
 
-const AddUserPopup = React.memo(
+const UserAddStep = React.memo(
   ({ defaultData, isSubmitting, error, onCreate, onMessageDismiss, onClose }) => {
     const [t] = useTranslation();
     const wasSubmitting = usePrevious(isSubmitting);
@@ -190,7 +190,7 @@ const AddUserPopup = React.memo(
   },
 );
 
-AddUserPopup.propTypes = {
+UserAddStep.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
@@ -199,8 +199,8 @@ AddUserPopup.propTypes = {
   onClose: PropTypes.func.isRequired,
 };
 
-AddUserPopup.defaultProps = {
+UserAddStep.defaultProps = {
   error: undefined,
 };
 
-export default withPopup(AddUserPopup);
+export default withPopup(UserAddStep);

client/src/components/UserAddPopup/index.js

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

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);

client/src/components/UsersModal/UsersModal.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import { Button, Modal, Table } from 'semantic-ui-react';
 
-import AddUserPopupContainer from '../../containers/AddUserPopupContainer';
+import UserAddPopupContainer from '../../containers/UserAddPopupContainer';
 import Item from './Item';
 
 const UsersModal = React.memo(({ items, onUpdate, onDelete, onClose }) => {
@@ -57,9 +57,9 @@ const UsersModal = React.memo(({ items, onUpdate, onDelete, onClose }) => {
         </Table>
       </Modal.Content>
       <Modal.Actions>
-        <AddUserPopupContainer>
+        <UserAddPopupContainer>
           <Button positive content={t('action.addUser')} />
-        </AddUserPopupContainer>
+        </UserAddPopupContainer>
       </Modal.Actions>
     </Modal>
   );