fix user rerender race condition

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,