Add some styling

Author: Duc Le

package-lock.json

@@ -7,6 +7,7 @@
  "@testing-library/react": "^9.3.2",
  "@testing-library/user-event": "^7.1.2",
  "formik": "^2.1.4",
+ "node-sass": "^4.14.1",
  "react": "^16.13.1",
  "react-dom": "^16.13.1",
  "react-scripts": "3.4.1",

package.json

@@ -5,11 +5,16 @@ import TodoList from './components/TodoList';
 import AddNewTodoForm from './components/AddNewTodoForm';
 
 // HELPER
-import { getTodoItemsFromLocalStorage, saveTodoItemsToLocalStorage } from './helpers'
+import { getTodoItemsFromLocalStorage, saveTodoItemsToLocalStorage } from './helpers';
+
+// STYLE
+import style from './Todo.module.scss';
 
 const Todo = () => {
  // Initialize todoItems state with the JSON string stored under todo key in localStorage, if it's falsy, use an empty array instead
  const [todoItems, setTodoItems] = useState(getTodoItemsFromLocalStorage('todo') || [])
+ 
+ const [customError, setCustomError] = useState(null)
 
  // Event handler for adding new Todo, using useCallback to return a memoized callback.
  const addTodoHandler = useCallback(todo => {
@@ -75,10 +80,9 @@ const Todo = () => {
  }, [todoItems])
 
  return (
- <div className="todo">
- <h1>Todo</h1>
-
+ <div className={style.todo}>
  <AddNewTodoForm
+ customError={customError} // Passing down customError
  onAddTodo={addTodoHandler} // Passing down addTodoHandler
  />
 
@@ -87,6 +91,7 @@ const Todo = () => {
  onRemoveTodo={removeTodoHandler} // Passing down removeTodoHandler
  onToggleTodoDone={toggleTodoDoneHandler} // Passing down toggleTodoDoneHandler
  onEditTodo={editTodoHandler} // Passing down editTodoHandler
+ setCustomError={setCustomError} // Passing down setCustomError
  />
  </div>
  );

src/Todo.js

@@ -0,0 +1,134 @@
+@import url('https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap');
+
+body {
+ margin: 0;
+ &::before {
+ content: '';
+ position: fixed;
+ z-index: -1;
+ top: 0;
+ left: 0;
+ background: #37ecba;
+ background: linear-gradient(to top, #37ecba 0%, #72afd3 100%);
+ width: 100%;
+ height: 100%;
+ }
+}
+
+input, button, span {
+ font-family: 'Roboto', cursive;
+}
+
+input, button {
+ outline: none;
+}
+
+button {
+ cursor: pointer;
+}
+
+.todo {
+ margin: 0 auto;
+ min-width: 500px;
+ max-height: 100vh;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ > form {
+ background-color: #0097A7;
+ display: flex;
+ justify-content: space-between;
+ padding: 15px;
+ > input {
+ font-size: 25px;
+ font-weight: bold;
+ font-style: italic;
+ width: calc(100% - 80px);
+ color: white;
+ background: none;
+ border: none;
+ &::placeholder {
+ color: white;
+ }
+ }
+ > button {
+ padding: 5px 10px;
+ font-size: 20px;
+ background-color: #00BCD4;
+ border: none;
+ color: white;
+ }
+ }
+ > span {
+ padding: 15px;
+ background-color: red;
+ color: white;
+ display: block;
+ text-align: center;
+ }
+ > ul {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ > li {
+ padding: 15px;
+ line-height: 25px;
+ position: relative;
+ cursor: pointer;
+ background-color: white;
+ button {
+ font-size: 20px;
+ float: right;
+ border: none;
+ background: none;
+ }
+ &:hover {
+ span {
+ background-color: #eee;
+ }
+ }
+ > input[type="text"] {
+ background: none;
+ border: none;
+ margin-left: 30px;
+ width: calc(100% - 100px);
+ }
+ > input[type="checkbox"] {
+ position: absolute;
+ opacity: 0;
+ cursor: pointer;
+ height: 0;
+ width: 0;
+ &:checked {
+ ~ span {
+ background-color: #00BCD4;
+ &::after {
+ display: block;
+ }
+ }
+ }
+ }
+ > span {
+ position: absolute;
+ top: 15px;
+ left: 15px;
+ height: 25px;
+ width: 25px;
+ background-color: #eee;
+ &::after {
+ content: "";
+ position: absolute;
+ display: none;
+ left: 9px;
+ top: 5px;
+ width: 5px;
+ height: 10px;
+ border: solid white;
+ border-width: 0 3px 3px 0;
+ transform: rotate(45deg);
+ }
+ }
+ }
+ }
+}

src/Todo.module.scss

@@ -2,7 +2,7 @@ import React from 'react';
 import { useFormik } from 'formik';
 import * as Yup from 'yup';
 
-const AddNewTodoForm = ({ onAddTodo }) => {
+const AddNewTodoForm = ({ onAddTodo, customError }) => {
  // Initialize a form instance with useFormik hook
  const formik = useFormik({
  // Disable validation onChange and onBlur for keeping validation errors less annoying
@@ -35,20 +35,24 @@ const AddNewTodoForm = ({ onAddTodo }) => {
 
  const aFormikError = errorKeys.length > 0 ? formik.errors[errorKeys[0]] : null;
 
+ const error = customError || aFormikError
+
  return (
+ <>
  <form onSubmit={formik.handleSubmit}>
- <label>Todo:</label>
  <input
  id="todo"
  name="todo"
  type="text"
  onChange={formik.handleChange}
  value={formik.values.todo}
  autoComplete="off"
+ placeholder="What needs to be done?"
  />
- <button type="submit">Submit</button>
- {aFormikError && <span>{aFormikError}</span>}
+ <button type="submit">Add</button>
  </form>
+ {error && <span>{error}</span>}
+ </>
  )
 };
 

src/components/AddNewTodoForm.js

@@ -1,28 +1,56 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useRef } from 'react';
 
-const TodoItem = ({ todo, id, onRemoveTodo, onToggleTodoDone, onEditTodo, isDone }) => {
- const removeTodoHandler = useCallback(() => onRemoveTodo(id), [id, onRemoveTodo])
+const TodoItem = ({ todo, id, onRemoveTodo, onToggleTodoDone, onEditTodo, isDone, setCustomError }) => {
+ const removeTodoHandler = useCallback(() => onRemoveTodo(id), [id, onRemoveTodo]);
+
+ const toggleTodoDoneHandler = useCallback(() => onToggleTodoDone(id), [id, onToggleTodoDone]);
 
- const toggleTodoDoneHandler = useCallback(() => onToggleTodoDone(id), [id, onToggleTodoDone])
  const editTodoHandler = useCallback(event => {
  if (event.keyCode === 13) { // Detect ENTER key down
  event.preventDefault(); // Prevent adding a new line because it's supposed to be single line
+
+ const { value } = event.target;
+
+ if (value.length < 3) {
+ setCustomError('Todo text is too short.');
+
+ return;
+ }
+
+ if (value.length > 20) {
+ setCustomError('Todo text is too long.');
+
+ return;
+ }
+
  onEditTodo(id, event.target.value);
+
+ setCustomError(null) // Reset customError
+ 
  event.target.blur(); // Make the current input lost focus after finishing onEditTodo
  }
- }, [id, onEditTodo])
+ }, [id, onEditTodo, setCustomError]);
+
+ const checkboxRef = useRef(null);
 
  return (
  <li>
  <input
+ type="checkbox"
+ ref={checkboxRef}
+ checked={!!isDone}
+ onChange={toggleTodoDoneHandler}
+ />
+ <span onClick={() => checkboxRef.current.click()} />
+ <input
+ type="text"
  defaultValue={todo} // innerHTML of the editable div
- disabled={false} // use true to disable editing
  onKeyDown={editTodoHandler} // handle innerHTML change
- tagName='span' // Use a custom HTML tag (uses a div by default)
  style={{textDecoration: isDone ? 'line-through' : 'none'}}
  />
- <button onClick={removeTodoHandler}>Remove</button>
- <button onClick={toggleTodoDoneHandler}>{`Mark as ${isDone ? 'pending': 'done'}`}</button>
+ <button onClick={removeTodoHandler}>
+ <span role="img" aria-labelledby="trash" />🗑️
+ </button>
  </li>
  )
 };

src/components/TodoItem.js

@@ -3,7 +3,7 @@ import React from 'react';
 // COMPONENT
 import TodoItem from './TodoItem';
 
-const TodoList = ({ todoItems, onRemoveTodo, onToggleTodoDone, onEditTodo }) => {
+const TodoList = ({ todoItems, onRemoveTodo, onToggleTodoDone, onEditTodo, setCustomError }) => {
  return (
  <ul>
  {
@@ -12,13 +12,14 @@ const TodoList = ({ todoItems, onRemoveTodo, onToggleTodoDone, onEditTodo }) =>
  todoItems.length > 0 && // The array should not be empty
  todoItems.map(({ id, todo, isDone }) => ( // If all conditions are met, we render a list of todo items
  <TodoItem
- key={id}
+ key={id}s
  id={id}
  todo={todo}
  onRemoveTodo={onRemoveTodo}
  onToggleTodoDone={onToggleTodoDone}
  onEditTodo={onEditTodo}
  isDone={isDone}
+ setCustomError={setCustomError}
  />
  ))
  }

src/components/TodoList.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.css';
 import Todo from './Todo';
 import * as serviceWorker from './serviceWorker';