fixed(#1355): Task Status randomly not saving updated value

apps/web/app/utils/index.ts

@@ -1,3 +1,5 @@
 export * from './clsxm';
 export * from './is-valid-url';
 export * from './scroll-to-element';
+export * from './queue';
+export * from './wait';

apps/web/app/utils/queue.ts

@@ -0,0 +1,35 @@
+import { wait } from './wait';
+
+export class Queue {
+	private running = false;
+	private queues: (() => void)[] = [];
+
+	constructor(private poolSize = 1) {}
+
+	private _task(func: (...params: any) => void, ...params: any[]) {
+		return () => func(...params);
+	}
+
+	public task<F extends any[], T extends (...params: F) => void>(
+		func: T,
+		...params: F
+	) {
+		this.queues.push(this._task(func, ...params));
+
+		if (this.running === false) {
+			this.running = true;
+			wait(0.1).then(() => this.work());
+		}
+	}
+
+	private async work() {
+		const tasks = this.queues.splice(0, this.poolSize);
+		if (tasks.length === 0) {
+			this.running = false;
+			return;
+		}
+
+		await Promise.allSettled(tasks.map((fn) => fn()));
+		this.work();
+	}
+}

apps/web/app/utils/wait.ts

@@ -0,0 +1,3 @@
+export function wait(sec = 1) {
+	return new Promise((resolve) => setTimeout(resolve, sec * 1000));
+}

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

@@ -1,9 +1,9 @@
-import { useModal, useTaskLabels, useTeamTasks } from '@app/hooks';
+import { useModal, useSyncRef, useTaskLabels, useTeamTasks } from '@app/hooks';
 import { ITeamTask, Nullable } from '@app/interfaces';
 import { Button, Card, Modal } from 'lib/components';
 import { PlusIcon } from 'lib/components/svgs';
 import { TaskLabelForm } from 'lib/settings';
-import { TaskLabelsDropdown } from './task-status';
+import { TaskLabelsDropdown, taskUpdateQueue } from './task-status';
 import { debounce, isEqual } from 'lodash';
 import { useCallback, useRef } from 'react';
 
@@ -21,33 +21,36 @@ export function TaskLabels({
 	taskStatusClassName,
 	onValueChange
 }: Props) {
+	const $task = useSyncRef(task);
 	const { updateTask } = useTeamTasks();
 	const { taskLabels } = useTaskLabels();
 	const modal = useModal();
 	const latestLabels = useRef<string[]>([]);
 
 	const onValuesChange = useCallback(
-		(_: any, values: string[] | undefined) => {
-			const debounceOnValuesChange = debounce(
-				(_: any, values: string[] | undefined) => {
-					if (!task) return;
+		debounce((_: any, values: string[] | undefined) => {
+			if (!$task.current) return;
 
-					if (!isEqual(latestLabels.current, values)) {
-						return;
-					}
+			if (!isEqual(latestLabels.current, values)) {
+				return;
+			}
 
-					updateTask({
-						...task,
+			taskUpdateQueue.task(
+				(task, taskLabels, values) => {
+					return updateTask({
+						// eslint-disable-next-line  @typescript-eslint/no-non-null-assertion
+						...task.current!,
 						tags: taskLabels.filter((tag) =>
 							tag.name ? values?.includes(tag.name) : false
 						) as any
 					});
 				},
-				2000
+				$task,
+				taskLabels,
+				values
 			);
-			debounceOnValuesChange(_, values);
-		},
-		[task, taskLabels, updateTask, latestLabels]
+		}, 2000),
+		[$task, taskLabels, updateTask, latestLabels]
 	);
 
 	const tags = (task?.tags as typeof taskLabels | undefined)?.map(

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

@@ -8,7 +8,7 @@ import {
 	Nullable,
 	Tag
 } from '@app/interfaces';
-import { clsxm } from '@app/utils';
+import { Queue, clsxm } from '@app/utils';
 import { Listbox, Transition } from '@headlessui/react';
 import { Card, Tooltip } from 'lib/components';
 import { ChevronDownIcon } from '@heroicons/react/20/solid';
@@ -129,6 +129,8 @@ export function useMapToTaskStatusValues<T extends ITaskStatusItemList>(
 	}, [data, bordered]);
 }
 
+export const taskUpdateQueue = new Queue(1);
+
 export function useActiveTaskStatus<T extends ITaskStatusField>(
 	props: IActiveTaskStatuses<T>,
 	status: TStatus<ITaskStatusStack[T]>,
@@ -138,6 +140,7 @@ export function useActiveTaskStatus<T extends ITaskStatusField>(
 	const { taskLabels } = useTaskLabels();
 
 	const task = props.task !== undefined ? props.task : activeTeamTask;
+	const $task = useSyncRef(task);
 
 	/**
 	 * "When the user changes the status of a task, update the status of the task and then call the
@@ -160,11 +163,16 @@ export function useActiveTaskStatus<T extends ITaskStatusField>(
 			status = [currentTag];
 		}
 
-		handleStatusUpdate(status, updatedField || field, task, true).finally(
-			() => {
+		taskUpdateQueue.task((task) => {
+			return handleStatusUpdate(
+				status,
+				updatedField || field,
+				task.current,
+				true
+			).finally(() => {
 				props.onChangeLoading && props.onChangeLoading(false);
-			}
-		);
+			});
+		}, $task);
 	}
 
 	const { item, items, onChange } = useStatusValue<T>({