Use socket message middleware for rooms.

src/app/store.ts

@@ -14,6 +14,7 @@ import counterReducer from "../features/counter/counterSlice";
 //
 import { loginSocketMessageMiddleware } from "../modules/login/message";
 import loginReducer from "../modules/login/slice";
+import { roomSocketMessageMiddleware } from "../modules/room/message";
 import roomReducer from "../modules/room/slice";
 import makeSocketMiddleware from "../modules/websocket/middleware";
 import socketReducer from "../modules/websocket/slice";
@@ -36,7 +37,10 @@ export const store = configureStore({
   reducer: rootReducer,
   middleware: (getDefaultMiddleware) =>
     getDefaultMiddleware().concat(
-      makeSocketMiddleware([loginSocketMessageMiddleware])
+      makeSocketMiddleware([
+        loginSocketMessageMiddleware,
+        roomSocketMessageMiddleware,
+      ])
     ),
 });
 

src/components/RoomList.tsx

@@ -3,20 +3,14 @@ import { useDispatch } from "react-redux";
 
 import RoomComponent from "./Room";
 import SearchableList from "./SearchableList";
-import { RoomSliceState } from "../modules/room/slice";
-import { socketSendMessage } from "../modules/websocket/slice";
+import { RoomSliceState, roomGetAll } from "../modules/room/slice";
 
 const SearchableRoomList = SearchableList(RoomComponent);
 
 const RoomList: FC<RoomSliceState> = ({ rooms }) => {
   const dispatch = useDispatch();
   const refresh = () => {
-    dispatch(
-      socketSendMessage({
-        variant: "RoomListRequest",
-        fields: [],
-      })
-    );
+    dispatch(roomGetAll());
   };
 
   return <SearchableRoomList id="room-list" map={rooms} refresh={refresh} />;

src/modules/room/message.ts

@@ -0,0 +1,41 @@
+import { AppDispatch } from "../../app/store";
+import { roomGetAll, roomSetAll } from "./slice";
+import { SocketMessage, SocketMessageMiddleware } from "../websocket/message";
+
+function roomListRequest(): SocketMessage {
+  return {
+    variant: "RoomListRequest",
+    fields: [],
+  };
+}
+
+function handleRoomListResponse(dispatch: AppDispatch, outerFields: any[]) {
+  if (outerFields.length !== 1) {
+    console.log("RoomListResponse has wrong number of fields:", outerFields);
+    return;
+  }
+
+  const { rooms } = outerFields[0];
+  if (rooms === undefined) {
+    console.log("RoomListResponse field has wrong shape:", outerFields[0]);
+    return;
+  }
+
+  dispatch(roomSetAll(rooms));
+}
+
+export const roomSocketMessageMiddleware: SocketMessageMiddleware = {
+  handleMessage: (dispatch, { variant, fields }) => {
+    switch (variant) {
+      case "RoomListResponse":
+        handleRoomListResponse(dispatch, fields);
+        break;
+    }
+  },
+
+  handleAction: (send, action) => {
+    if (roomGetAll.match(action)) {
+      send(roomListRequest());
+    }
+  },
+};

src/modules/room/slice.ts

@@ -85,10 +85,12 @@ export const roomSlice = createSlice({
         state.rooms[room.name] = room;
       }
     },
+    roomGetAll: () => {},
   },
 });
 
-export const { roomSetMembership, roomMessage, roomSetAll } = roomSlice.actions;
+export const { roomSetMembership, roomMessage, roomGetAll, roomSetAll } =
+  roomSlice.actions;
 
 export function selectAllRooms(state: RootState): RoomMap {
   return state.rooms.rooms;

src/modules/websocket/middleware.ts

@@ -12,13 +12,7 @@ import {
   SocketMessageMiddleware,
   SocketMessageSender,
 } from "./message";
-import {
-  socketOpen,
-  socketOpened,
-  socketClose,
-  socketClosed,
-  socketSendMessage,
-} from "./slice";
+import { socketOpen, socketOpened, socketClose, socketClosed } from "./slice";
 import { AppDispatch, RootState } from "../../app/store";
 
 // The WebSocket singleton.
@@ -111,13 +105,6 @@ function makeMiddleware(
         } else {
           console.log("Ignoring socketClose action, socket is already closed.");
         }
-      } else if (socketSendMessage.match(action)) {
-        if (socket !== undefined) {
-          console.log("WebSocket sending message", action.payload);
-          socket.send(serializeMessage(action.payload));
-        } else {
-          console.log("Ignoring socketSendMessage action, socket is closed.");
-        }
       } else if (socket !== undefined) {
         for (const middleware of messageMiddlewares) {
           middleware.handleAction(socketMessageSender(socket), action);

src/modules/websocket/slice.ts

@@ -1,6 +1,5 @@
-import { createAction, createSlice, PayloadAction } from "@reduxjs/toolkit";
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 
-import { SocketMessage } from "./message";
 import { RootState } from "../../app/store";
 
 export enum SocketState {
@@ -45,8 +44,4 @@ export const { socketOpen, socketOpened, socketClose, socketClosed } =
 
 export const selectSocket = (state: RootState) => state.socket;
 
-// TODO: Remove this in favor of message middlewares.
-export const socketSendMessage =
-  createAction<SocketMessage>("socketSendMessage");
-
 export default socketSlice.reducer;