Prepare for collection board type, refactoring, update dependencies

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