clean slate

Author: rwieruch

src/App.js

@@ -1,191 +0,0 @@
-import React, {
-  useState,
-  useReducer,
-  useContext,
-  createContext,
-} from 'react';
-
-import uuid from 'uuid/v4';
-
-const DispatchContext = createContext(null);
-
-const initalTodos = [
-  {
-    id: 'a',
-    task: 'Learn React',
-    complete: true,
-  },
-  {
-    id: 'b',
-    task: 'Learn Firebase',
-    complete: true,
-  },
-  {
-    id: 'c',
-    task: 'Learn GraphQL',
-    complete: false,
-  },
-];
-
-const todoReducer = (state, action) => {
-  switch (action.type) {
-    case 'DO_TODO':
-      return state.map(todo => {
-        if (todo.id === action.id) {
-          return { ...todo, complete: true };
-        } else {
-          return todo;
-        }
-      });
-    case 'UNDO_TODO':
-      return state.map(todo => {
-        if (todo.id === action.id) {
-          return { ...todo, complete: false };
-        } else {
-          return todo;
-        }
-      });
-    case 'ADD_TODO':
-      return state.concat({
-        task: action.task,
-        id: uuid(),
-        complete: false,
-      });
-    default:
-      return state;
-  }
-};
-
-const filterReducer = (state, action) => {
-  switch (action.type) {
-    case 'SHOW_ALL':
-      return 'ALL';
-    case 'SHOW_COMPLETE':
-      return 'COMPLETE';
-    case 'SHOW_INCOMPLETE':
-      return 'INCOMPLETE';
-    default:
-      return state;
-  }
-};
-
-const App = () => {
-  const [todos, todosDispatch] = useReducer(todoReducer, initalTodos);
-  const [filter, filterDispatch] = useReducer(filterReducer, 'ALL');
-
-  // Global Dispatch Function
-  const dispatch = action =>
-    [todosDispatch, filterDispatch].forEach(fn => fn(action));
-
-  const filteredTodos = todos.filter(todo => {
-    if (filter === 'ALL') {
-      return true;
-    }
-
-    if (filter === 'COMPLETE' && todo.complete) {
-      return true;
-    }
-
-    if (filter === 'INCOMPLETE' && !todo.complete) {
-      return true;
-    }
-
-    return false;
-  });
-
-  return (
-    <DispatchContext.Provider value={dispatch}>
-      <Filter />
-      <TodoList todos={filteredTodos} />
-      <AddTodo />
-    </DispatchContext.Provider>
-  );
-};
-
-const AddTodo = () => {
-  const [task, setTask] = useState('');
-
-  const dispatch = useContext(DispatchContext);
-
-  const handleSubmit = event => {
-    if (task) {
-      dispatch({ type: 'ADD_TODO', task });
-    }
-
-    setTask('');
-
-    event.preventDefault();
-  };
-
-  const handleChange = event => setTask(event.target.value);
-
-  return (
-    <form onSubmit={handleSubmit}>
-      <input type="text" value={task} onChange={handleChange} />
-      <button type="submit">Add Todo</button>
-    </form>
-  );
-};
-
-const TodoList = ({ todos }) => (
-  <ul>
-    {todos.map(todo => (
-      <TodoItem key={todo.id} todo={todo} />
-    ))}
-  </ul>
-);
-
-const TodoItem = ({ todo }) => {
-  const dispatch = useContext(DispatchContext);
-
-  const handleChange = () =>
-    dispatch({
-      type: todo.complete ? 'UNDO_TODO' : 'DO_TODO',
-      id: todo.id,
-    });
-
-  return (
-    <li>
-      <label>
-        <input
-          type="checkbox"
-          checked={todo.complete}
-          onChange={handleChange}
-        />
-        {todo.task}
-      </label>
-    </li>
-  );
-};
-
-const Filter = () => {
-  const dispatch = useContext(DispatchContext);
-
-  const handleShowAll = () => {
-    dispatch({ type: 'SHOW_ALL' });
-  };
-
-  const handleShowComplete = () => {
-    dispatch({ type: 'SHOW_COMPLETE' });
-  };
-
-  const handleShowIncomplete = () => {
-    dispatch({ type: 'SHOW_INCOMPLETE' });
-  };
-
-  return (
-    <div>
-      <button type="button" onClick={handleShowAll}>
-        Show All
-      </button>
-      <button type="button" onClick={handleShowComplete}>
-        Show Complete
-      </button>
-      <button type="button" onClick={handleShowIncomplete}>
-        Show Incomplete
-      </button>
-    </div>
-  );
-};
-
-export default App;