docs(todo): no preload, show users in login page

examples/TodoMVC/src/components/SignIn.tsx

@@ -3,20 +3,37 @@
  * @author junbao <[email protected]>
  */
 
-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)} />
       &nbsp;
       <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>
   );
 });

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'),

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'));