DOAN TRAN NAM - FE

babel.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+    presets: [
+      ['@babel/preset-env', {targets: {node: 'current'}}],
+      '@babel/preset-typescript',
+    ],
+  };

package.json

@@ -39,6 +39,7 @@
     ]
   },
   "devDependencies": {
+    "@babel/preset-typescript": "^7.16.7",
     "@types/shortid": "^0.0.29"
   }
 }

src/App.css

@@ -122,4 +122,8 @@ input:focus {
 }
 
 .Action__btn {
+}
+.Todo__done {
+  text-decoration: line-through;
+  pointer-events: none;
 }

src/ToDoPage.tsx

@@ -1,107 +1,134 @@
-import React, {useEffect, useReducer, useRef, useState} from 'react';
+import React, { useEffect, useReducer, useRef, useState } from "react";
 
-import reducer, {initialState} from './store/reducer';
+import reducer, { initialState } from "./store/reducer";
 import {
-    setTodos,
-    createTodo,
-    toggleAllTodos,
-    deleteAllTodos,
-    updateTodoStatus
-} from './store/actions';
-import Service from './service';
-import {TodoStatus} from './models/todo';
-
-type EnhanceTodoStatus = TodoStatus | 'ALL';
+  setTodos,
+  createTodo,
+  toggleAllTodos,
+  deleteAllTodos,
+  updateTodoStatus,
+  deleteTodo,
+  updateTodo,
+  todoActive,
+  todoComplete,
+} from "./store/actions";
+import Service from "./service";
+import { TodoStatus } from "./models/todo";
 
 
 const ToDoPage = () => {
-    const [{todos}, dispatch] = useReducer(reducer, initialState);
-    const [showing, setShowing] = useState<EnhanceTodoStatus>('ALL');
-    const inputRef = useRef<any>(null);
+  const [{ todos }, dispatch] = useReducer(reducer, initialState);
+  const inputRef = useRef<any>(null);
 
-    useEffect(()=>{
-        (async ()=>{
-            const resp = await Service.getTodos();
+  useEffect(() => {
+    (async () => {
+      const resp = await Service.getTodos();
 
-            dispatch(setTodos(resp || []));
-        })()
-    }, [])
+      dispatch(setTodos(resp || []));
+    })();
+  }, []);
 
-    const onCreateTodo = async (e: React.KeyboardEvent<HTMLInputElement>) => {
-        if (e.key === 'Enter' ) {
-            const resp = await Service.createTodo(inputRef.current.value);
-            dispatch(createTodo(resp));
-        }
+  const onCreateTodo = async (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter") {
+      if (inputRef.current.value.length > 0) {
+        const resp = await Service.createTodo(inputRef.current.value.trim());
+        dispatch(createTodo(resp));
+        localStorage.setItem("todo-app", JSON.stringify([...todos, resp]));
+        onResetInput();
+      } else alert("Please input your task");
     }
+  };
 
-    const onUpdateTodoStatus = (e: React.ChangeEvent<HTMLInputElement>, todoId: any) => {
-        dispatch(updateTodoStatus(todoId, e.target.checked))
-    }
+  const onResetInput = () => {
+    inputRef.current.value = "";
+  };
 
-    const onToggleAllTodo = (e: React.ChangeEvent<HTMLInputElement>) => {
-        dispatch(toggleAllTodos(e.target.checked))
-    }
+  const onUpdateTodoStatus = ( e: React.ChangeEvent<HTMLInputElement>, todoId: any ) => {
+    dispatch(updateTodoStatus(todoId, e.target.checked));
+  };
 
-    const onDeleteAllTodo = () => {
-        dispatch(deleteAllTodos());
-    }
+  const onToggleAllTodo = (e: React.ChangeEvent<HTMLInputElement>) => {
+    dispatch(toggleAllTodos(e.target.checked));
+  };
 
+  const onDeleteAllTodo = () => {
+    dispatch(deleteAllTodos());
+  };
 
-    return (
-        <div className="ToDo__container">
-            <div className="Todo__creation">
-                <input
-                    ref={inputRef}
-                    className="Todo__input"
-                    placeholder="What need to be done?"
-                    onKeyDown={onCreateTodo}
-                />
-            </div>
-            <div className="ToDo__list">
-                {
-                    todos.map((todo, index) => {
-                        return (
-                            <div key={index} className="ToDo__item">
-                                <input
-                                    type="checkbox"
-                                    checked={showing === todo.status}
-                                    onChange={(e) => onUpdateTodoStatus(e, index)}
-                                />
-                                <span>{todo.content}</span>
-                                <button
-                                    className="Todo__delete"
-                                >
-                                    X
-                                </button>
-                            </div>
-                        );
-                    })
-                }
-            </div>
-            <div className="Todo__toolbar">
-                {todos.length > 0 ?
-                    <input
-                        type="checkbox"
-                        onChange={onToggleAllTodo}
-                    /> : <div/>
-                }
-                <div className="Todo__tabs">
-                    <button className="Action__btn">
-                        All
-                    </button>
-                    <button className="Action__btn" onClick={()=>setShowing(TodoStatus.ACTIVE)}>
-                        Active
-                    </button>
-                    <button className="Action__btn" onClick={()=>setShowing(TodoStatus.COMPLETED)}>
-                        Completed
-                    </button>
-                </div>
-                <button className="Action__btn" onClick={onDeleteAllTodo}>
-                    Clear all todos
-                </button>
+  const onDeleteTodo = (todoId: string) => {
+    dispatch(deleteTodo(todoId));
+  };
+
+  const onUpdateTodo = ( e: React.ChangeEvent<HTMLInputElement>, todoId: string ) => {
+    dispatch(updateTodo(e.target.value, todoId));
+  };
+
+
+  return (
+    <div className="ToDo__container">
+      <div className="Todo__creation">
+        <input
+          ref={inputRef}
+          className="Todo__input"
+          placeholder="What need to be done?"
+          onKeyDown={onCreateTodo}
+        />
+      </div>
+      <div className="ToDo__list">
+        {todos.map((todo, index) => {
+          return (
+            <div key={index} className="ToDo__item" >
+              <input
+                type="checkbox"
+                checked={todo.status === TodoStatus.COMPLETED}
+                onChange={(e) => onUpdateTodoStatus(e, todo.id)}
+              />
+              <input
+                type="text"
+                value={todo.content}
+                onChange={(e) => onUpdateTodo(e, todo.id)}
+                className={`${todo.status === TodoStatus.COMPLETED && 'Todo__done'}`}
+              />
+
+              <button
+                className="Todo__delete"
+                onClick={() => onDeleteTodo(todo.id)}
+              >
+                X
+              </button>
             </div>
+          );
+        })}
+      </div>
+      <div className="Todo__toolbar">
+        {todos.length > 0 ? (
+          <input type="checkbox" onChange={onToggleAllTodo} />
+        ) : (
+          <div />
+        )}
+        <div className="Todo__tabs">
+          <button className="Action__btn" onClick={() => dispatch(setTodos(todos))}>
+            All
+          </button>
+          <button
+            className="Action__btn"
+            onClick={() => dispatch(todoActive(TodoStatus.ACTIVE))}
+          >
+            Active
+          </button>
+          <button
+            className="Action__btn"
+            onClick={() => dispatch(todoComplete(TodoStatus.COMPLETED))}
+          >
+            Completed
+          </button>
         </div>
-    );
+        <button className="Action__btn" onClick={onDeleteAllTodo}>
+          Clear all todos
+        </button>
+      </div>
+    </div>
+  );
 };
 
-export default ToDoPage;
+export default ToDoPage;