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