feat: adds the functionality to stop the countdown

src/components/Countdown/index.tsx

@@ -18,9 +18,16 @@ function CountdownComponent() {
   const secondesToDisplayed = String(secondsRemaining).padStart(2, '0');
 
   useEffect(() => {
-    function changeTime() {
-      if (!currentTask) return;
+    const shouldRemainingTimeBeReset = !currentTask && remainingTime;
+    if (shouldRemainingTimeBeReset) {
+      setRemainingTime(0);
 
+      return;
+    }
+
+    if (!currentTask) return;
+
+    const timeout = setTimeout(() => {
       const currentDate = new Date();
       const distanceBetweenDates =
         currentDate.getTime() - currentTask?.createdAt.getTime();
@@ -34,23 +41,15 @@ function CountdownComponent() {
       const secondsRemaining =
         desiredTimeConvertedToSeconds - distanceConvertedToSeconds;
 
-      if (secondsRemaining <= 0) {
-        setRemainingTime(0);
-
-        return;
-      }
+      if (secondsRemaining <= 0) return;
 
       setRemainingTime(secondsRemaining);
-
-      return setTimeout(changeTime, 1000);
-    }
-
-    const timeout = changeTime();
+    }, 1000);
 
     return () => {
       clearTimeout(timeout);
     };
-  }, [currentTask]);
+  }, [currentTask, remainingTime, setRemainingTime]);
 
   return (
     <S.Container>

src/contexts/Form/Provider.tsx

@@ -9,7 +9,7 @@ import { FormContext } from './';
 import { FormSchema, FormType, FormProviderProps } from './types';
 
 export function FormProvider({ children }: FormProviderProps) {
-  const { register, handleSubmit, setValue, watch } = useForm<FormType>({
+  const { register, handleSubmit, setValue, watch, reset } = useForm<FormType>({
     resolver: zodResolver(FormSchema),
     defaultValues: {
       desiredTime: 0,
@@ -89,6 +89,8 @@ export function FormProvider({ children }: FormProviderProps) {
       desiredTime: data.desiredTime,
       createdAt: new Date(),
     });
+
+    reset();
   }
 
   return (

src/contexts/Tasks/Provider.tsx

@@ -7,9 +7,28 @@ import { TasksProviderProps } from './types';
 
 export function TasksProvider({ children }: TasksProviderProps) {
   const [currentTask, setCurrentTask] = useState<TaskType | null>(null);
+  const [tasks, setTasks] = useState<TaskType[]>([]);
+
+  function interruptTask() {
+    if (!currentTask) return;
+
+    setTasks((prevState) => {
+      return [
+        ...prevState,
+        {
+          ...currentTask,
+          interruptedAt: new Date(),
+        },
+      ];
+    });
+
+    setCurrentTask(null);
+  }
 
   return (
-    <TasksContext.Provider value={{ currentTask, setCurrentTask }}>
+    <TasksContext.Provider
+      value={{ currentTask, setCurrentTask, interruptTask, tasks }}
+    >
       {children}
     </TasksContext.Provider>
   );

src/contexts/Tasks/types.ts

@@ -9,6 +9,8 @@ interface TasksProviderProps {
 interface TasksContextType {
   currentTask: TaskType | null;
   setCurrentTask: Dispatch<SetStateAction<TaskType | null>>;
+  interruptTask: () => void;
+  tasks: TaskType[];
 }
 
 export type { TasksProviderProps, TasksContextType };

src/pages/Home/index.tsx

@@ -4,6 +4,7 @@ import { Minus, Plus } from '@phosphor-icons/react';
 import { Countdown } from '@/components/Countdown';
 import { StartStopButton } from '@/components/StartStopButton';
 import { useFormContext } from '@/contexts/Form';
+import { useTasksContext } from '@/contexts/Tasks';
 import { TASK } from '@/utils/task';
 
 import * as S from './styles';
@@ -18,6 +19,8 @@ export function Home() {
     handleSubmit,
   } = useFormContext();
 
+  const { currentTask, interruptTask } = useTasksContext();
+
   return (
     <S.Container>
       <S.Form onSubmit={handleSubmit(onSubmit)}>
@@ -66,7 +69,8 @@ export function Home() {
 
         <StartStopButton
           disabled={!isAvailableStartCountdown}
-          isStartButton={true}
+          isStartButton={!currentTask}
+          onClick={interruptTask}
         />
       </S.Form>
     </S.Container>