1.  
2. import React, { useEffect, useState } from 'react';
3. import store from './Store'
4. const Todo = ({ todo, lp }) => {
5.     const [timer, setTimer] = useState('')
6.     useEffect(() => {
7.         if (todo.status === 'Done') {
8.             clearInterval(timer)
9.         }
10.         else if (todo.minutes <= 0 && todo.seconds <= 0 && todo.status === 'Todo') {
11.  
12.             clearInterval(timer)
13.  
14.             store.dispatch({ type: "SET_TODO_EXPIRED", payload: { id: todo.id } })
15.         }
16.         else if (!todo.started && todo.status === "Todo") {
17.  
18.             setTimer(setInterval(() => {
19.  
20.                 store.dispatch({ type: "CLOCK_TICKING", payload: { id: todo.id } })
21.  
22.  
23.             }, 1000))
24.         }
25.     }, [todo])
26.     const handleDone = () => {
27.         console.log(todo);
28.  
29.         if (todo.status === 'Todo') {
30.             store.dispatch({ type: 'CHANGE_TODO_STATUS', payload: { status: "Done", id: todo.id } })
31.         }
32.         else {
33.             store.dispatch({ type: 'CHANGE_TODO_STATUS', payload: { status: "Todo", id: todo.id } })
34.         }
35.  
36.     }
37.  
38.  
39.     const setStyle = () => {
40.         let col;
41.         if (todo.status === 'Done') {
42.             col = 'green'
43.         }
44.         else if (todo.status === 'Expired') {
45.             col = 'yellow'
46.         }
47.         return {
48.             backgroundColor: col
49.         }
50.  
51.     }
52.     const message = () => {
53.         let mes;
54.         if (todo.status === 'Done') {
55.             mes = 'Task Done'
56.         }
57.         else if (todo.status === 'Expired') {
58.             mes = 'Task Expired'
59.         }
60.         else {
61.             mes = 'Task in progress'
62.         }
63.         return mes
64.     }
65.     const displayedMinutes = todo.minutes >= 10 ? todo.minutes : `0${todo.minutes}`
66.     const displayedSeconds = todo.seconds >= 10 ? todo.seconds : `0${todo.seconds}`
67.     return (
68.         <div className='todo' style={setStyle()}>
69.             <p>{lp}.</p>
70.             <p>{todo.description}</p>
71.             {todo.status === 'Todo' && <p>{displayedMinutes} : {displayedSeconds} </p>}
72.             {todo.status !== 'Expired' && <button onClick={handleDone}>{todo.status !== 'Done' ? 'done' : 'undo'}</button>}
73.             <p>{message()}</p>
74.         </div>
75.     );
76. }
77.  
78. export default Todo;