diff --git a/src/app/store.ts b/src/app/store.ts index 25f9743..4e53622 100644 --- a/src/app/store.ts +++ b/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, + ]) ), }); diff --git a/src/components/RoomList.tsx b/src/components/RoomList.tsx index 9245f03..eb7a4e1 100644 --- a/src/components/RoomList.tsx +++ b/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 = ({ rooms }) => { const dispatch = useDispatch(); const refresh = () => { - dispatch( - socketSendMessage({ - variant: "RoomListRequest", - fields: [], - }) - ); + dispatch(roomGetAll()); }; return ; diff --git a/src/modules/room/message.ts b/src/modules/room/message.ts new file mode 100644 index 0000000..bc91c59 --- /dev/null +++ b/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()); + } + }, +}; diff --git a/src/modules/room/slice.ts b/src/modules/room/slice.ts index dc2fb8f..115c3ee 100644 --- a/src/modules/room/slice.ts +++ b/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; diff --git a/src/modules/websocket/middleware.ts b/src/modules/websocket/middleware.ts index 68e9c81..e00faa3 100644 --- a/src/modules/websocket/middleware.ts +++ b/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); diff --git a/src/modules/websocket/slice.ts b/src/modules/websocket/slice.ts index 287a331..32ecfeb 100644 --- a/src/modules/websocket/slice.ts +++ b/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("socketSendMessage"); - export default socketSlice.reducer;