From b57476aa6967770d7b653feed07df8b15848f64a Mon Sep 17 00:00:00 2001 From: AlvaroZev Date: Mon, 16 Oct 2023 22:42:31 -0500 Subject: [PATCH 1/6] wip: board updates state, Real time does not work --- src/components/ui/Task/status.tsx | 20 ++++++ src/modules/tasks/index.tsx | 105 +++++++++++++++++++++++------- 2 files changed, 102 insertions(+), 23 deletions(-) diff --git a/src/components/ui/Task/status.tsx b/src/components/ui/Task/status.tsx index 7a4994c..4f0d84d 100644 --- a/src/components/ui/Task/status.tsx +++ b/src/components/ui/Task/status.tsx @@ -287,3 +287,23 @@ export const StatusSelectorByTask = ({ task, type, iconVariant }: StatusSelector ); }; + + +export const ChangeTaskStatus = (status: TaskStatus, taskId: String, fetchUpdateTask: any) => { + const onUpdateTaskStatus = async (status: TaskStatus) => { + const res = await fetchUpdateTask({ + taskId: taskId, + status: statusName(status), + }); + + if (res.data) { + SuccessNotification("Status updated", res.data.updateTask.title); + } + if (res.error) { + ErrorNotification(); + } + }; + onUpdateTaskStatus(status); + return <>; +}; + diff --git a/src/modules/tasks/index.tsx b/src/modules/tasks/index.tsx index 6bd05b7..e9f4689 100644 --- a/src/modules/tasks/index.tsx +++ b/src/modules/tasks/index.tsx @@ -23,10 +23,11 @@ import { useQuery } from "urql"; import { TasksDocument, TaskStatus } from "integration/graphql"; import { TaskCardElement, TaskListElement } from "components/ui/Task/task"; -import { StatusIcon, statusName } from "components/ui/Task/status"; +import { ChangeTaskStatus, StatusIcon, statusName } from "components/ui/Task/status"; import { usePlexoContext } from "context/PlexoContext"; import { Task } from "lib/types"; import FilterMenu from "components/ui/Filters/filterMenu"; +import { useActions } from "lib/hooks/useActions"; const useStyles = createStyles(theme => ({ burger: { @@ -68,16 +69,46 @@ const useStyles = createStyles(theme => ({ }, })); -const DndTaskBoard = ({ statusData }: { statusData: Task[] }) => { +type TaskBoardProps = { + statusData: Task[] ; + currentStatus: TaskStatus; +}; + + +// const DndTaskBoard = ({ statusData, currentStatus }:TaskBoardProps ) => { +// const [state, handlers] = useListState([...statusData]); + +// return ( + +// +// {provided => ( +//
+// {state.map((t: Task, index: number) => ( +// +// {provided => ( +//
+// +//
+// )} +// +// ))} +// {provided.placeholder} +//
+// )} +// +// ); +// }; + +const DndTaskBoard = ({ statusData, currentStatus }:TaskBoardProps ) => { const [state, handlers] = useListState([...statusData]); return ( - { - handlers.reorder({ from: source.index, to: destination?.index || 0 }); - }} - > - + + {provided => (
{state.map((t: Task, index: number) => ( @@ -97,19 +128,13 @@ const DndTaskBoard = ({ statusData }: { statusData: Task[] }) => {
)} - ); }; - const DndTaskList = ({ statusData }: { statusData: Task[] }) => { const [state, handlers] = useListState([...statusData]); return ( - { - handlers.reorder({ from: source.index, to: destination?.index || 0 }); - }} - > + {provided => (
@@ -130,10 +155,11 @@ const DndTaskList = ({ statusData }: { statusData: Task[] }) => {
)} - + ); }; + type StatusCounterProps = { status: TaskStatus; taskData: Task[] | undefined; @@ -178,7 +204,7 @@ const TasksBoard = ({ taskData, fetching }: TasksProps) => { }; const TaskCard = ({ status }: TaskProps) => { - return ; + return ; }; const Counter = ({ status, fetching }: CounterProps) => { @@ -206,9 +232,35 @@ const TasksBoard = ({ taskData, fetching }: TasksProps) => { return colsCounter > 6 ? 6 : colsCounter; }; + const { fetchUpdateTask } = useActions(); + return ( + { + + + //handlers.reorder({ from: source.index, to: destination?.index || 0 }); + // If there's no destination (e.g., item was dropped outside the list), do nothing + if (!destination) { + console.log("no destination"); + return; + } + + // If the item was dropped in the same place, do nothing + if (destination.droppableId === source.droppableId ) { + console.log("same place"); + return; + } + console.log("destination", destination); + // Determine the new status based on the destination + const newStatus = destination.droppableId; // You'll need to implement this function + + // Update the task's status + ChangeTaskStatus(newStatus as TaskStatus, draggableId, fetchUpdateTask); + }} + > {StatusBoardEnable(TaskStatus.None) && ( @@ -216,7 +268,7 @@ const TasksBoard = ({ taskData, fetching }: TasksProps) => { {fetching ? ( ) : ( - + )} @@ -228,7 +280,7 @@ const TasksBoard = ({ taskData, fetching }: TasksProps) => { {fetching ? ( ) : ( - + )} @@ -240,7 +292,7 @@ const TasksBoard = ({ taskData, fetching }: TasksProps) => { {fetching ? ( ) : ( - + )} @@ -252,7 +304,7 @@ const TasksBoard = ({ taskData, fetching }: TasksProps) => { {fetching ? ( ) : ( - + )} @@ -264,7 +316,7 @@ const TasksBoard = ({ taskData, fetching }: TasksProps) => { {fetching ? ( ) : ( - + )} @@ -276,11 +328,12 @@ const TasksBoard = ({ taskData, fetching }: TasksProps) => { {fetching ? ( ) : ( - + )} )} + ); @@ -311,6 +364,11 @@ const TasksList = ({ taskData, fetching }: TasksProps) => { return ( + { + // handlers.reorder({ from: source.index, to: destination?.index || 0 }); + }} + > {fetching ? : } @@ -336,6 +394,7 @@ const TasksList = ({ taskData, fetching }: TasksProps) => { ) : ( )} + ); From d9cccfd488fb1392e24f4d1bb02fb38ca46ee771 Mon Sep 17 00:00:00 2001 From: AlvaroZev Date: Wed, 18 Oct 2023 14:14:49 -0500 Subject: [PATCH 2/6] fix: board was not updating task statuses --- src/components/ui/Task/status.tsx | 32 ++-- src/modules/tasks/index.tsx | 275 ++++++++++++++++-------------- 2 files changed, 160 insertions(+), 147 deletions(-) diff --git a/src/components/ui/Task/status.tsx b/src/components/ui/Task/status.tsx index 4f0d84d..00e7ee5 100644 --- a/src/components/ui/Task/status.tsx +++ b/src/components/ui/Task/status.tsx @@ -289,21 +289,21 @@ export const StatusSelectorByTask = ({ task, type, iconVariant }: StatusSelector }; -export const ChangeTaskStatus = (status: TaskStatus, taskId: String, fetchUpdateTask: any) => { - const onUpdateTaskStatus = async (status: TaskStatus) => { - const res = await fetchUpdateTask({ - taskId: taskId, - status: statusName(status), - }); +// export const ChangeTaskStatus = (status: TaskStatus, taskId: String, fetchUpdateTask: any) => { +// const onUpdateTaskStatus = async (status: TaskStatus) => { +// const res = await fetchUpdateTask({ +// taskId: taskId, +// status: statusName(status), +// }); - if (res.data) { - SuccessNotification("Status updated", res.data.updateTask.title); - } - if (res.error) { - ErrorNotification(); - } - }; - onUpdateTaskStatus(status); - return <>; -}; +// if (res.data) { +// SuccessNotification("Status updated", res.data.updateTask.title); +// } +// if (res.error) { +// ErrorNotification(); +// } +// }; +// onUpdateTaskStatus(status); +// return <>; +// }; diff --git a/src/modules/tasks/index.tsx b/src/modules/tasks/index.tsx index e9f4689..096ed59 100644 --- a/src/modules/tasks/index.tsx +++ b/src/modules/tasks/index.tsx @@ -16,18 +16,19 @@ import { } from "@mantine/core"; import { useListState } from "@mantine/hooks"; import { useEffect, useState } from "react"; -import { DragDropContext, Draggable, Droppable } from "react-beautiful-dnd"; +import { DragDropContext, Draggable, Droppable, DropResult } from "react-beautiful-dnd"; import { LayoutColumns, LayoutRows, LayoutSidebar } from "tabler-icons-react"; import { getCookie, setCookie } from "cookies-next"; import { useQuery } from "urql"; import { TasksDocument, TaskStatus } from "integration/graphql"; import { TaskCardElement, TaskListElement } from "components/ui/Task/task"; -import { ChangeTaskStatus, StatusIcon, statusName } from "components/ui/Task/status"; +import { StatusIcon, statusName } from "components/ui/Task/status"; import { usePlexoContext } from "context/PlexoContext"; import { Task } from "lib/types"; import FilterMenu from "components/ui/Filters/filterMenu"; import { useActions } from "lib/hooks/useActions"; +import { ErrorNotification, SuccessNotification } from "lib/notifications"; const useStyles = createStyles(theme => ({ burger: { @@ -75,51 +76,23 @@ type TaskBoardProps = { }; -// const DndTaskBoard = ({ statusData, currentStatus }:TaskBoardProps ) => { -// const [state, handlers] = useListState([...statusData]); - -// return ( - -// -// {provided => ( -//
-// {state.map((t: Task, index: number) => ( -// -// {provided => ( -//
-// -//
-// )} -// -// ))} -// {provided.placeholder} -//
-// )} -// -// ); -// }; - const DndTaskBoard = ({ statusData, currentStatus }:TaskBoardProps ) => { - const [state, handlers] = useListState([...statusData]); + return ( - + {provided => (
- {state.map((t: Task, index: number) => ( - + {statusData.map((task: Task, index: number) => ( + {provided => (
- +
)} @@ -233,110 +206,150 @@ const TasksBoard = ({ taskData, fetching }: TasksProps) => { }; const { fetchUpdateTask } = useActions(); + const ChangeTaskStatus = async (status: TaskStatus, taskId: String, fetchUpdateTask: any) => { + + const res = await fetchUpdateTask({ + taskId: taskId, + status: statusName(status), + }); + if (res.data) { + SuccessNotification("Status updated", res.data.updateTask.title); + return true; + + //move visually droppable element from one column to another + + } + if (res.error) { + ErrorNotification(); + return false; + } + + }; + + const initialStatusMap: StatusMap = { + [TaskStatus.None]: dataByStatus(TaskStatus.None), + [TaskStatus.Backlog]: dataByStatus(TaskStatus.Backlog), + [TaskStatus.ToDo]: dataByStatus(TaskStatus.ToDo), + [TaskStatus.InProgress]: dataByStatus(TaskStatus.InProgress), + [TaskStatus.Done]: dataByStatus(TaskStatus.Done), + [TaskStatus.Canceled]: dataByStatus(TaskStatus.Canceled), + }; + + type StatusMap = { + [status in TaskStatus]: Task[]; + }; + + const [columns, setColumns] = useState(initialStatusMap); + const [ordered, setOrdered] = useState(Object.keys(initialStatusMap) as TaskStatus[]); + const [lastUpdated, setLastUpdated] = useState(null); + + const onDragEnd = async (result: DropResult) => { + const { destination, source, draggableId } = result; + + // If there's no destination (e.g., item was dropped outside the list), do nothing + if (!destination) { + return; + } + + // If the item was dropped in the same place, do nothing + if ( + destination.droppableId === source.droppableId && + destination.index === source.index + ) { + return; + } + + // We update the UI + + // Create a shallow copy of the current columns + const newColumns = { ...columns }; + + // Remove the task from the source column + const sourceTasks = [...newColumns[source.droppableId as TaskStatus]]; + const [movedTask] = sourceTasks.splice(source.index, 1); + newColumns[source.droppableId as TaskStatus] = sourceTasks; + + // Add the task to the destination column + const destinationTasks = [...newColumns[destination.droppableId as TaskStatus]]; + + //update the task status visual locally + movedTask.status = destination.droppableId as TaskStatus; + + // Add the task to the destination column pt2 + destinationTasks.splice(destination.index, 0, movedTask); + newColumns[destination.droppableId as TaskStatus] = destinationTasks; + + //update the task status visual locally + + + + + // Update the state with the new columns + setColumns(newColumns); + setLastUpdated(new Date()); + + + + // Update the task's status in the backend + const newStatus = destination.droppableId as TaskStatus; + const wasSuccessful = await ChangeTaskStatus(newStatus, draggableId, fetchUpdateTask); + + // If the backend update was unsuccessful, update the UI to return to the previous position + if (!wasSuccessful) { + // Create a shallow copy of the modified columns + const revertedColumns = { ...newColumns }; + + // Remove the task from the destination column + const currentDestinationTasks = [...revertedColumns[destination.droppableId as TaskStatus]]; + currentDestinationTasks.splice(destination.index, 1); + revertedColumns[destination.droppableId as TaskStatus] = currentDestinationTasks; + + // Add the task back to the source column at its original position + const currentSourceTasks = [...revertedColumns[source.droppableId as TaskStatus]]; + + //update the task status visual locally + movedTask.status = source.droppableId as TaskStatus; + + // Add the task back to the source column at its original position pt2 + currentSourceTasks.splice(source.index, 0, movedTask); + revertedColumns[source.droppableId as TaskStatus] = currentSourceTasks; + + + // Update the state with the reverted columns + setColumns(revertedColumns); + + } else { + //we need to reload the whole column + + } + setOrdered(Object.keys(newColumns) as TaskStatus[]); + }; + return ( - { - - - //handlers.reorder({ from: source.index, to: destination?.index || 0 }); - // If there's no destination (e.g., item was dropped outside the list), do nothing - if (!destination) { - console.log("no destination"); - return; - } - - // If the item was dropped in the same place, do nothing - if (destination.droppableId === source.droppableId ) { - console.log("same place"); - return; - } - console.log("destination", destination); - // Determine the new status based on the destination - const newStatus = destination.droppableId; // You'll need to implement this function - - // Update the task's status - ChangeTaskStatus(newStatus as TaskStatus, draggableId, fetchUpdateTask); - }} - > - {StatusBoardEnable(TaskStatus.None) && ( - - - - {fetching ? ( - - ) : ( - - )} - - - )} - {StatusBoardEnable(TaskStatus.Backlog) && ( - - - - {fetching ? ( - - ) : ( - - )} - - - )} - {StatusBoardEnable(TaskStatus.ToDo) && ( - - - - {fetching ? ( - - ) : ( - - )} - - - )} - {StatusBoardEnable(TaskStatus.InProgress) && ( - - - - {fetching ? ( - - ) : ( - - )} - - - )} - {StatusBoardEnable(TaskStatus.Done) && ( - - - - {fetching ? ( - - ) : ( - - )} - - - )} - {StatusBoardEnable(TaskStatus.Canceled) && ( - - - - {fetching ? ( - - ) : ( - - )} - - - )} + + {ordered.map((key, index) => ( + StatusBoardEnable(key as TaskStatus) && ( + + + + {fetching ? ( + + ) : ( + + )} + + + ) + ))} ); + + }; const TasksList = ({ taskData, fetching }: TasksProps) => { From ea7f49ae7da45963cbdd926ec38786587820f9b7 Mon Sep 17 00:00:00 2001 From: AlvaroZev Date: Wed, 18 Oct 2023 18:46:47 -0500 Subject: [PATCH 3/6] feat: Dnd for list view --- src/components/ui/Task/status.tsx | 17 --- src/modules/tasks/index.tsx | 184 ++++++++++++++++++++++-------- 2 files changed, 139 insertions(+), 62 deletions(-) diff --git a/src/components/ui/Task/status.tsx b/src/components/ui/Task/status.tsx index 00e7ee5..7429edf 100644 --- a/src/components/ui/Task/status.tsx +++ b/src/components/ui/Task/status.tsx @@ -289,21 +289,4 @@ export const StatusSelectorByTask = ({ task, type, iconVariant }: StatusSelector }; -// export const ChangeTaskStatus = (status: TaskStatus, taskId: String, fetchUpdateTask: any) => { -// const onUpdateTaskStatus = async (status: TaskStatus) => { -// const res = await fetchUpdateTask({ -// taskId: taskId, -// status: statusName(status), -// }); - -// if (res.data) { -// SuccessNotification("Status updated", res.data.updateTask.title); -// } -// if (res.error) { -// ErrorNotification(); -// } -// }; -// onUpdateTaskStatus(status); -// return <>; -// }; diff --git a/src/modules/tasks/index.tsx b/src/modules/tasks/index.tsx index 096ed59..3edc78d 100644 --- a/src/modules/tasks/index.tsx +++ b/src/modules/tasks/index.tsx @@ -80,7 +80,6 @@ const DndTaskBoard = ({ statusData, currentStatus }:TaskBoardProps ) => { return ( - {provided => (
@@ -103,23 +102,28 @@ const DndTaskBoard = ({ statusData, currentStatus }:TaskBoardProps ) => { ); }; -const DndTaskList = ({ statusData }: { statusData: Task[] }) => { - const [state, handlers] = useListState([...statusData]); - return ( +type TaskListProps = { + statusData: Task[] ; + currentStatus: TaskStatus; +}; - +const DndTaskList = ({ statusData, currentStatus }:TaskListProps) => { + + + return ( + {provided => (
- {state.map((t: Task, index: number) => ( - + {statusData.map((task: Task, index: number) => ( + {provided => (
- +
)} @@ -176,9 +180,6 @@ const TasksBoard = ({ taskData, fetching }: TasksProps) => { return data; }; - const TaskCard = ({ status }: TaskProps) => { - return ; - }; const Counter = ({ status, fetching }: CounterProps) => { return dataByStatus(status).length || fetching ? ( @@ -310,7 +311,7 @@ const TasksBoard = ({ taskData, fetching }: TasksProps) => { //update the task status visual locally movedTask.status = source.droppableId as TaskStatus; - + // Add the task back to the source column at its original position pt2 currentSourceTasks.splice(source.index, 0, movedTask); revertedColumns[source.droppableId as TaskStatus] = currentSourceTasks; @@ -362,9 +363,7 @@ const TasksList = ({ taskData, fetching }: TasksProps) => { return data; }; - const TaskList = ({ status }: TaskProps) => { - return ; - }; + const Counter = ({ status, fetching }: CounterProps) => { return dataByStatus(status).length || fetching ? ( @@ -374,39 +373,134 @@ const TasksList = ({ taskData, fetching }: TasksProps) => { ); }; + const { fetchUpdateTask } = useActions(); + const ChangeTaskStatus = async (status: TaskStatus, taskId: String, fetchUpdateTask: any) => { + + const res = await fetchUpdateTask({ + taskId: taskId, + status: statusName(status), + }); + + if (res.data) { + SuccessNotification("Status updated", res.data.updateTask.title); + return true; + + //move visually droppable element from one column to another + + } + if (res.error) { + ErrorNotification(); + return false; + } + + }; + + const initialStatusMap: StatusMap = { + [TaskStatus.None]: dataByStatus(TaskStatus.None), + [TaskStatus.Backlog]: dataByStatus(TaskStatus.Backlog), + [TaskStatus.ToDo]: dataByStatus(TaskStatus.ToDo), + [TaskStatus.InProgress]: dataByStatus(TaskStatus.InProgress), + [TaskStatus.Done]: dataByStatus(TaskStatus.Done), + [TaskStatus.Canceled]: dataByStatus(TaskStatus.Canceled), + }; + + type StatusMap = { + [status in TaskStatus]: Task[]; + }; + + const [columns, setColumns] = useState(initialStatusMap); + const [ordered, setOrdered] = useState(Object.keys(initialStatusMap) as TaskStatus[]); + const [lastUpdated, setLastUpdated] = useState(null); + + const onDragEnd = async (result: DropResult) => { + const { destination, source, draggableId } = result; + + // If there's no destination (e.g., item was dropped outside the list), do nothing + if (!destination) { + return; + } + + // If the item was dropped in the same place, do nothing + if ( + destination.droppableId === source.droppableId && + destination.index === source.index + ) { + return; + } + + // We update the UI + + // Create a shallow copy of the current columns + const newColumns = { ...columns }; + + // Remove the task from the source column + const sourceTasks = [...newColumns[source.droppableId as TaskStatus]]; + const [movedTask] = sourceTasks.splice(source.index, 1); + newColumns[source.droppableId as TaskStatus] = sourceTasks; + + // Add the task to the destination column + const destinationTasks = [...newColumns[destination.droppableId as TaskStatus]]; + + //update the task status visual locally + movedTask.status = destination.droppableId as TaskStatus; + + // Add the task to the destination column pt2 + destinationTasks.splice(destination.index, 0, movedTask); + newColumns[destination.droppableId as TaskStatus] = destinationTasks; + + // Update the state with the new columns + setColumns(newColumns); + setLastUpdated(new Date()); + + // Update the task's status in the backend + const newStatus = destination.droppableId as TaskStatus; + const wasSuccessful = await ChangeTaskStatus(newStatus, draggableId, fetchUpdateTask); + + // If the backend update was unsuccessful, update the UI to return to the previous position + if (!wasSuccessful) { + // Create a shallow copy of the modified columns + const revertedColumns = { ...newColumns }; + + // Remove the task from the destination column + const currentDestinationTasks = [...revertedColumns[destination.droppableId as TaskStatus]]; + currentDestinationTasks.splice(destination.index, 1); + revertedColumns[destination.droppableId as TaskStatus] = currentDestinationTasks; + + // Add the task back to the source column at its original position + const currentSourceTasks = [...revertedColumns[source.droppableId as TaskStatus]]; + + //update the task status visual locally + movedTask.status = source.droppableId as TaskStatus; + + // Add the task back to the source column at its original position pt2 + currentSourceTasks.splice(source.index, 0, movedTask); + revertedColumns[source.droppableId as TaskStatus] = currentSourceTasks; + + + // Update the state with the reverted columns + setColumns(revertedColumns); + + } else { + //we need to reload the whole column + + } + setOrdered(Object.keys(newColumns) as TaskStatus[]); + }; + return ( - { - // handlers.reorder({ from: source.index, to: destination?.index || 0 }); - }} - > - - {fetching ? : } - - - {fetching ? : } - - - {fetching ? : } - - - {fetching ? ( - - ) : ( - - )} - - - {fetching ? : } - - - {fetching ? ( - - ) : ( - - )} + + {ordered.map((key, index) => ( + + + { + fetching ? + : + + } + + ))} From e4572367a0846895231ce2ddcef181c4e5eefeb2 Mon Sep 17 00:00:00 2001 From: Anna Date: Tue, 31 Oct 2023 16:32:39 -0500 Subject: [PATCH 4/6] fix: tasks list --- src/modules/tasks/index.tsx | 284 ++++++++++++++++-------------------- 1 file changed, 127 insertions(+), 157 deletions(-) diff --git a/src/modules/tasks/index.tsx b/src/modules/tasks/index.tsx index 3edc78d..0e1c8cf 100644 --- a/src/modules/tasks/index.tsx +++ b/src/modules/tasks/index.tsx @@ -14,7 +14,6 @@ import { ActionIcon, useMantineTheme, } from "@mantine/core"; -import { useListState } from "@mantine/hooks"; import { useEffect, useState } from "react"; import { DragDropContext, Draggable, Droppable, DropResult } from "react-beautiful-dnd"; import { LayoutColumns, LayoutRows, LayoutSidebar } from "tabler-icons-react"; @@ -71,81 +70,70 @@ const useStyles = createStyles(theme => ({ })); type TaskBoardProps = { - statusData: Task[] ; + statusData: Task[]; currentStatus: TaskStatus; }; - -const DndTaskBoard = ({ statusData, currentStatus }:TaskBoardProps ) => { - - +const DndTaskBoard = ({ statusData, currentStatus }: TaskBoardProps) => { return ( - - {provided => ( -
- {statusData.map((task: Task, index: number) => ( - - {provided => ( -
- -
- )} - - ))} - {provided.placeholder} -
- )} - + + {provided => ( +
+ {statusData.map((task: Task, index: number) => ( + + {provided => ( +
+ +
+ )} + + ))} + {provided.placeholder} +
+ )} + ); }; type TaskListProps = { - statusData: Task[] ; + statusData: Task[]; currentStatus: TaskStatus; }; -const DndTaskList = ({ statusData, currentStatus }:TaskListProps) => { - - +const DndTaskList = ({ statusData, currentStatus }: TaskListProps) => { return ( - - {provided => ( -
- {statusData.map((task: Task, index: number) => ( - - {provided => ( -
- -
- )} - - ))} - {provided.placeholder} -
- )} - - + + {provided => ( +
+ {statusData.map((task: Task, index: number) => ( + + {provided => ( +
+ +
+ )} + + ))} + {provided.placeholder} +
+ )} + ); }; - type StatusCounterProps = { status: TaskStatus; taskData: Task[] | undefined; }; -type TaskProps = { - status: TaskStatus; -}; - type TasksProps = { taskData: Task[] | undefined; fetching: boolean; @@ -180,7 +168,6 @@ const TasksBoard = ({ taskData, fetching }: TasksProps) => { return data; }; - const Counter = ({ status, fetching }: CounterProps) => { return dataByStatus(status).length || fetching ? ( @@ -208,24 +195,21 @@ const TasksBoard = ({ taskData, fetching }: TasksProps) => { const { fetchUpdateTask } = useActions(); const ChangeTaskStatus = async (status: TaskStatus, taskId: String, fetchUpdateTask: any) => { + const res = await fetchUpdateTask({ + taskId: taskId, + status: statusName(status), + }); + + if (res.data) { + SuccessNotification("Status updated", res.data.updateTask.title); + return true; - const res = await fetchUpdateTask({ - taskId: taskId, - status: statusName(status), - }); - - if (res.data) { - SuccessNotification("Status updated", res.data.updateTask.title); - return true; - - //move visually droppable element from one column to another - - } - if (res.error) { - ErrorNotification(); - return false; - } - + //move visually droppable element from one column to another + } + if (res.error) { + ErrorNotification(); + return false; + } }; const initialStatusMap: StatusMap = { @@ -236,33 +220,32 @@ const TasksBoard = ({ taskData, fetching }: TasksProps) => { [TaskStatus.Done]: dataByStatus(TaskStatus.Done), [TaskStatus.Canceled]: dataByStatus(TaskStatus.Canceled), }; - + type StatusMap = { [status in TaskStatus]: Task[]; }; - + const [columns, setColumns] = useState(initialStatusMap); - const [ordered, setOrdered] = useState(Object.keys(initialStatusMap) as TaskStatus[]); + const [ordered, setOrdered] = useState( + Object.keys(initialStatusMap) as TaskStatus[] + ); const [lastUpdated, setLastUpdated] = useState(null); const onDragEnd = async (result: DropResult) => { const { destination, source, draggableId } = result; - + // If there's no destination (e.g., item was dropped outside the list), do nothing if (!destination) { return; } - + // If the item was dropped in the same place, do nothing - if ( - destination.droppableId === source.droppableId && - destination.index === source.index - ) { + if (destination.droppableId === source.droppableId && destination.index === source.index) { return; } - + // We update the UI - + // Create a shallow copy of the current columns const newColumns = { ...columns }; @@ -270,7 +253,7 @@ const TasksBoard = ({ taskData, fetching }: TasksProps) => { const sourceTasks = [...newColumns[source.droppableId as TaskStatus]]; const [movedTask] = sourceTasks.splice(source.index, 1); newColumns[source.droppableId as TaskStatus] = sourceTasks; - + // Add the task to the destination column const destinationTasks = [...newColumns[destination.droppableId as TaskStatus]]; @@ -283,15 +266,10 @@ const TasksBoard = ({ taskData, fetching }: TasksProps) => { //update the task status visual locally - - - // Update the state with the new columns setColumns(newColumns); setLastUpdated(new Date()); - - // Update the task's status in the backend const newStatus = destination.droppableId as TaskStatus; const wasSuccessful = await ChangeTaskStatus(newStatus, draggableId, fetchUpdateTask); @@ -316,13 +294,10 @@ const TasksBoard = ({ taskData, fetching }: TasksProps) => { currentSourceTasks.splice(source.index, 0, movedTask); revertedColumns[source.droppableId as TaskStatus] = currentSourceTasks; - // Update the state with the reverted columns setColumns(revertedColumns); - } else { //we need to reload the whole column - } setOrdered(Object.keys(newColumns) as TaskStatus[]); }; @@ -331,26 +306,29 @@ const TasksBoard = ({ taskData, fetching }: TasksProps) => { - {ordered.map((key, index) => ( - StatusBoardEnable(key as TaskStatus) && ( - - - - {fetching ? ( - - ) : ( - - )} - - - ) - ))} + {ordered.map( + (key, index) => + StatusBoardEnable(key as TaskStatus) && ( + + + + {fetching ? ( + + ) : ( + + )} + + + ) + )} ); +}; - +type StatusMap = { + [status in TaskStatus]: Task[]; }; const TasksList = ({ taskData, fetching }: TasksProps) => { @@ -363,8 +341,6 @@ const TasksList = ({ taskData, fetching }: TasksProps) => { return data; }; - - const Counter = ({ status, fetching }: CounterProps) => { return dataByStatus(status).length || fetching ? ( @@ -374,25 +350,23 @@ const TasksList = ({ taskData, fetching }: TasksProps) => { }; const { fetchUpdateTask } = useActions(); + const ChangeTaskStatus = async (status: TaskStatus, taskId: String, fetchUpdateTask: any) => { + const res = await fetchUpdateTask({ + taskId: taskId, + status: statusName(status), + }); - const res = await fetchUpdateTask({ - taskId: taskId, - status: statusName(status), - }); - - if (res.data) { - SuccessNotification("Status updated", res.data.updateTask.title); - return true; - - //move visually droppable element from one column to another - - } - if (res.error) { - ErrorNotification(); - return false; - } - + if (res.data) { + SuccessNotification("Status updated", res.data.updateTask.title); + return true; + + //move visually droppable element from one column to another + } + if (res.error) { + ErrorNotification(); + return false; + } }; const initialStatusMap: StatusMap = { @@ -403,33 +377,32 @@ const TasksList = ({ taskData, fetching }: TasksProps) => { [TaskStatus.Done]: dataByStatus(TaskStatus.Done), [TaskStatus.Canceled]: dataByStatus(TaskStatus.Canceled), }; - - type StatusMap = { - [status in TaskStatus]: Task[]; - }; - + + useEffect(() => { + setColumns(initialStatusMap); + }, [taskData]); + const [columns, setColumns] = useState(initialStatusMap); - const [ordered, setOrdered] = useState(Object.keys(initialStatusMap) as TaskStatus[]); + const [ordered, setOrdered] = useState( + Object.keys(initialStatusMap) as TaskStatus[] + ); const [lastUpdated, setLastUpdated] = useState(null); const onDragEnd = async (result: DropResult) => { const { destination, source, draggableId } = result; - + // If there's no destination (e.g., item was dropped outside the list), do nothing if (!destination) { return; } - + // If the item was dropped in the same place, do nothing - if ( - destination.droppableId === source.droppableId && - destination.index === source.index - ) { + if (destination.droppableId === source.droppableId && destination.index === source.index) { return; } - + // We update the UI - + // Create a shallow copy of the current columns const newColumns = { ...columns }; @@ -437,7 +410,7 @@ const TasksList = ({ taskData, fetching }: TasksProps) => { const sourceTasks = [...newColumns[source.droppableId as TaskStatus]]; const [movedTask] = sourceTasks.splice(source.index, 1); newColumns[source.droppableId as TaskStatus] = sourceTasks; - + // Add the task to the destination column const destinationTasks = [...newColumns[destination.droppableId as TaskStatus]]; @@ -476,30 +449,27 @@ const TasksList = ({ taskData, fetching }: TasksProps) => { currentSourceTasks.splice(source.index, 0, movedTask); revertedColumns[source.droppableId as TaskStatus] = currentSourceTasks; - // Update the state with the reverted columns setColumns(revertedColumns); - } else { //we need to reload the whole column - } setOrdered(Object.keys(newColumns) as TaskStatus[]); }; - + return ( {ordered.map((key, index) => ( - - - { - fetching ? - : - - } - + + + {fetching ? ( + + ) : ( + + )} + ))} @@ -560,8 +530,8 @@ export const TasksPageContent = () => { labels: labelsFilters, project: projectFilters, }; - let filtrosTotal = Object.values(filterValues).filter(value => value.length > 0); - setTotal(filtrosTotal.length); + let totalFilters = Object.values(filterValues).filter(value => value.length > 0); + setTotal(totalFilters.length); localStorage.setItem(STORAGE_KEY, JSON.stringify(filterValues)); }, [ statusFilters, From eeebccec1541d0623be83c5f3835222acd3cbfc3 Mon Sep 17 00:00:00 2001 From: Anna Date: Thu, 2 Nov 2023 14:57:09 -0500 Subject: [PATCH 5/6] refactor: turn off the autocomplete on new member form --- src/components/ui/NavBarWithSearch/index.tsx | 14 +++++++------- src/modules/settings/Members/NewMemberForm.tsx | 2 +- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/components/ui/NavBarWithSearch/index.tsx b/src/components/ui/NavBarWithSearch/index.tsx index cfa0f48..24c1c86 100644 --- a/src/components/ui/NavBarWithSearch/index.tsx +++ b/src/components/ui/NavBarWithSearch/index.tsx @@ -117,7 +117,7 @@ type NavBarWithSearchProps = { export function NavbarSearch({ onNewTask, openedNav, setOpenedNav }: NavBarWithSearchProps) { const { classes } = useStyles(); - const [section, setSection] = useState<"teams" | "projects">("teams"); + const [section, setSection] = useState<"teams" | "projects">("projects"); const [newProjectOpened, setNewProjectOpened] = useState(false); const [newTeamOpened, setNewTeamOpened] = useState(false); @@ -182,24 +182,24 @@ export function NavbarSearch({ onNewTask, openedNav, setOpenedNav }: NavBarWithS { label: (
- + - Teams + Projects
), - value: "teams", + value: "projects", }, { label: (
- + - Projects + Teams
), - value: "projects", + value: "teams", }, ]} /> diff --git a/src/modules/settings/Members/NewMemberForm.tsx b/src/modules/settings/Members/NewMemberForm.tsx index 67b4146..65267d3 100644 --- a/src/modules/settings/Members/NewMemberForm.tsx +++ b/src/modules/settings/Members/NewMemberForm.tsx @@ -37,7 +37,7 @@ export const NewMemberModal = ({ opened, close }: { opened: boolean; close: () = return ( -
+ Date: Thu, 2 Nov 2023 15:55:42 -0500 Subject: [PATCH 6/6] fix: tasks board --- src/modules/tasks/index.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/modules/tasks/index.tsx b/src/modules/tasks/index.tsx index 0e1c8cf..8909080 100644 --- a/src/modules/tasks/index.tsx +++ b/src/modules/tasks/index.tsx @@ -221,6 +221,10 @@ const TasksBoard = ({ taskData, fetching }: TasksProps) => { [TaskStatus.Canceled]: dataByStatus(TaskStatus.Canceled), }; + useEffect(() => { + setColumns(initialStatusMap); + }, [taskData]); + type StatusMap = { [status in TaskStatus]: Task[]; };