From 229c16fb51e66a19f6621c0716fca6eec1f91c5c Mon Sep 17 00:00:00 2001
From: junbao <junbao@moego.pet>
Date: Fri, 1 Nov 2024 01:52:42 -0700
Subject: [PATCH] docs(todo): no preload, show users in login page

---
 examples/TodoMVC/src/components/SignIn.tsx | 19 ++++++++++++++++++-
 examples/TodoMVC/src/main.tsx              | 10 ----------
 examples/TodoMVC/src/store/user.boxes.ts   |  7 +++++--
 3 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/examples/TodoMVC/src/components/SignIn.tsx b/examples/TodoMVC/src/components/SignIn.tsx
index 76542ad..1a87bc6 100644
--- a/examples/TodoMVC/src/components/SignIn.tsx
+++ b/examples/TodoMVC/src/components/SignIn.tsx
@@ -3,13 +3,15 @@
  * @author junbao <junbao@moego.pet>
  */
 
-import { useDispatch } from 'amos/react';
+import { useDispatch, useSelector } from 'amos/react';
 import { memo, useState } from 'react';
 import { signIn } from '../store/user.actions';
+import { userMapBox } from '../store/user.boxes';
 
 export const SignIn = memo(() => {
   const [input, setInput] = useState('');
   const dispatch = useDispatch();
+  const userMap = useSelector(userMapBox);
   return (
     <div className="sign-in">
       <input placeholder="Your name" value={input} onChange={(e) => setInput(e.target.value)} />
@@ -17,6 +19,21 @@ export const SignIn = memo(() => {
       <button disabled={!input.trim()} onClick={() => dispatch(signIn(input))}>
         Sign In
       </button>
+      <br />
+      {userMap.size() > 0 && (
+        <div>
+          <br />
+          <span>Users:&nbsp;</span>
+          {Array.from(userMap.values(), (u) => (
+            <>
+              <button key={u.id} onClick={() => dispatch(signIn(u.name))}>
+                {u.name}
+              </button>
+              &nbsp;
+            </>
+          ))}
+        </div>
+      )}
     </div>
   );
 });
diff --git a/examples/TodoMVC/src/main.tsx b/examples/TodoMVC/src/main.tsx
index 47c6dfe..c2fdc60 100644
--- a/examples/TodoMVC/src/main.tsx
+++ b/examples/TodoMVC/src/main.tsx
@@ -4,21 +4,11 @@ import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import { App } from './App';
 import './index.css';
-import { hashCode } from './store/todo.boxes';
-import { currentUserIdBox, userMapBox } from './store/user.boxes';
-
-const userId = hashCode('Amos');
 
 const store = createStore(
   {
     name: 'Amos - TodoMVC',
     devtools: true,
-    preloadedState: {
-      [currentUserIdBox.key]: userId,
-      [userMapBox.key]: {
-        [userId]: { id: userId, name: 'Amos' },
-      },
-    },
   },
   withPersist({
     storage: new IDBStorage('todo', 'todo'),
diff --git a/examples/TodoMVC/src/store/user.boxes.ts b/examples/TodoMVC/src/store/user.boxes.ts
index 95ed115..e4180ac 100644
--- a/examples/TodoMVC/src/store/user.boxes.ts
+++ b/examples/TodoMVC/src/store/user.boxes.ts
@@ -4,6 +4,7 @@
  */
 
 import { box, Record, recordMapBox, signal } from 'amos';
+import { hashCode } from './todo.boxes';
 
 export interface UserModel {
   id: number;
@@ -24,7 +25,9 @@ export const signOutSignal = signal<SignOutEvent>('user.signOut');
 
 export const signInSignal = signal<UserModel>('user.signIn');
 
-export const userMapBox = recordMapBox('users', UserRecord, 'id');
+export const userMapBox = recordMapBox('users', UserRecord, 'id').setInitialState((s) => {
+  return s.mergeItem(hashCode('Amos'), { name: 'Amos' });
+});
 
 userMapBox.subscribe(signOutSignal, (state, data) => {
   if (!data.keepData) {
@@ -33,4 +36,4 @@ userMapBox.subscribe(signOutSignal, (state, data) => {
   return state;
 });
 
-export const currentUserIdBox = box('users.currentUserId', 0);
+export const currentUserIdBox = box('users.currentUserId', hashCode('Amos'));