[Assignment] mana do - Nguyen Quoc Duy - Frontend Enginner

README.md

@@ -41,3 +41,39 @@
 - Sign in using username: `firstUser`, password: `example`
 
 Last updated: 2022/01/13
+
+***
+
+### Mana-do requirements
+
+- [x] Find strange bugs. Fix them.
+- [x] Find anti-patterns. Fix them.
+- [x] Use localStorage to store data
+- [x] Add edit feature - user double-clicks the todo to edit, presses enter to apply the changes, or clicks outside to discard
+- [x] Allows users to click on checkbox items they have completed (Active/Complete)
+- [x] Enhance UI
+- [x] Testing
+
+### Available functions
+- Add todo
+- Checkbox show/hide
+- Clear all todo
+
+### Available bugs and things to fix list (checked is fixed)
+- [x] At the second todo addition onwards, todo will be add twice a time
+- [x] After add todo, input is not empty
+- [x] Delete todo button is not working
+- [x] Checkbox todo will throw error and application crashing
+- [x] Checkbox todo is not working correctly
+- [x] Checkbox toggle all is not working properly
+- [x] Filter buttons are not working properly
+- [x] UI filter button selected is not correct 
+- [x] Data is not save after reloading
+
+### Addition features
+- Show created date for each todo item
+- Show label count items still active (not completed yet)
+- Confirm dialog when delete is clicked:
+    - Show dialog when delete item button is clicked and that item is not completed yet
+    - Show dialog when clear all button is clicked and there is still active item
+- Show empty message when there is no todo item

package.json

@@ -4,12 +4,16 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@testing-library/jest-dom": "^5.16.1",
+    "@testing-library/react": "^12.1.2",
+    "@testing-library/user-event": "^14.1.1",
     "@types/jest": "^24.0.0",
     "@types/node": "^12.0.0",
     "@types/react": "^16.9.0",
     "@types/react-dom": "^16.9.0",
     "axios": "^0.19.2",
     "cross-env": "^7.0.2",
+    "eva-icons": "^1.1.3",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-scripts": "4.0.3",

src/App.css

@@ -1,125 +1,45 @@
 .App {
-  text-align: center;
   display: flex;
-  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  padding-bottom: 10vh;
 }
 
 button {
   outline: none;
   border: none;
-  box-shadow: 2px 0 2px currentColor;
   border-radius: 4px;
-  min-height: 32px;
-  min-width: 80px;
   padding: 4px 8px;
+  cursor: pointer;
 }
 
-button:hover {
-  opacity: 0.85;
-}
-
-input[type="checkbox"] {
-  width: 24px;
-  height: 24px;
-  box-shadow: none;
-  border: none;
-  outline: none;
-}
-
-input[type="checkbox"]:focus {
-  box-shadow: none;
-  border: none;
-  outline: none;
-}
 
-input {
-  min-height: 36px;
+/* CUSTOM CHECKBOX */
+.checkbox-custom {
+  cursor: pointer;
+  word-break: break-all;
+  padding: 15px 15px 15px 30px;
+  display: block;
+}
+
+.toggle {
+  width: 40px;
+  height: auto;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  margin: auto 0;
   border: none;
   outline: none;
-  padding: 0 12px;
-  box-shadow: 2px 0 4px rgba(0,0,0, 0.2);
-  border-radius: 4px;
-}
-
-input:focus {
-  box-shadow: 1px 0 9px rgba(0,0,0, 0.25);
-}
-
-.ToDo__container {
-  border: 1px solid rgba(0,0,0, 0.13);
-  border-radius: 8px;
-  width: 500px;
-  margin-top: 5rem;
-  padding: 24px;
-  box-shadow: 2px 2px 1px rgba(0,0,0, 0.09),
-              3px 2px 3px rgba(0,0,0, 0.05);
-}
-
-.Todo__creation {
-  display: flex;
-}
-
-.Todo__input {
-  flex: 1 1;
-}
-
-.ToDo__list {
-  display: flex;
-  flex-direction: column;
-  margin-top: 1.5rem;
-}
-
-.ToDo__item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.ToDo__item > span {
-  flex: 1 1;
-  text-align: left;
-  margin-left: 8px;
-}
-
-.Todo__content {
-  flex: 1 1;
-}
-
-.Todo__delete {
-  outline: none;
-  border: none;
-  width: 32px;
-  height: 32px;
-  min-width: auto;
-  min-height: auto;
-  box-shadow: none;
-  border-radius: 50%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-}
-
-.Todo__action, .Todo__delete {
-  width: 24px;
-  height: 24px;
-  flex-shrink: 0;
-}
-
-.Todo__toolbar {
-  display: flex;
-  justify-content: space-between;
-  margin-top: 24px;
-}
-
-.Todo__tabs {
-  display: flex;
-  justify-content: center;
+  appearance: none;
 }
 
-.Todo__tabs > *:not(:last-child) {
-  margin-right: 8px;
+.toggle + label {
+  background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: none;
 }
 
-.Action__btn {
+.toggle:checked + label {
+  background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E");
 }

src/App.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import ToDoPage from './ToDoPage';
+import ToDoPage from './pages/ToDoPage/ToDoPage';
 
 import './App.css';
 

src/components/ToDoInput/ToDoInput.css

@@ -0,0 +1,21 @@
+.Todo__creation {
+    display: flex;
+    height: 40px;
+    padding: 10px;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+    box-shadow: 0 1px 0.5px rgb(0 0 0 / 10%);
+}
+
+.Todo__input {
+    width: 100% !important;
+    height: 100% !important;
+	outline: none;
+    border: none;
+    margin-left: 10px;
+    margin-right: 10px;
+    font-size: 35px;
+}
+
+.Todo__input::placeholder {
+    opacity: 0.7;
+}

src/components/ToDoInput/ToDoInput.tsx

@@ -0,0 +1,32 @@
+import React, { useRef } from 'react';
+import './ToDoInput.css'
+
+export interface ToDoInputProps {
+    onCreateTodo(content: string): Promise<void>
+}
+
+function ToDoInput({onCreateTodo}: ToDoInputProps) {
+    const inputRef = useRef<any>(null);
+
+    const onHandleCreateTodo = async (e: React.KeyboardEvent<HTMLInputElement>) => {
+        // Make sure that todo input is not empty or all white space
+        if (e.key === 'Enter' && inputRef.current.value.trim()) {
+            onCreateTodo(inputRef.current.value.trim());
+            inputRef.current.value = '';
+        }
+    }
+
+    return (
+        <div className="Todo__creation">
+            <input
+                data-testid="todo-input"
+                ref={inputRef}
+                className="Todo__input"
+                placeholder="What need to be done?"
+                onKeyDown={onHandleCreateTodo}
+            />
+        </div>
+    )
+}
+
+export default ToDoInput