chore: Implement usesyncexternalstore from the docs

Author: weaponsforge

client/src/components/usesyncexternalstore/index.js

@@ -1,11 +1,26 @@
 import Page from '@/common/layout/page'
+import useTodos from '@/domain/usesyncexternalstore/todostore'
 
 function UseSyncExternalStoreComponent () {
+  const { todos, add } = useTodos()
+
   return (
     <Page>
       <h2>
         UseSyncExternalStoreComponent
       </h2>
+
+      {(todos !== undefined) &&
+      <div>
+        <ul>
+          {todos.map((item, index) => (
+            <li key={index}>{item.text}</li>
+          ))}
+        </ul>
+      </div>
+      }
+
+      <button onClick={() => add()}>Add Todo</button>
     </Page>
   )
 }

client/src/domain/usesyncexternalstore/todostore.js

@@ -0,0 +1,49 @@
+import { useSyncExternalStore } from 'react'
+
+// https://react.dev/reference/react/useSyncExternalStore
+
+let nextId = 0
+let todos = [{ id: nextId++, text: 'Todo #1' }]
+let listeners = []
+
+export default function useTodos () {
+  const todos = useSyncExternalStore(
+    todoStore.subscribe,
+    todoStore.getSnapshot,
+    todoStore.getServerSnapshot
+  )
+
+  return {
+    todos,
+    add: todoStore.addTodo
+  }
+}
+
+export const todoStore = {
+  addTodo () {
+    todos = [ ...todos, { id: nextId++, text: 'Todo #' + nextId }]
+    emitChange()
+  },
+
+  subscribe (listener) {
+    listeners = [...listeners, listener]
+
+    return () => {
+      listeners = listeners.filter(item => item !== listener)
+    }
+  },
+
+  getSnapshot () {
+    return todos
+  },
+
+  getServerSnapshot () {
+    return todos
+  }
+}
+
+function emitChange () {
+  for (let listener of listeners) {
+    listener()
+  }
+}

client/src/pages/usesyncexternalstore/index.js

@@ -1,7 +1,9 @@
 import UseSyncExternalStoreComponent from '@/components/usesyncexternalstore'
 
 function UseSyncExternalStore () {
-  return (<UseSyncExternalStoreComponent />)
+  return (
+    <UseSyncExternalStoreComponent />
+  )
 }
 
 export default UseSyncExternalStore