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

Author: acrazing

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

scripts/check_deps.ts

@@ -21,7 +21,7 @@ export const check_deps = autorun(
       const pj = await fs.readJSON(`packages/${pkg}/package.json`);
       const files = await glob(`packages/${pkg}/src/**/*.{ts,tsx}`);
       for (const f of files) {
-        const isDev = f.includes('.spec.');
+        const isDev = f.includes('.spec.') || f.includes('test');
         const d = await fs.readFile(f, 'utf-8');
         const ms = d.matchAll(/ from ['"]([^'"]+)['"]/g);
         for (const m of ms) {
@@ -76,7 +76,7 @@ export const check_deps = autorun(
           console.error(`%s should not dev dependents on amos.`, pkg);
         }
         if (pkg === 'amos-utils') {
-          const bad = deps.concat(devDeps).filter((d) => d.startsWith('amos'));
+          const bad = deps.filter((d) => d.startsWith('amos'));
           if (bad.length) {
             console.error('amos-utils no amos deps: ', bad.join(', '));
           }