chore: Minimize full page rerendering

Author: weaponsforge

client/src/common/ui/card/Card.module.css

@@ -0,0 +1,7 @@
+.card {
+  border: 1px solid;
+  max-width: 400px;
+  min-height: 100px;
+  border-radius: 16px;
+  padding: 16px;
+}

client/src/common/ui/card/index.js

@@ -0,0 +1,11 @@
+import styles from './Card.module.css'
+
+function Card ({ children }) {
+  return (
+    <div className={styles.card}>
+      {children}
+    </div>
+  )
+}
+
+export default Card

client/src/styles/Home.module.css renamed to client/src/components/home/Home.module.css

@@ -1,7 +1,8 @@
 import Link from 'next/link'
 import Page from '@/common/layout/page'
+
 import { Inter } from 'next/font/google'
-import styles from '@/styles/Home.module.css'
+import styles from './Home.module.css'
 import navlinks from './items.json'
 
 const inter = Inter({ subsets: ['latin'] })

client/src/components/home/index.js

@@ -1,8 +1,9 @@
 import PropTypes from 'prop-types'
 import Page from '@/common/layout/page'
+import Card from '@/common/ui/card'
+import TodoListComponent from '@/domain/redux/todolist'
 
 function ReduxComponent ({
-  todos,
   addTodo,
   deleteTodo
 }) {
@@ -17,20 +18,19 @@ function ReduxComponent ({
         Add Todo
       </button>
 
-      <ul style={{ marginTop: '24px' }}>
-        {(todos).map(((item, id) => (
-          <li key={id}>
-            <span>id: {item.id}, {item.text}</span>
-            <span>
-              <button onClick={() => deleteTodo(item.id)}>
-                [ x ]
-              </button>
-            </span>
-          </li>
-        )))}
-      </ul>
+      <TodoListComponent deleteTodo={deleteTodo} />
+      <br />
+
+      <Card>
+        hello
+      </Card>
     </Page>
   )
 }
 
+ReduxComponent.propTypes = {
+  addTodo: PropTypes.func,
+  deleteTodo: PropTypes.func
+}
+
 export default ReduxComponent

client/src/components/redux/index.js

@@ -0,0 +1,27 @@
+import PropTypes from 'prop-types'
+import { useSelector } from 'react-redux'
+
+function TodoListComponent ({ deleteTodo }) {
+  const {ids, entities: todos } = useSelector(state => state.todos)
+
+  return (
+    <ul style={{ marginTop: '24px' }}>
+      {(ids).map(((id, index) => (
+        <li key={index}>
+          <span>id: {todos[id].id}, {todos[id].text}</span>
+          <span>
+            <button onClick={() => deleteTodo(id)}>
+              [ x ]
+            </button>
+          </span>
+        </li>
+      )))}
+    </ul>
+  )
+}
+
+TodoListComponent.propTypes = {
+  deleteTodo: PropTypes.func
+}
+
+export default TodoListComponent

client/src/domain/redux/todolist/index.js

@@ -1,3 +1,7 @@
+// Notes:
+// https://redux.js.org/tutorials/essentials/part-6-performance-normalization#normalized-state-structure
+// https://redux.js.org/tutorials/essentials/part-6-performance-normalization#optimizing-the-posts-list
+
 import {
   createSlice,
   createEntityAdapter
@@ -8,10 +12,12 @@ const STATES = {
   PENDING: 'pending'
 }
 
+// Entiti adapter
 const todosAdapter = createEntityAdapter({
   selectId: (todo) => todo.id
 })
 
+// Slice
 const todoSlice = createSlice({
   name: 'todos',
   initialState: todosAdapter.getInitialState({

client/src/lib/store/todos/todoSlice.js

@@ -1,11 +1,10 @@
-import { useSelector, useDispatch } from 'react-redux'
+import { useDispatch } from 'react-redux'
 import { todoReceived, todoDelete } from '@/lib/store/todos/todoSlice'
 
 import ReduxComponent from '@/components/redux'
 
 function ReduxContainer () {
   const dispatch = useDispatch()
-  const todos = useSelector(state => state.todos)
 
   const addTodo = () => {
     dispatch(todoReceived({
@@ -19,7 +18,6 @@ function ReduxContainer () {
 
   return (
     <ReduxComponent
-      todos={todos.ids.map(id => todos.entities[id])}
       addTodo={addTodo}
       deleteTodo={deleteTodo}
     />