feat: Explore useReducer, #2

Author: weaponsforge

client/.eslintrc.json

@@ -21,7 +21,7 @@
      "semi": ["error", "never"],
      "no-unused-vars": "error",
      "no-undef": "error",
-     "no-console": ["error", { "allow": ["error"] }],
+     // "no-console": ["error", { "allow": ["error"] }],
      "react/react-in-jsx-scope": "off",
      "no-restricted-imports": [
       "error", { "patterns": ["@/features/*/*"] }

client/src/features/usereducer/components/contactform/index.js

@@ -0,0 +1,17 @@
+import PropTypes from 'prop-types'
+
+function ContactForm ({ submitForm }) {
+  return (
+    <form onSubmit={submitForm}>
+      <h4>Add Todo</h4>
+      <input type="text" id="title" placeholder="Enter title" /><br />
+      <button type="submit">Add</button>
+    </form>
+  )
+}
+
+ContactForm.propTypes = {
+  submitForm: PropTypes.func
+}
+
+export default ContactForm

client/src/features/usereducer/components/counter/index.js

@@ -0,0 +1,18 @@
+import { useState } from 'react'
+
+function Counter () {
+  const [count, setCount] = useState(0)
+  console.log('counter render')
+
+  return (
+    <div>
+      <h3>Counter</h3>
+      <p>{count}</p>
+      <button onClick={() => setCount(prev => prev += 1)}>
+        Increment
+      </button>
+    </div>
+  )
+}
+
+export default Counter

client/src/features/usereducer/components/counterlist/index.js

@@ -0,0 +1,25 @@
+import { useState } from 'react'
+import TodoList from '../todolist'
+
+// Shows unoptimized rerenders from TodoList
+function CounterList () {
+  const [count, setCount] = useState(0)
+  console.log('counter render')
+
+  return (
+    <div>
+      <h3>CounterList</h3>
+      <p>Features a Todo list using useReducer and a counter increment button/display. The Todo List component is a child of the Counter component.</p>
+
+      <h3>Count</h3>
+      <p>{count}</p>
+      <button onClick={() => setCount(prev => prev += 1)}>
+        Increment
+      </button>
+
+      <TodoList />
+    </div>
+  )
+}
+
+export default CounterList

client/src/features/usereducer/components/counterlistmemo/index.js

@@ -0,0 +1,26 @@
+import { useState } from 'react'
+import TodoListMemo from '../todolistmemo'
+
+// Optimize rerenders by wrapping TodoListMemo in a memo() function
+// Even it the containing parent's local states changes
+function CounterListMemo () {
+  const [count, setCount] = useState(0)
+  console.log('counter render')
+
+  return (
+    <div>
+      <h3>CounterListMemo</h3>
+      <p>Features a Todo list using useReducer and a counter increment button/display. The Todo List component is a child of the Counter component. The TodoList component is wrapped by React.memo().</p>
+
+      <h3>Count</h3>
+      <p>{count}</p>
+      <button onClick={() => setCount(prev => prev += 1)}>
+        Increment
+      </button>
+
+      <TodoListMemo />
+    </div>
+  )
+}
+
+export default CounterListMemo

client/src/features/usereducer/components/counterlistoptimized/index.js

@@ -0,0 +1,17 @@
+import Counter from '../counter'
+import TodoList from '../todolist'
+
+// Optimized rendering by lowering the states
+function CounterListOptimized () {
+  return (
+    <div>
+      <h3>CounterListOptimized</h3>
+      <p>Features a Todo list using useReducer and a counter increment button/display. The Todo List component and Counter component are children of a parent component.</p>
+
+      <Counter />
+      <TodoList />
+    </div>
+  )
+}
+
+export default CounterListOptimized

client/src/features/usereducer/components/todolist/actions.js

@@ -0,0 +1,13 @@
+const ACTION_TYPES = {
+  CREATE: 'create',
+  READ: 'read',
+  UPDATE: 'update',
+  DELETE: 'delete',
+  LIST: 'list',
+  CLEAR_LIST: 'clear_list',
+  RESET_LIST: 'reset_list'
+}
+
+export {
+  ACTION_TYPES
+}

client/src/features/usereducer/components/todolist/index.js

@@ -0,0 +1,59 @@
+import { useReducer } from 'react'
+
+import ContactForm from '../contactform'
+
+import { ACTION_TYPES } from './actions'
+import reducer from './reducer'
+import data from './todos.json'
+
+const initialState = {
+  todos: data
+}
+
+function TodoList () {
+  const [state, dispatch] = useReducer(reducer, initialState)
+
+  console.log('todolist render')
+
+  const clearItems = () => {
+    dispatch({ type: ACTION_TYPES.CLEAR_LIST })
+  }
+
+  const resetList = () => {
+    dispatch({ type: ACTION_TYPES.RESET_LIST })
+  }
+
+  const removeTodo = (id) => {
+    dispatch({ type: ACTION_TYPES.DELETE, payload: id })
+  }
+
+  const createTodo = (e) => {
+    e.preventDefault()
+    const todo = { title: e.target.title.value }
+
+    dispatch({ type: ACTION_TYPES.CREATE, payload: todo })
+  }
+
+  return (
+    <div>
+      <br />
+      <h3>Todo List</h3>
+      <button onClick={clearItems}>Clear</button> &nbsp;
+      <button onClick={resetList}>Reset</button>
+      <br /><br /><hr />
+
+      <ContactForm submitForm={createTodo} />
+
+      <ul>
+        {state.todos.map((item, index) => (
+          <li key={index}>
+            <span>{item.title}</span> &nbsp;
+            <button onClick={() => removeTodo(item.id)}>remove</button>
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}
+
+export default TodoList

client/src/features/usereducer/components/todolist/reducer.js

@@ -0,0 +1,26 @@
+import { ACTION_TYPES } from './actions'
+import data from './todos.json'
+
+const reducer = (state, action) => {
+  if (action.type === ACTION_TYPES.CLEAR_LIST) {
+    return { ...state, todos: [] }
+  }
+
+  if (action.type === ACTION_TYPES.RESET_LIST) {
+    return { ...state, todos: data }
+  }
+
+  if (action.type === ACTION_TYPES.DELETE) {
+    return { ...state, todos: state.todos.filter(item => item.id !== action.payload) }
+  }
+
+  if (action.type === ACTION_TYPES.CREATE) {
+    const id = state.todos.length
+    const todo = { ...action.payload, id, status: 'pending' }
+    return { ...state, todos: [...state.todos, todo] }
+  }
+
+  throw new Error(`Invalid action type ${action.type}.`)
+}
+
+export default reducer

client/src/features/usereducer/components/todolist/todos.json

@@ -0,0 +1,27 @@
+[
+  {
+    "id": 1,
+    "title": "clean the house",
+    "status": "pending"
+  },
+  {
+    "id": 2,
+    "title": "eat breakfast",
+    "status": "pending"
+  },
+  {
+    "id": 3,
+    "title": "wash clothes",
+    "status": "pending"
+  },
+  {
+    "id": 4,
+    "title": "watch cartoons",
+    "status": "pending"
+  },
+  {
+    "id": 5,
+    "title": "play games",
+    "status": "pending"
+  }
+]