chore: Add a delete method on the external store

Author: weaponsforge

client/src/components/usesyncexternalstore/index.js

@@ -1,9 +1,11 @@
+import PropTypes from 'prop-types'
 import Page from '@/common/layout/page'
-import useTodos from '@/domain/usesyncexternalstore/todostore'
-
-function UseSyncExternalStoreComponent () {
-  const { todos, add } = useTodos()
 
+function UseSyncExternalStoreComponent ({
+  todos,
+  addTodo,
+  deleteTodo
+}) {
   return (
     <Page>
       <h2>
@@ -14,15 +16,26 @@ function UseSyncExternalStoreComponent () {
       <div>
         <ul>
           {todos.map((item, index) => (
-            <li key={index}>{item.text}</li>
+            <li key={index}>
+              <span>{item.text}</span> &nbsp;
+              <span>
+                <button onClick={() => deleteTodo(item.id)}>[ X ]</button>
+              </span>
+            </li>
           ))}
         </ul>
       </div>
       }
 
-      <button onClick={() => add()}>Add Todo</button>
+      <button onClick={() => addTodo()}>Add Todo</button>
     </Page>
   )
 }
 
+UseSyncExternalStoreComponent.propTypes = {
+  todos: PropTypes.array,
+  addTodo: PropTypes.func,
+  deleteTodo: PropTypes.fun
+}
+
 export default UseSyncExternalStoreComponent

client/src/domain/usesyncexternalstore/todostore.js

@@ -15,7 +15,8 @@ export default function useTodos () {
 
   return {
     todos,
-    add: todoStore.addTodo
+    addTodo: todoStore.addTodo,
+    deleteTodo: todoStore.deleteTodo
   }
 }
 
@@ -25,6 +26,11 @@ export const todoStore = {
     emitChange()
   },
 
+  deleteTodo (id) {
+    todos = todos.filter(item => item.id !== id)
+    emitChange()
+  },
+
   subscribe (listener) {
     listeners = [...listeners, listener]
 

client/src/pages/usesyncexternalstore/index.js

@@ -1,8 +1,15 @@
 import UseSyncExternalStoreComponent from '@/components/usesyncexternalstore'
+import useTodos from '@/domain/usesyncexternalstore/todostore'
 
 function UseSyncExternalStore () {
+  const { todos, addTodo, deleteTodo } = useTodos()
+
   return (
-    <UseSyncExternalStoreComponent />
+    <UseSyncExternalStoreComponent
+      todos={todos}
+      addTodo={addTodo}
+      deleteTodo={deleteTodo}
+    />
   )
 }