fix: Multiple API calls in progress update modal (#1364)

* fix: added debounce util function & unit test

* fix: trigger update onChange event

* fix: added test cases

* fix: addressed not comments

* fix: failing test

* fix: failing test

* fix: removed unnecessary dependency from the callback

* fix: failing test

* fix: bug in non-dev

* chore: refactored

* chore: refactored more blocks

* chore: add todo comments

---------

Co-authored-by: Amit Prakash <[email protected]>

Author: shubhdevelop

__tests__/Unit/Components/Tasks/ProgressContainer.test.tsx

@@ -319,4 +319,70 @@ describe('ProgressContainer', () => {
             ).not.toBeInTheDocument();
         });
     });
+
+    test('should debounce and make only one fetch call in dev mode', async () => {
+        const fetchSpy = jest.spyOn(window, 'fetch');
+        server.use(superUserSelfHandler);
+        renderWithRouter(
+            <Provider store={store()}>
+                <ProgressContainer content={CONTENT[0]} />
+            </Provider>,
+            {
+                query: { dev: 'true' },
+            }
+        );
+
+        const updateButton = await screen.findByTestId(
+            'progress-update-text-dev'
+        );
+        expect(updateButton).toBeInTheDocument();
+
+        fireEvent.click(updateButton);
+        const sliderInput = screen.getByRole('slider');
+
+        for (let i = 0; i < 3; i++) {
+            fireEvent.change(sliderInput, { target: { value: 50 + i * 10 } });
+        }
+
+        await waitFor(() => {
+            expect(fetchSpy).toBeCalledTimes(1);
+        });
+
+        fetchSpy.mockRestore();
+    });
+
+    //TODO: Remove this test case while removing feature flag (ISSUE: #1366)
+    test('should not debounce and make multiple fetch calls in non-dev mode', async () => {
+        const fetchSpy = jest.spyOn(window, 'fetch');
+        server.use(superUserSelfHandler);
+        renderWithRouter(
+            <Provider store={store()}>
+                <ProgressContainer content={CONTENT[0]} />
+                <ToastContainer />
+            </Provider>
+        );
+
+        const updateButton = await screen.findByTestId(
+            'progress-update-text-dev'
+        );
+        expect(updateButton).toBeInTheDocument();
+
+        fireEvent.click(updateButton);
+        const sliderInput = screen.getByRole('slider');
+
+        for (let i = 0; i < 3; i++) {
+            fireEvent.change(sliderInput, { target: { value: 50 + i * 10 } });
+            fireEvent.mouseUp(sliderInput);
+        }
+
+        await waitFor(
+            () => {
+                expect(fetchSpy).toBeCalledTimes(3);
+            },
+            {
+                timeout: 1050,
+            }
+        );
+        fetchSpy.mockRestore();
+    });
 });

__tests__/Utils/debounce.test.ts

@@ -0,0 +1,69 @@
+import { debounce } from '@/utils/common';
+
+describe('debounce', () => {
+    beforeEach(() => {
+        jest.useFakeTimers();
+    });
+
+    afterEach(() => {
+        jest.useRealTimers();
+    });
+
+    test('should call the callback after the specified delay', () => {
+        const mockCallback = jest.fn();
+        const debouncedFn = debounce(mockCallback, 1000);
+
+        debouncedFn('test');
+
+        expect(mockCallback).not.toHaveBeenCalled();
+
+        jest.advanceTimersByTime(1000);
+
+        expect(mockCallback).toHaveBeenCalledTimes(1);
+        expect(mockCallback).toHaveBeenCalledWith('test');
+    });
+
+    test('should reset the timer when called multiple times', () => {
+        const mockCallback = jest.fn();
+        const debouncedFn = debounce(mockCallback, 1000);
+
+        debouncedFn('first');
+        jest.advanceTimersByTime(500);
+
+        debouncedFn('second');
+        jest.advanceTimersByTime(500);
+
+        expect(mockCallback).not.toHaveBeenCalled();
+
+        jest.advanceTimersByTime(500);
+
+        expect(mockCallback).toHaveBeenCalledTimes(1);
+        expect(mockCallback).toHaveBeenCalledWith('second');
+    });
+
+    test('should pass multiple arguments correctly', () => {
+        const mockCallback = jest.fn();
+        const debouncedFn = debounce(mockCallback, 1000);
+
+        debouncedFn('arg1', 'arg2', 123);
+
+        jest.advanceTimersByTime(1000);
+
+        expect(mockCallback).toHaveBeenCalledWith('arg1', 'arg2', 123);
+    });
+
+    test('should handle multiple rapid calls and only execute the last one', () => {
+        const mockCallback = jest.fn();
+        const debouncedFn = debounce(mockCallback, 1000);
+
+        debouncedFn('call1');
+        debouncedFn('call2');
+        debouncedFn('call3');
+        debouncedFn('call4');
+
+        jest.advanceTimersByTime(1000);
+
+        expect(mockCallback).toHaveBeenCalledTimes(1);
+        expect(mockCallback).toHaveBeenCalledWith('call4');
+    });
+});

src/components/tasks/card/progressContainer/ProgressSlider.tsx

@@ -2,31 +2,55 @@ import { FC } from 'react';
 
 import { ProgressSliderProps } from '@/interfaces/task.type';
 import styles from '@/components/tasks/card/card.module.scss';
+import { useRouter } from 'next/router';
 
 const ProgressSlider: FC<ProgressSliderProps> = ({
     value,
     debounceSlider,
     handleProgressChange,
     isLoading,
 }) => {
+    const router = useRouter();
+    const isDev = router.query.dev === 'true';
     return (
-        <input
-            className={styles.slider}
-            type="range"
-            value={value}
-            min="0"
-            max="100"
-            step="10"
-            onChange={(e) => handleProgressChange(e)}
-            onTouchEnd={() => debounceSlider(1000)}
-            onMouseUp={() => debounceSlider(1000)}
-            disabled={isLoading}
-            style={
-                {
-                    '--progress': `${value}%`,
-                } as React.CSSProperties
-            }
-        />
+        <>
+            {isDev ? (
+                <input
+                    className={styles.slider}
+                    type="range"
+                    value={value}
+                    min="0"
+                    max="100"
+                    step="10"
+                    onChange={(e) => handleProgressChange(e)}
+                    disabled={isLoading}
+                    style={
+                        {
+                            '--progress': `${value}%`,
+                        } as React.CSSProperties
+                    }
+                />
+            ) : (
+                //TODO: Remove this block while removing feature flag (ISSUE: #1366)
+                <input
+                    className={styles.slider}
+                    type="range"
+                    value={value}
+                    min="0"
+                    max="100"
+                    step="10"
+                    onChange={(e) => handleProgressChange(e)}
+                    onTouchEnd={() => debounceSlider(1000)}
+                    onMouseUp={() => debounceSlider(1000)}
+                    disabled={isLoading}
+                    style={
+                        {
+                            '--progress': `${value}%`,
+                        } as React.CSSProperties
+                    }
+                />
+            )}
+        </>
     );
 };
 

src/components/tasks/card/progressContainer/index.tsx

@@ -1,4 +1,4 @@
-import { FC, useState } from 'react';
+import { FC, useCallback, useState } from 'react';
 import { useRouter } from 'next/router';
 import { toast, ToastTypes } from '@/helperFunctions/toast';
 import {
@@ -13,11 +13,14 @@ import { CompletionModal } from '@/components/Modal/CompletionModal';
 import { ERROR_MESSAGE, PROGRESS_SUCCESSFUL } from '@/constants/constants';
 import styles from '@/components/tasks/card/card.module.scss';
 import { ProgressContainerProps } from '@/interfaces/task.type';
+import { debounce } from '@/utils/common';
 
 const ProgressContainer: FC<ProgressContainerProps> = ({
     content,
     readOnly = false,
 }) => {
+    const DEBOUNCE_DELAY = 1000;
+
     const router = useRouter();
     const { dev } = router.query;
     const isDev = dev === 'true';
@@ -77,10 +80,20 @@ const ProgressContainer: FC<ProgressContainerProps> = ({
         }, 1000);
     };
 
+    const debouncedUpdate = useCallback(
+        debounce((id: string, value: number) => {
+            handleSliderChangeComplete(id, value);
+        }, DEBOUNCE_DELAY),
+        [isUserAuthorized]
+    );
+
     const handleProgressChange = (
         event: React.ChangeEvent<HTMLInputElement>
     ) => {
         setProgressValue(Number(event.target.value));
+        if (isDev) {
+            debouncedUpdate(content.id, Number(event.target.value));
+        }
     };
 
     const handleProgressUpdate = () => {

src/utils/common.ts

@@ -12,3 +12,11 @@ export const readMoreFormatter = (
 
     return stringToFormat;
 };
+
+export function debounce(cb: (...args: any[]) => any, delayMs: number) {
+    let timerId: ReturnType<typeof setTimeout>;
+    return function (...args: any[]) {
+        clearTimeout(timerId);
+        timerId = setTimeout(() => cb(...args), delayMs);
+    };
+}