Fix sync task status kanban (#2630)

* feat: kanban sync task status on board change

* feat: kanban sync task status on start timer

* fix: missing use timer deps list taskStatus

* fix: update task missing statusId param

* fix: typos variable names

apps/web/app/hooks/features/useTeamTasks.ts

@@ -345,6 +345,7 @@ export function useTeamTasks() {
 		<T extends ITaskStatusField>(
 			status: ITaskStatusStack[T],
 			field: T,
+			taskStatusId: ITeamTask['taskStatusId'],
 			task?: ITeamTask | null,
 			loader?: boolean
 		) => {
@@ -367,6 +368,7 @@ export function useTeamTasks() {
 
 				return updateTask({
 					...task,
+					taskStatusId: taskStatusId ?? task.taskStatusId,
 					[field]: status
 				}).then((res) => {
 					setTasksFetching(false);

apps/web/app/hooks/features/useTimer.ts

@@ -31,6 +31,7 @@ import { useOrganizationEmployeeTeams } from './useOrganizatioTeamsEmployee';
 import { useAuthenticateUser } from './useAuthenticateUser';
 import moment from 'moment';
 import { usePathname } from 'next/navigation';
+import { useTaskStatus } from './useTaskStatus';
 
 const LOCAL_TIMER_STORAGE_KEY = 'local-timer-ever-team';
 
@@ -154,6 +155,7 @@ function useLocalTimeCounter(timerStatus: ITimerStatus | null, activeTeamTask: I
 export function useTimer() {
 	const pathname = usePathname();
 	const { updateTask, setActiveTask, detailedTask, activeTeamId, activeTeam, activeTeamTask } = useTeamTasks();
+	const { taskStatus } = useTaskStatus();
 	const { updateOrganizationTeamEmployeeActiveTask } = useOrganizationEmployeeTeams();
 	const { user, $user } = useAuthenticateUser();
 
@@ -267,8 +269,11 @@ export function useTimer() {
 		 *  Updating the task status to "In Progress" when the timer is started.
 		 */
 		if (activeTeamTaskRef.current && activeTeamTaskRef.current.status !== 'in-progress') {
+			const selectedStatus = taskStatus.find((s) => s.name === 'in-progress' && s.value === 'in-progress');
+			const taskStatusId = selectedStatus?.id;
 			updateTask({
 				...activeTeamTaskRef.current,
+				taskStatusId: taskStatusId ?? activeTeamTaskRef.current.taskStatusId,
 				status: 'in-progress'
 			});
 		}
@@ -302,6 +307,7 @@ export function useTimer() {
 		activeTeamTaskRef,
 		timerStatus,
 		setTimerStatus,
+		taskStatus,
 		updateTask,
 		activeTeam?.members,
 		activeTeam?.id,

apps/web/components/pages/task/details-section/blocks/task-secondary-info.tsx

@@ -50,7 +50,7 @@ const TaskSecondaryInfo = () => {
 
 	const onVersionCreated = useCallback(
 		(version: ITaskVersionCreate) => {
-			handleStatusUpdate(version.value || version.name, 'version', task);
+			handleStatusUpdate(version.value || version.name, 'version', task?.taskStatusId, task);
 		},
 		[$taskVersion, task, handleStatusUpdate]
 	);

apps/web/components/shared/tasks/status-dropdown.tsx

@@ -35,6 +35,7 @@ export function RawStatusDropdown({ task }: { task: ITeamTask | null }) {
 			if (task && status !== task.status) {
 				updateTask({
 					...task,
+					taskStatusId: task.taskStatusId,
 					status: status
 				});
 			}

apps/web/lib/features/task/task-item.tsx

@@ -26,7 +26,7 @@ export function TaskItem({ task, selected, onClick, className }: Props) {
 
 	const handleChange = useCallback(
 		(status: ITaskStatus) => {
-			handleStatusUpdate(status, 'status', task);
+			handleStatusUpdate(status, 'status', task?.taskStatusId, task);
 		},
 		[task, handleStatusUpdate]
 	);

apps/web/lib/features/task/task-status.tsx

@@ -87,6 +87,7 @@ export function useMapToTaskStatusValues<T extends ITaskStatusItemList>(data: T[
 	return useMemo(() => {
 		return data.reduce((acc, item) => {
 			const value: TStatus<any>[string] = {
+				id: item.id,
 				name: item.name?.split('-').join(' '),
 				realName: item.name?.split('-').join(' '),
 				value: item.value || item.name,
@@ -120,6 +121,7 @@ export function useActiveTaskStatus<T extends ITaskStatusField>(
 ) {
 	const { activeTeamTask, handleStatusUpdate } = useTeamTasks();
 	const { taskLabels } = useTaskLabels();
+	const { taskStatus } = useTaskStatus();
 
 	const task = props.task !== undefined ? props.task : activeTeamTask;
 	const $task = useSyncRef(task);
@@ -136,15 +138,23 @@ export function useActiveTaskStatus<T extends ITaskStatusField>(
 	 */
 	function onItemChange(status: ITaskStatusStack[T]) {
 		props.onChangeLoading && props.onChangeLoading(true);
+
 		let updatedField: ITaskStatusField = field;
+		let taskStatusId: string | undefined;
+
 		if (field === 'label' && task) {
 			const currentTag = taskLabels.find((label) => label.name === status) as Tag;
 			updatedField = 'tags';
 			status = [currentTag];
 		}
 
+		if (field === 'status') {
+			const selectedStatus = taskStatus.find((s) => s.name === status && s.value === status);
+			taskStatusId = selectedStatus?.id;
+		}
+
 		taskUpdateQueue.task((task) => {
-			return handleStatusUpdate(status, updatedField || field, task.current, true).finally(() => {
+			return handleStatusUpdate(status, updatedField || field, taskStatusId, task.current, true).finally(() => {
 				props.onChangeLoading && props.onChangeLoading(false);
 			});
 		}, $task);
@@ -1023,7 +1033,7 @@ export function StatusDropdown<T extends TStatusItem>({
 											className="p-4 md:p-4 shadow-xlcard dark:shadow-lgcard-white dark:bg-[#1B1D22] dark:border dark:border-[#FFFFFF33] flex flex-col gap-2.5"
 										>
 											{items.map((item, i) => {
-												const item_value = item.value || item.name;
+												const item_value = item?.value || item?.name;
 
 												return (
 													<Listbox.Option
@@ -1037,7 +1047,7 @@ export function StatusDropdown<T extends TStatusItem>({
 																showIcon={showIcon}
 																{...item}
 																cheched={
-																	item.value ? values.includes(item.value) : false
+																	item?.value ? values.includes(item?.value) : false
 																}
 																className={clsxm(
 																	issueType === 'issue' && [