Prepare for collection board type, refactoring, update dependencies

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