refactor: the timer should not start when the user ignores the 'Today…

… plan' popup
ever-co · Oct 17, 2024 · 7ca6a45 · 7ca6a45
1 parent e703750
commit 7ca6a45
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 18 deletions.
diff --git a/apps/web/lib/features/daily-plan/add-daily-plan-work-hours-modal.tsx b/apps/web/lib/features/daily-plan/add-daily-plan-work-hours-modal.tsx
@@ -1,4 +1,4 @@
-import { Card, InputField, Modal, Text } from 'lib/components';
+import { Card, InputField, Modal, SpinnerLoader, Text } from 'lib/components';
 import { Button } from '@components/ui/button';
 import { useCallback, useMemo, useState } from 'react';
 import { DAILY_PLAN_ESTIMATE_HOURS_MODAL_DATE } from '@app/constants';
@@ -19,22 +19,35 @@ export function AddDailyPlanWorkHourModal(props: IAddDailyPlanWorkHoursModalProp
 	const { updateDailyPlan } = useDailyPlan();
 	const { startTimer } = useTimerView();
 	const { activeTeam } = useTeamTasks();
-
 	const [workTimePlanned, setworkTimePlanned] = useState<number | undefined>(plan.workTimePlanned);
 	const currentDate = useMemo(() => new Date().toISOString().split('T')[0], []);
 	const requirePlan = useMemo(() => activeTeam?.requirePlanToTrack, [activeTeam?.requirePlanToTrack]);
 	const hasWorkHours = useMemo(() => plan.workTimePlanned && plan.workTimePlanned > 0, [plan.workTimePlanned]);
+	const [loading, setLoading] = useState(false);
 
 	const handleCloseModal = useCallback(() => {
 		localStorage.setItem(DAILY_PLAN_ESTIMATE_HOURS_MODAL_DATE, currentDate);
 		closeModal();
-		startTimer();
-	}, [closeModal, currentDate, startTimer]);
+	}, [closeModal, currentDate]);
+
+	const handleSubmit = useCallback(async () => {
+		try {
+			setLoading(true);
+
+			// Update the plan work time only if the user changed it
+			plan &&
+				plan.workTimePlanned !== workTimePlanned &&
+				(await updateDailyPlan({ workTimePlanned }, plan.id ?? ''));
+
+			startTimer();
 
-	const handleSubmit = useCallback(() => {
-		updateDailyPlan({ workTimePlanned }, plan.id ?? '');
-		handleCloseModal();
-	}, [handleCloseModal, plan.id, updateDailyPlan, workTimePlanned]);
+			handleCloseModal();
+		} catch (error) {
+			console.log(error);
+		} finally {
+			setLoading(false);
+		}
+	}, [handleCloseModal, plan, startTimer, updateDailyPlan, workTimePlanned]);
 
 	return (
 		<Modal isOpen={isOpen} closeModal={handleCloseModal} showCloseIcon={requirePlan ? false : true}>
@@ -66,7 +79,7 @@ export function AddDailyPlanWorkHourModal(props: IAddDailyPlanWorkHoursModalProp
 						<Button
 							variant="outline"
 							type="submit"
-							className="py-3 px-5 rounded-md font-light text-md dark:text-white dark:bg-slate-700 dark:border-slate-600"
+							className="py-3 px-5 min-w-[10rem] rounded-md font-light text-md dark:text-white dark:bg-slate-700 dark:border-slate-600"
 							onClick={handleCloseModal}
 						>
 							{t('common.SKIP_ADD_LATER')}
@@ -75,10 +88,14 @@ export function AddDailyPlanWorkHourModal(props: IAddDailyPlanWorkHoursModalProp
 							variant="default"
 							type="submit"
 							disabled={requirePlan ? (hasWorkHours ? false : true) : false}
-							className="py-3 px-5 rounded-md font-light text-md dark:text-white"
+							className="py-3 px-5 min-w-[10rem] rounded-md font-light text-md dark:text-white"
 							onClick={handleSubmit}
 						>
-							{t('timer.todayPlanSettings.START_WORKING_BUTTON')}
+							{loading ? (
+								<SpinnerLoader variant="light" size={20} />
+							) : (
+								t('timer.todayPlanSettings.START_WORKING_BUTTON')
+							)}
 						</Button>
 					</div>
 				</div>

diff --git a/apps/web/lib/features/daily-plan/add-task-estimation-hours-modal.tsx b/apps/web/lib/features/daily-plan/add-task-estimation-hours-modal.tsx
@@ -108,12 +108,24 @@ export function AddTasksEstimationHoursModal(props: IAddTasksEstimationHoursModa
 	/**
 	 * The function that close the Planned tasks modal when the user ignores the modal (Today's plan)
 	 */
-	const closeModalAndStartTimer = useCallback(() => {
-		handleCloseModal();
-		if (canStartWorking) {
-			startTimer();
+	const closeModalAndSubmit = useCallback(async () => {
+		try {
+			setLoading(true);
+
+			// Update the plan work time only if the user changed it
+			plan &&
+				plan.workTimePlanned !== workTimePlanned &&
+				(await updateDailyPlan({ workTimePlanned }, plan.id ?? ''));
+
+			setPlanEditState({ draft: false, saved: true });
+
+			handleCloseModal();
+		} catch (error) {
+			console.log(error);
+		} finally {
+			setLoading(false);
 		}
-	}, [canStartWorking, handleCloseModal, startTimer]);
+	}, [handleCloseModal, plan, updateDailyPlan, workTimePlanned]);
 
 	/**
 	 * The function that opens the Change task modal if conditions are met (or start the timer)
@@ -466,7 +478,7 @@ export function AddTasksEstimationHoursModal(props: IAddTasksEstimationHoursModa
 								variant="outline"
 								type="submit"
 								className="py-3 px-5 w-40 rounded-md font-light text-md dark:text-white dark:bg-slate-700 dark:border-slate-600"
-								onClick={isRenderedInSoftFlow ? closeModalAndStartTimer : handleCloseModal}
+								onClick={isRenderedInSoftFlow ? closeModalAndSubmit : handleCloseModal}
 							>
 								{isRenderedInSoftFlow ? t('common.SKIP_ADD_LATER') : t('common.CANCEL')}
 							</Button>
@@ -489,7 +501,7 @@ export function AddTasksEstimationHoursModal(props: IAddTasksEstimationHoursModa
 	return (
 		<>
 			{isRenderedInSoftFlow ? (
-				<Modal isOpen={isOpen} closeModal={closeModalAndStartTimer} showCloseIcon={requirePlan ? false : true}>
+				<Modal isOpen={isOpen} closeModal={closeModalAndSubmit} showCloseIcon={requirePlan ? false : true}>
 					<Card className="w-[36rem]" shadow="custom">
 						{content}
 					</Card>