fix user rerender race condition

api/src/rpc.ts

@@ -66,6 +66,9 @@ export default function createRpc(log: Log, pg: Pg, user: User, ws, discogs, off
     }
 
     async function onConnection() {
+        const userMsg: UserMessage = [RpcMessageType.User, user];
+        send(userMsg);
+
         const wants = await pg.userWants(user);
         const wantsMsg: WantsMessage = [RpcMessageType.Wants, wants];
         send(wantsMsg);
@@ -93,17 +96,20 @@ export enum RpcMessageType {
     Bundles = 'Bundles',
     Offers = 'Offers',
     List = 'List',
+    Wants = 'Wants',
+    User = 'User',
+
     Error = 'Error',
 
     OfferStatusSet = 'OfferStatusSet',
 
-    Wants = 'Wants',
     WantRm = 'WantRm',
 }
 
 type ErrorMessage = [RpcMessageType.Error, string];
 type PongMessage = [RpcMessageType.Pong, []];
 type PingMessage = [RpcMessageType.Ping, []];
+type UserMessage = [RpcMessageType.User, User];
 type WantsMessage = [RpcMessageType.Wants, Want[]];
 type OffersMessage = [RpcMessageType.Offers, Offer[]];
 type OfferStatusSetMessage = [RpcMessageType.OfferStatusSet, Offer[]];
@@ -112,6 +118,8 @@ export type RpcMessage =
     PingMessage |
     PongMessage |
 
+    UserMessage |
+
     WantsMessage |
 
     OffersMessage |

client/src/app.tsx

@@ -1,5 +1,6 @@
 import { h } from 'preact';
 import { useState, useEffect } from 'preact/hooks';
+import { useSelector, useDispatch } from 'react-redux'
 import { Route, Router, route } from 'preact-router';
 import { Provider } from 'react-redux'
 
@@ -15,38 +16,41 @@ import Login from './routes/login';
 import Search from './routes/search';
 import List from './routes/list';
 
-import store, { userState, wsState } from './store'
+import store, { userState, wsState, State } from './store'
 
-const ws = createWs(store);
-ws.connect();
+const Main = () => {
+    const dispatch = useDispatch()
 
-// dodgy, doesn't cause the header to rerender
-async function init() {
-    const [error, user] = await http.getLogin();
-    if (error) return route('/login');
-    route('/bundles');
-    store.dispatch(userState.actions.set(user));
-    store.dispatch(wsState.actions.set(ws));
-}
-init();
+    // i have no idea why this is needed,
+    // but it makes sure the user changes actually rerender
+    useEffect(() => {
+        const ws = createWs(dispatch);
+        ws.connect();
+        dispatch(wsState.actions.set(ws));
+    }, [dispatch])
+
+    return (
+        <main id="app">
+            <Header />
+            <Router>
+                <Route path="/" component={Home} />
+                <Route path="/login" component={Login} mode="login" />
+                <Route path="/register" component={Login} mode="register" />
+                <Route path="/search" component={Search} />
+                <Route path="/list" component={List} />
+
+                {/* ACP */}
+                <Route path="/bundles" component={Bundles} />
+                <Route path="/offers/acp" component={Admin} />
+            </Router>
+        </main>
+    );
+};
 
 const App = () => {
     return (
         <Provider store={store}>
-            <main id="app">
-                <Header />
-                <Router>
-                    <Route path="/" component={Home} />
-                    <Route path="/login" component={Login} mode="login" />
-                    <Route path="/register" component={Login} mode="register" />
-                    <Route path="/search" component={Search} />
-                    <Route path="/list" component={List} />
-
-                    {/* ACP */}
-                    <Route path="/bundles" component={Bundles} />
-                    <Route path="/offers/acp" component={Admin} />
-                </Router>
-            </main>
+            <Main />
         </Provider>
     );
 }

client/src/ws.ts

@@ -1,8 +1,8 @@
+import { wantsState, wsState, userState } from './store'
+
 const SOCKET_URL = `${window.location.protocol === 'https:' ? 'wss://' : 'ws://'}${window.location.host}/api/ws`;
 
-import { wantsState, wsState } from './store'
-
-export default function createSocket(store) {
+export default function createSocket(dispatch) {
     let ws;
 
     // -------------
@@ -42,8 +42,12 @@ export default function createSocket(store) {
     // -------------
     //   Incoming
     // -------------
+    function onUser(user) {
+        dispatch(userState.actions.set(user));
+    }
+
     function onWants(wants) {
-        store.dispatch(wantsState.actions.set(wants));
+        dispatch(wantsState.actions.set(wants));
     }
 
     // -------------
@@ -53,6 +57,7 @@ export default function createSocket(store) {
     // this object wraps the reply types to a function
     const handlers = {
         Wants: onWants,
+        User: onUser,
 
         Pong: onPong,
         Error: errHandler,