Skip to content

Commit e45f658

Browse files
SimonMatveevSimonMatveev
committed
update task status logic fix; add task store update fix; garbage cleaning
1 parent a1277e5 commit e45f658

File tree

22 files changed

+237
-348
lines changed

22 files changed

+237
-348
lines changed

‎src/api/api.ts

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { baseUrl as api } from 'constants/baseUrl';
2+
import { TResults, TUpdateTaskStatusApi } from 'types/types';
23

34
const checkResponse = (res: Response) => {
45
if (!res.ok) {
@@ -10,10 +11,12 @@ const checkResponse = (res: Response) => {
1011
return res.json();
1112
};
1213

13-
export const request = (url: string, config?: RequestInit): Promise<any> =>
14-
fetch(`${process.env.API || api}${url}`, { ...config, credentials: 'include' }).then(
15-
checkResponse
16-
);
14+
export function request<T = any>(url: string, config?: RequestInit): Promise<T> {
15+
return fetch(`${process.env.API || api}${url}`, {
16+
...config,
17+
credentials: 'include',
18+
}).then(checkResponse);
19+
}
1720

1821
export const authUser = (userData: any) =>
1922
request('auth/login/', {
@@ -44,12 +47,19 @@ export const createTask = (taskData: any) =>
4447
body: JSON.stringify(taskData),
4548
});
4649
export const updateTaskApi = (taskData: any) =>
47-
request(`tasks/${taskData.id}`, {
50+
request<{ tasks: TResults[] }>(`tasks/${taskData.id}`, {
4851
method: 'PATCH',
4952
headers: new Headers([['Content-Type', 'application/json']]),
5053
body: JSON.stringify(taskData.data),
5154
});
5255

56+
export const updateTaskStatus = (taskData: TUpdateTaskStatusApi) =>
57+
request<{ tasks: TResults[] }>(`tasks/${taskData.id}`, {
58+
method: 'PATCH',
59+
headers: new Headers([['Content-Type', 'application/json']]),
60+
body: JSON.stringify({ status: taskData.newStatus }),
61+
});
62+
5363
export const getTask = (p: string) => request(`tasks/?status=${p}`, { method: 'GET' });
5464

5565
export const getTodoTask = () => getTask('to do');

‎src/components/Popup/CreateTask/CreateTask.tsx

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
11
import React, { BaseSyntheticEvent, SyntheticEvent, useEffect, useState } from 'react';
22
import { v4 as uuidv4 } from 'uuid';
3-
import styles from './CreateTask.module.scss';
4-
import CheckBox from '../../../ui-lib/CheckBoxes/CheckBox/CheckBox';
5-
import UniversalTextarea from '../../../ui-lib/Inputs/Textarea/UniversalTextarea';
6-
import Calendar from '../../Calendar/Calendar';
7-
import UniversalInput from '../../../ui-lib/Inputs/UniversalInput/UniversalInput';
8-
import { UniversalButton } from '../../../ui-lib/Buttons';
93
import { useDispatch, useSelector } from '../../../services/hooks';
104
import { closeModal } from '../../../store';
115
import createTaskThunk from '../../../thunks/create-task-thunk';
12-
import getTaskThunk from '../../../thunks/get-task-thunks';
6+
import { UniversalButton } from '../../../ui-lib/Buttons';
7+
import CheckBox from '../../../ui-lib/CheckBoxes/CheckBox/CheckBox';
8+
import UniversalTextarea from '../../../ui-lib/Inputs/Textarea/UniversalTextarea';
9+
import UniversalInput from '../../../ui-lib/Inputs/UniversalInput/UniversalInput';
10+
import Calendar from '../../Calendar/Calendar';
11+
import styles from './CreateTask.module.scss';
1312

1413
type CheckboxValues = Record<string, boolean>;
1514
const CreateTask = () => {
@@ -36,7 +35,6 @@ const CreateTask = () => {
3635
performers: performersId,
3736
})
3837
);
39-
dispatch(getTaskThunk(true));
4038
dispatch(closeModal());
4139
};
4240
const showCheckboxes = () => {

‎src/components/Task/Task.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ export interface TaskProps {
1919
taskCreatorId: number;
2020
isCurrentUserLead: boolean;
2121
currentUserId: number;
22+
performer: number;
2223
}
2324

2425
export const Task: React.FC<TaskProps> = ({
@@ -32,13 +33,11 @@ export const Task: React.FC<TaskProps> = ({
3233
taskCreatorId,
3334
isCurrentUserLead,
3435
currentUserId,
36+
performer,
3537
}) => {
3638
const [isMenuOpened, setIsMenuOpened] = React.useState(false);
3739
const dispatch = useDispatch();
3840
const taskMenuActiveId = useSelector((state) => state.taskMenuActive).value;
39-
// const userName = useSelector(
40-
// (state) => `${state.user.first_name} ${state.user.last_name}`
41-
// );
4241

4342
const handleToggleEditMenu = () => {
4443
if (isMenuOpened) {
@@ -92,6 +91,7 @@ export const Task: React.FC<TaskProps> = ({
9291
taskCreatorId={taskCreatorId}
9392
isCurrentUserLead={isCurrentUserLead}
9493
currentUserId={currentUserId}
94+
performer={performer}
9595
/>
9696
)}
9797

‎src/components/TaskEditMenu/TaskEditMenu.module.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
.container {
55
position: absolute;
66
top: 13px;
7-
left: 226px;
7+
right: -135px;
88
z-index: 1;
99
background-color: v.$white-color;
1010
display: grid;

‎src/components/TaskEditMenu/TaskEditMenu.tsx

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { TaskStatus } from 'types/types';
44
import { UniversalButton } from 'ui-lib/Buttons';
55
import { BallpenIcon, TrashIcon } from 'ui-lib/Icons';
66
import { useClose, useDispatch } from '../../services/hooks';
7-
import updateTaskThunk from '../../thunks/update-task-thunk';
7+
import updateTaskThunk from '../../thunks/update-task-status-thunk';
88
import styles from './TaskEditMenu.module.scss';
99
// import { changeTaskStatus } from '../../store/taskSlice';
1010

@@ -19,6 +19,7 @@ export interface TaskEditMenuProps {
1919
taskCreatorId: number;
2020
isCurrentUserLead: boolean;
2121
currentUserId: number;
22+
performer: number;
2223
}
2324

2425
export const TaskEditMenu: React.FC<TaskEditMenuProps> = ({
@@ -32,6 +33,7 @@ export const TaskEditMenu: React.FC<TaskEditMenuProps> = ({
3233
taskCreatorId,
3334
isCurrentUserLead,
3435
currentUserId,
36+
performer,
3537
}) => {
3638
const [currentStatus, setStatus] = React.useState(status);
3739
const dispatch = useDispatch();
@@ -63,13 +65,8 @@ export const TaskEditMenu: React.FC<TaskEditMenuProps> = ({
6365
dispatch(
6466
updateTaskThunk({
6567
id: taskID,
66-
data: {
67-
description,
68-
status: currentStatus,
69-
deadline_date: deadlineDate,
70-
// performers,
71-
performers: [2],
72-
},
68+
curStatus: status,
69+
newStatus: currentStatus,
7370
})
7471
);
7572
};

‎src/components/TasksDND/TasksDND.tsx

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
import { FC } from 'react';
21
import { Draggable, Droppable } from '@hello-pangea/dnd';
3-
import { TResults } from '../../types/types';
4-
import { useSelector } from '../../services/hooks';
5-
import styles from './TasksDND.module.scss';
2+
import { FC } from 'react';
63
import Tasks from '../../pages/Tasks/Tasks';
74
import { handleCheckIfTaskForMe } from '../../services/functions';
5+
import { useSelector } from '../../services/hooks';
6+
import { TResults } from '../../types/types';
7+
import styles from './TasksDND.module.scss';
88

99
interface ITaskSort {
10-
tasksArray: TResults[];
10+
tasksArray: TResults[] | [];
1111
droppableId: string;
1212
}
1313

@@ -30,7 +30,7 @@ const TaskSort: FC<ITaskSort> = ({ tasksArray, droppableId }) => {
3030

3131
return (
3232
<Droppable droppableId={droppableId}>
33-
{(provided, snapshot) => (
33+
{(provided) => (
3434
<div ref={provided.innerRef} {...provided.droppableProps}>
3535
<div className={styles.taskColumn}>
3636
{tasksArray.map((task, index) => (
@@ -53,6 +53,7 @@ const TaskSort: FC<ITaskSort> = ({ tasksArray, droppableId }) => {
5353
completedTime={task.deadline_date}
5454
status={task.status}
5555
taskID={task.id}
56+
performer={task.performer.id}
5657
taskCreatorId={task.creator.id}
5758
isCurrentUserLead={isCurrentUserLead}
5859
currentUserId={currentUserId}

‎src/pages/Main/Lead/Lead.tsx

Lines changed: 40 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -2,74 +2,33 @@ import { DragDropContext } from '@hello-pangea/dnd';
22
import Search from 'components/Search/Search';
33
import SideBar from 'components/SideBar/SideBar';
44
import Status from 'components/Status/Status';
5-
import { FC, useEffect, useMemo, useState } from 'react';
6-
import { handleCheckIfTaskForMe } from 'services/functions';
7-
import { useDispatch, useSelector } from 'services/hooks';
5+
import { FC } from 'react';
6+
import { useDispatch, useSelector, useTasksToRender } from 'services/hooks';
87
import { openCreateTaskModal } from 'store';
98
import { resetActiveMenu } from 'store/taskMenuActiveSlice';
10-
import { TResults, TTask, TaskStatus } from 'types/types';
9+
import { TaskStatus, TtaskState } from 'types/types';
1110
import { UniversalButton } from 'ui-lib/Buttons';
12-
import updateTaskThunk from '../../../thunks/update-task-thunk';
13-
import styles from './Lead.module.scss';
1411
import TaskSort from '../../../components/TasksDND/TasksDND';
12+
import updateTaskStatusThunk from '../../../thunks/update-task-status-thunk';
13+
import styles from './Lead.module.scss';
1514

1615
interface ITaskCard {
17-
allTasks: TTask;
16+
allTasks: TtaskState;
1817
}
1918

2019
const Lead: FC<ITaskCard> = ({ allTasks }) => {
21-
const { count, results } = allTasks;
20+
const { toDo, inProgress, done, hold } = allTasks;
2221
const dispatch = useDispatch();
2322
const currentUser = useSelector((state) => state.user);
24-
const tasksOfUserId = useSelector((state) => state.tasksOfUser).id;
25-
const resultsToRender = useMemo(
26-
() =>
27-
tasksOfUserId !== -1
28-
? results.filter((task) => handleCheckIfTaskForMe(tasksOfUserId, task.performer))
29-
: results,
30-
[results, tasksOfUserId]
31-
);
23+
const todoTasks = useTasksToRender(toDo);
24+
const inProgressTasks = useTasksToRender(inProgress);
25+
const doneTasks = useTasksToRender(done);
26+
const holdTasks = useTasksToRender(hold);
27+
3228
const openCreateTask = () => {
3329
dispatch(openCreateTaskModal());
3430
};
3531

36-
// eslint-disable-next-line react-hooks/rules-of-hooks
37-
const [todoTasks, setTodoTasks] = useState<TResults[]>([]);
38-
const [inProgressTasks, setInProgressTasks] = useState<TResults[]>([]);
39-
const [doneTasks, setDoneTasks] = useState<TResults[]>([]);
40-
const [holdTasks, setHoldTasks] = useState<TResults[]>([]);
41-
42-
const parseTasks = () => {
43-
const todo: TResults[] = [];
44-
const inProgress: TResults[] = [];
45-
const done: TResults[] = [];
46-
const hold: TResults[] = [];
47-
// eslint-disable-next-line no-plusplus
48-
for (let i = 0; i < resultsToRender.length; i++) {
49-
if (resultsToRender[i].status === TaskStatus.TO_DO) {
50-
todo.push(resultsToRender[i]);
51-
}
52-
if (resultsToRender[i].status === TaskStatus.IN_PROGRESS) {
53-
inProgress.push(resultsToRender[i]);
54-
}
55-
if (resultsToRender[i].status === TaskStatus.DONE) {
56-
done.push(resultsToRender[i]);
57-
}
58-
if (resultsToRender[i].status === TaskStatus.HOLD) {
59-
hold.push(results[i]);
60-
}
61-
}
62-
setTodoTasks(todo);
63-
setInProgressTasks(inProgress);
64-
setDoneTasks(done);
65-
setHoldTasks(hold);
66-
};
67-
68-
useEffect(() => {
69-
parseTasks();
70-
// eslint-disable-next-line react-hooks/exhaustive-deps
71-
}, [resultsToRender]);
72-
7332
const onDragStart = () => dispatch(resetActiveMenu());
7433

7534
const onDragEnd = (result: any) => {
@@ -81,10 +40,14 @@ const Lead: FC<ITaskCard> = ({ allTasks }) => {
8140
}
8241
const sInd = source.droppableId;
8342
const dInd = destination.droppableId;
84-
const itemIndex = allTasks.results.findIndex(
85-
(elem) => elem.id === Number(draggableId)
86-
);
87-
const item = allTasks.results[itemIndex];
43+
const allTasksArr = [
44+
...todoTasks.tasksToRender,
45+
...inProgressTasks.tasksToRender,
46+
...doneTasks.tasksToRender,
47+
...holdTasks.tasksToRender,
48+
];
49+
const itemIndex = allTasksArr.findIndex((elem) => elem.id === Number(draggableId));
50+
const item = allTasksArr[itemIndex];
8851

8952
const { status } = item;
9053
const isCurrentUserLead = currentUser.is_team_lead;
@@ -110,14 +73,10 @@ const Lead: FC<ITaskCard> = ({ allTasks }) => {
11073

11174
const updateTaskStatus = () => {
11275
dispatch(
113-
updateTaskThunk({
114-
id: draggableId,
115-
data: {
116-
description: item.description,
117-
status: dInd,
118-
deadline_date: item.deadline_date,
119-
performer: item.performer.id,
120-
},
76+
updateTaskStatusThunk({
77+
id: +draggableId,
78+
curStatus: status,
79+
newStatus: dInd,
12180
})
12281
);
12382
};
@@ -140,10 +99,22 @@ const Lead: FC<ITaskCard> = ({ allTasks }) => {
14099
<Status />
141100
<div className={styles.tasksWrapper}>
142101
<DragDropContext onDragEnd={onDragEnd} onDragStart={onDragStart}>
143-
<TaskSort tasksArray={todoTasks} droppableId='to do' />
144-
<TaskSort tasksArray={inProgressTasks} droppableId='in progress' />
145-
<TaskSort tasksArray={doneTasks} droppableId='done' />
146-
<TaskSort tasksArray={holdTasks} droppableId={TaskStatus.HOLD} />
102+
<TaskSort
103+
tasksArray={todoTasks.tasksToRender}
104+
droppableId={TaskStatus.TO_DO}
105+
/>
106+
<TaskSort
107+
tasksArray={inProgressTasks.tasksToRender}
108+
droppableId={TaskStatus.IN_PROGRESS}
109+
/>
110+
<TaskSort
111+
tasksArray={doneTasks.tasksToRender}
112+
droppableId={TaskStatus.DONE}
113+
/>
114+
<TaskSort
115+
tasksArray={holdTasks.tasksToRender}
116+
droppableId={TaskStatus.HOLD}
117+
/>
147118
</DragDropContext>
148119
</div>
149120
</div>

‎src/pages/Main/Main.tsx

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
import Login from 'pages/Login/Login';
22
import { useEffect } from 'react';
33
import { useDispatch, useSelector } from 'services/hooks';
4-
import getTaskThunk from 'thunks/get-task-thunks';
5-
import getUsersThunk from 'thunks/get-users-thunks';
6-
import { TTask } from 'types/types';
74
import getTasksThunk from 'thunks/get-tasks-thunks';
5+
import getUsersThunk from 'thunks/get-users-thunks';
6+
import { TtaskState } from 'types/types';
87
import Lead from './Lead/Lead';
98
import styles from './Main.module.scss';
109
import User from './User/User';
@@ -13,15 +12,14 @@ const Main = () => {
1312
const dispatch = useDispatch();
1413
const { isLoggedIn } = useSelector((state) => state.system);
1514
const isLead = useSelector((state) => state.user).is_team_lead;
16-
const tasks: TTask = useSelector((state) => state.task);
15+
const tasks: TtaskState = useSelector((state) => state.tasks);
1716

1817
// const isLead = true;
1918
useEffect(() => {
20-
dispatch(getTaskThunk(isLoggedIn));
2119
dispatch(getTasksThunk(isLoggedIn));
2220
dispatch(getUsersThunk(isLoggedIn));
2321
// eslint-disable-next-line react-hooks/exhaustive-deps
24-
}, [isLoggedIn, tasks.results.length]);
22+
}, [isLoggedIn, tasks.count]);
2523

2624
return (
2725
<main className={styles.main}>

0 commit comments

Comments
 (0)