Merge branch 'develop' of github.com:Short-Tracker/frontend into feat…

…/error500-eroorPopup

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "homepage": "./",
   "dependencies": {
+    "@hello-pangea/dnd": "^16.5.0",
     "@reduxjs/toolkit": "^1.9.5",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",

src/components/Forms/AuthorizationForm/AuthorizationForm.module.scss

@@ -14,8 +14,8 @@
   &__container {
     padding: 32px 32px 12px 32px;
     width: 100%;
-    display: flex;
-    flex-direction: column;
+    display: grid;
+    gap: 12px;
     align-items: center;
   }
   &__question {

src/components/Task/Task.tsx

@@ -1,9 +1,12 @@
-import React from 'react';
-import { ClockIcon, CommentsIcon, FlagIcon } from 'ui-lib/Icons';
-import EditButton from 'ui-lib/Buttons/editTaskButton/editTaskButton';
 import { TaskEditMenu } from 'components/TaskEditMenu/TaskEditMenu';
-import styles from './Task.module.scss';
+import React, { useEffect } from 'react';
+import { useDispatch } from 'react-redux';
+import { useSelector } from 'services/hooks';
+import { resetActiveMenu, setActiveMenu } from 'store/taskMenuActiveSlice';
+import EditButton from 'ui-lib/Buttons/editTaskButton/editTaskButton';
+import { ClockIcon, CommentsIcon, FlagIcon } from 'ui-lib/Icons';
 import { TPerformers } from '../../types/types';
+import styles from './Task.module.scss';
 
 // содержимое карточки
 export interface TaskProps {
@@ -30,13 +33,33 @@ export const Task: React.FC<TaskProps> = ({
   completedTime,
 }) => {
   const [isMenuOpened, setIsMenuOpened] = React.useState(false);
+  const dispatch = useDispatch();
+  const taskMenuActiveId = useSelector((state) => state.taskMenuActive).value;
 
   const handleToggleEditMenu = () => {
-    setIsMenuOpened(!isMenuOpened);
+    if (isMenuOpened) {
+      setIsMenuOpened(false);
+      dispatch(resetActiveMenu());
+    } else {
+      setIsMenuOpened(true);
+      dispatch(setActiveMenu(taskID));
+    }
+  };
+
+  const handleCloseEditMenu = () => {
+    setIsMenuOpened(false);
   };
 
+  useEffect(() => {
+    if (taskMenuActiveId !== taskID && isMenuOpened) {
+      setIsMenuOpened(false);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [taskMenuActiveId, isMenuOpened]);
+
   const handleKeyDown = (evt: React.KeyboardEvent) => {
     if (evt.key === 'Enter' || evt.key === ' ') {
+      evt.preventDefault();
       handleToggleEditMenu();
     }
   };
@@ -57,6 +80,7 @@ export const Task: React.FC<TaskProps> = ({
             isLead={isLead}
             ownTask={ownTask}
             handleToggleEditMenu={handleToggleEditMenu}
+            handleCloseEditMenu={handleCloseEditMenu}
             status={status}
             taskID={taskID}
             performers={performers}

src/components/TaskEditMenu/TaskEditMenu.tsx

@@ -2,18 +2,17 @@
 import React from 'react';
 import { UniversalButton } from 'ui-lib/Buttons';
 import { BallpenIcon, TrashIcon } from 'ui-lib/Icons';
-import styles from './TaskEditMenu.module.scss';
-import { useDispatch } from '../../services/hooks';
-import { updateTaskStore } from '../../store/taskSlice';
+import { useClose, useDispatch } from '../../services/hooks';
 import updateTaskThunk from '../../thunks/update-task-thunk';
 import { TPerformers } from '../../types/types';
-import createTaskThunk from '../../thunks/create-task-thunk';
+import styles from './TaskEditMenu.module.scss';
 // import { changeTaskStatus } from '../../store/taskSlice';
 
 export interface TaskEditMenuProps {
   isLead: boolean | null;
   ownTask: boolean;
   handleToggleEditMenu: () => void;
+  handleCloseEditMenu: () => void;
   status: string;
   taskID: number;
   performers: TPerformers[];
@@ -25,13 +24,15 @@ export const TaskEditMenu: React.FC<TaskEditMenuProps> = ({
   isLead,
   ownTask,
   handleToggleEditMenu,
+  handleCloseEditMenu,
   status,
   performers,
   deadlineDate,
   description,
   taskID,
 }) => {
   const dispatch = useDispatch();
+  useClose(styles.container, handleCloseEditMenu);
   const notOwnLeadTask = isLead && !ownTask;
   const notOwnPerformerTask = !isLead && !ownTask;