Twelve Steps Todo

/* These changes to the Todo.js file, and the todoReducer.js file */
/* Can be applied to the following git commit to build the Todo App with Reducer logic */
/* 
  coomit: 5e7d1ae9ac2d2943c088799ac902063f1ba38c9a
  repo: https://github.com/httpJunkie/react-todo
*/

/* #Step 01: Add useReducer, initial state and useRef hooks */

  import { todoReducer } from './todoReducer';
  const initialState = [
    { id: 1, name: 'Get started', complete: false }
  ];

  const inputRef = useRef();
  const [todos, dispatch] = useReducer(todoReducer, []);

  ref = { inputRef }

/* Step 02: Add Dispatch and Reducer case for 'ADD_TODO' */

  dispatch({
    type: 'ADD_TODO',
    name: inputRef.current.value,
    complete: false
  });

  return (action.name.length)
    ? [...state, {
      id: state.length ? Math.max(...state.map(todo => todo.id)) + 1 : 0,
      name: action.name,
      complete: false
    }]
    : state

/* Step 03: Add prevent default and reset input */

  event.preventDefault();
  inputRef.current.value = '';

/* Step 04: Add Dispatch and Reducer case for 'TOGGLE_COMPLETE' */

  dispatch({ type: 'TOGGLE_COMPLETE', id });

  return state.map((item) =>
    item.id === action.id
      ? { ...item, complete: !item.complete }
      : item
  )

/* Step 05: Add Dispatch and Reducer case for 'DELETE_TODO' */

  dispatch({ type: 'DELETE_TODO', id });

  return state.filter((todo) => todo.id !== action.id);

/* Step 06: Add Dispatch and Reducer case for 'CLEAR_TODOS' */

  dispatch({ type: 'CLEAR_TODOS' });

  return [];

/* Step 07: handle default case (wrong action type?) */

  console.log('no corresponding action found')
  return state;

/* Step 08: useEffect to notify how many completed todos */

  const completedTodos = todos.filter(todo => todo.complete);

  useEffect(() => {
    document.title = `${completedTodos.length} completed todos`;
  })

/* Step 09: Redirect using Router and Hook (super contrived, I know) */

  import { Redirect } from 'react-router-dom';

  const [toHome, setToHome] = useState(false);

  setTimeout(() => setToHome(true), 2000)

/* Step 10: Render Redirect Component if toHome is `true` */

  {toHome ? <Redirect to="/" /> : <></>}
  
/* Starting point for Todos.js */

import React, { useState, useReducer, useRef, useEffect } from 'react';
import './Todos.css';


const Todo = () => {

  function addTodo(event) {
  }
  function toggleComplete(id) {
  }
  function deleteTodo(id) {
  }
  function clearTodos() {
  }

  return (
    <>
      <div className="todo-input">
        <form onSubmit={addTodo}>
          <input type="search" id="add-todo" placeholder="Add Todo..." />
        </form>
      </div>
      <div className="column-container">
        {todos.map((todo) => (
          <div className={`column-item ${todo.complete ? 'complete' : ''}`} key={todo.id}>
            <div className="flex-container">
              <div className="todo-name" onClick={() => toggleComplete(todo.id)}>
                {todo.name}
              </div>
              <div className="todo-delete" onClick={() => deleteTodo(todo.id)}>
                &times;
              </div>
            </div>
          </div>
        ))}
      </div>
      <button onClick={() => clearTodos()}>CLEAR TODOS</button>
    </>
  );
}

export default Todo;

/* Starting Point For todoReducer.js */

export const todoReducer = (state, action) => {
  switch (action.type) {
    case 'ADD_TODO': {
      return null
    }
    case 'TOGGLE_COMPLETE': {
      return null;
    }
    case 'DELETE_TODO': {
      return null;
    }
    case 'CLEAR_TODOS': {
      return null;
    }
    default: {
      return null;
    };
  }
}