[#495]: remove sagas from rooms duck

apps/ligretto-frontend/package.json

@@ -60,7 +60,7 @@
     "react-redux": "^8.0.5",
     "react-router": "^6.8.1",
     "react-router-dom": "^6.8.1",
-    "redux-first-history": "^5.1.1",
+    "redux-first-history": "^5.2.0",
     "redux-saga": "^1.3.0",
     "socket.io-client": "^4.5.1"
   },

apps/ligretto-frontend/src/app/store/index.ts

@@ -6,13 +6,17 @@ import { IS_DEV_MODE } from '#shared/constants/config'
 import rootSaga from './rootSaga'
 import { routerMiddleware, createReduxHistory } from './reduxHistoryContext'
 import { rootReducer } from './rootReducer'
+import { listenerMiddleware } from './listenerModdleware'
 
 const sagaMiddleware = createSagaMiddleware()
 
 export const store = configureStore({
   reducer: rootReducer,
   devTools: IS_DEV_MODE,
-  middleware: getDefaultMiddleware => getDefaultMiddleware({ serializableCheck: false, thunk: false }).concat([routerMiddleware, sagaMiddleware]),
+  middleware: getDefaultMiddleware =>
+    getDefaultMiddleware({ serializableCheck: false, thunk: false })
+      .concat([routerMiddleware, sagaMiddleware])
+      .prepend(listenerMiddleware.middleware),
 })
 
 export const history = createReduxHistory(store)

apps/ligretto-frontend/src/app/store/listenerModdleware.ts

@@ -0,0 +1,10 @@
+import { createListenerMiddleware } from '@reduxjs/toolkit'
+
+import { addListeners as roomsAddListener } from '#ducks/rooms'
+import type { All } from '#types/store'
+
+export const listenerMiddleware = createListenerMiddleware()
+
+const startAppListening = listenerMiddleware.startListening.withTypes<All>()
+
+roomsAddListener(startAppListening)

apps/ligretto-frontend/src/app/store/rootSaga.ts

@@ -1,14 +1,13 @@
 import { all, fork, takeLatest } from 'redux-saga/effects'
 
 import { socketSaga } from '#entities/socket'
-import { roomsRootSaga } from '#ducks/rooms'
 import { gameRootSaga } from '#ducks/game'
 import { usersRootSaga } from '#ducks/users'
 import { authRootSaga, getMeSuccess } from '#ducks/auth'
 import { analyticsRootSaga } from '#ducks/analytics/sagas'
 
 export default function* rootSaga() {
-  yield all([fork(roomsRootSaga), fork(analyticsRootSaga), fork(gameRootSaga), fork(authRootSaga), fork(usersRootSaga), fork(blockedSocketSaga)])
+  yield all([fork(analyticsRootSaga), fork(gameRootSaga), fork(authRootSaga), fork(usersRootSaga), fork(blockedSocketSaga)])
 }
 
 function* blockedSocketSaga() {

apps/ligretto-frontend/src/ducks/auth/authSlice.ts

@@ -14,8 +14,7 @@ export const authSlice = createSlice({
   name: '@@auth',
   reducers: {
     logout: () => authInitialState,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    getMeRequest: (state, { payload }: PayloadAction<{ token?: string }>) => {
+    getMeRequest: (state, _action: PayloadAction<{ token?: string }>) => {
       state.isLoading = true
     },
     getMeSuccess: (state, { payload }: PayloadAction<{ userId: string; token: string; isTemporary: boolean }>) => {

apps/ligretto-frontend/src/ducks/rooms/index.ts

@@ -1,3 +1,3 @@
 export * from './slice'
-export { roomsRootSaga } from './sagas'
 export * from './selectors'
+export { addListeners } from './listeners'

apps/ligretto-frontend/src/ducks/rooms/listeners.ts

@@ -0,0 +1,80 @@
+import { type TypedStartListening } from '@reduxjs/toolkit'
+import { replace, push } from 'redux-first-history'
+import { generatePath } from 'react-router-dom'
+
+import {
+  getRoomsEmitAction,
+  createRoomEmitAction,
+  updateRoomsAction as updateRoomsServerAction,
+  removeRoomAction as removeRoomServerAction,
+  connectToRoomErrorAction,
+  connectToRoomEmitAction,
+  createRoomErrorAction,
+  createRoomSuccessAction,
+} from '@memebattle/ligretto-shared'
+
+import { routes } from '#shared/constants'
+import type { RoomsState } from './slice'
+import { getRoomsAction, createRoomAction } from './slice'
+import { connectToRoomAction, updateRoomsAction, setErrorRoomsAction, removeRoomAction } from './slice'
+
+export function addListeners(startListener: TypedStartListening<{ rooms: RoomsState }>) {
+  startListener({
+    actionCreator: getRoomsAction,
+    effect: (_action, listenerApi) => {
+      listenerApi.dispatch(getRoomsEmitAction())
+    },
+  })
+
+  startListener({
+    actionCreator: createRoomAction,
+    effect: (action, listenerApi) => {
+      listenerApi.dispatch(createRoomEmitAction(action.payload))
+    },
+  })
+
+  startListener({
+    actionCreator: connectToRoomAction,
+    effect: (action, listenerApi) => {
+      listenerApi.dispatch(connectToRoomEmitAction(action.payload))
+    },
+  })
+
+  startListener({
+    actionCreator: updateRoomsServerAction,
+    effect: (action, listenerApi) => {
+      const rooms = action.payload.rooms
+      listenerApi.dispatch(updateRoomsAction({ rooms }))
+    },
+  })
+
+  startListener({
+    actionCreator: removeRoomServerAction,
+    effect: (action, listenerApi) => {
+      const uuid = action.payload.uuid
+      listenerApi.dispatch(removeRoomAction({ uuid }))
+    },
+  })
+
+  startListener({
+    actionCreator: connectToRoomErrorAction,
+    effect: (_action, listenerApi) => {
+      listenerApi.dispatch(replace(routes.HOME))
+    },
+  })
+
+  startListener({
+    actionCreator: createRoomSuccessAction,
+    effect: (action, listenerApi) => {
+      listenerApi.dispatch(setErrorRoomsAction({ error: null }))
+      listenerApi.dispatch(push(generatePath(routes.GAME, { roomUuid: action.payload.game.id })))
+    },
+  })
+
+  startListener({
+    actionCreator: createRoomErrorAction,
+    effect: (action, listenerApi) => {
+      listenerApi.dispatch(setErrorRoomsAction({ error: action.payload }))
+    },
+  })
+}

apps/ligretto-frontend/src/ducks/rooms/slice.ts

@@ -7,7 +7,7 @@ export const roomsEntityAdapter = createEntityAdapter({
   selectId: (room: Room) => room.uuid,
 })
 
-interface RoomsState extends ReturnType<typeof roomsEntityAdapter.getInitialState> {
+export interface RoomsState extends ReturnType<typeof roomsEntityAdapter.getInitialState> {
   isLoading: boolean
   search: string
   error: CreateRoomError | null

apps/ligretto-gameplay-backend/src/controllers/__tests__/games-contoller.spec.ts

@@ -5,7 +5,7 @@ import {
   createRoomErrorAction,
   CreateRoomErrorCode,
   createRoomSuccessAction,
-  updateRooms,
+  updateRoomsAction,
   connectToRoomEmitAction,
   connectToRoomErrorAction,
   updateGameAction,
@@ -62,7 +62,7 @@ describe('Games Controller', () => {
       expect(socketMockImpl.emit).toBeCalledTimes(2)
       expect(socketMockImpl.emit).toBeCalledWith('event', createRoomSuccessAction({ game: state.games[gameId] }))
       expect(socketMockImpl.to).toBeCalledWith(SOCKET_ROOM_LOBBY)
-      expect(socketMockImpl.emit).toBeCalledWith('event', updateRooms({ rooms: [gameToRoom(state.games[gameId])] }))
+      expect(socketMockImpl.emit).toBeCalledWith('event', updateRoomsAction({ rooms: [gameToRoom(state.games[gameId])] }))
     })
 
     it('Should emit createRoomErrorAction if room already exists', async () => {
@@ -216,7 +216,7 @@ describe('Games Controller', () => {
       const state = await database.get(storage => storage)
       expect(state).toMatchSnapshot()
       expect(socketOne.to).toBeCalledTimes(4)
-      expect(socketOne.emit).toBeCalledWith('event', updateRooms({ rooms: [gameToRoom(state.games[roomUuid])] }))
+      expect(socketOne.emit).toBeCalledWith('event', updateRoomsAction({ rooms: [gameToRoom(state.games[roomUuid])] }))
       expect(socketOne.emit).toBeCalledWith('event', updateGameAction(state.games[roomUuid]))
     })
 

apps/ligretto-gameplay-backend/src/controllers/games-controller.ts

@@ -19,7 +19,7 @@ import {
   getRoomsEmitAction,
   setPlayerStatusEmitAction,
   updateGameAction,
-  updateRooms,
+  updateRoomsAction,
   userJoinToRoomAction,
 } from '@memebattle/ligretto-shared'
 import { SOCKET_ROOM_LOBBY } from '../config'
@@ -46,13 +46,13 @@ export class GamesController extends Controller {
     }
 
     socket.emit('event', createRoomSuccessAction({ game: newGame }))
-    socket.to(SOCKET_ROOM_LOBBY).emit('event', updateRooms({ rooms: [gameToRoom(newGame)] }))
+    socket.to(SOCKET_ROOM_LOBBY).emit('event', updateRoomsAction({ rooms: [gameToRoom(newGame)] }))
   }
 
   private async getRooms(socket: Socket) {
     socket.join(SOCKET_ROOM_LOBBY)
     const games = await this.gameService.getGames()
-    socket.emit('event', updateRooms({ rooms: games.map(gameToRoom) }))
+    socket.emit('event', updateRoomsAction({ rooms: games.map(gameToRoom) }))
   }
 
   /**
@@ -97,7 +97,7 @@ export class GamesController extends Controller {
         ? await this.gameService.addSpectator(roomUuid, { id: userId })
         : await this.gameService.addPlayer(roomUuid, { id: userId })
 
-    socket.to(SOCKET_ROOM_LOBBY).emit('event', updateRooms({ rooms: [gameToRoom(updatedGame)] }))
+    socket.to(SOCKET_ROOM_LOBBY).emit('event', updateRoomsAction({ rooms: [gameToRoom(updatedGame)] }))
     socket.to(roomUuid).emit('event', updateGameAction(updatedGame))
     socket.to(roomUuid).emit('event', userJoinToRoomAction({ userId }))
     socket.emit('event', connectToRoomSuccessAction({ game: updatedGame }))
@@ -137,7 +137,7 @@ export class GamesController extends Controller {
 
     if (game) {
       socket.to(game.id).emit('event', updateGameAction(game))
-      socket.to(SOCKET_ROOM_LOBBY).emit('event', updateRooms({ rooms: [gameToRoom(game)] }))
+      socket.to(SOCKET_ROOM_LOBBY).emit('event', updateRoomsAction({ rooms: [gameToRoom(game)] }))
     } else {
       socket.to(SOCKET_ROOM_LOBBY).emit('event', removeRoomAction({ uuid: user.currentGameId }))
     }

packages/ligretto-shared/src/actions.ts

@@ -9,7 +9,7 @@ export const createRoomEmitAction = createAction<dto.CreateGame>('@@rooms/WEBSOC
 
 export const getRoomsEmitAction = createAction('@@rooms/WEBSOCKET/GET_ROOMS')
 
-export const updateRooms = createAction<dto.UpdateRooms>('@@rooms/SERVER/UPDATE_ROOMS_LIST')
+export const updateRoomsAction = createAction<dto.UpdateRooms>('@@rooms/SERVER/UPDATE_ROOMS_LIST')
 
 export const removeRoomAction = createAction<dto.RemoveRoom>('@@rooms/SERVER/REMOVE_ROOM_FROM_LIST')
 

yarn.lock

@@ -3763,7 +3763,7 @@ __metadata:
     react-router: ^6.8.1
     react-router-dom: ^6.8.1
     react-test-renderer: ^16.9.0
-    redux-first-history: ^5.1.1
+    redux-first-history: ^5.2.0
     redux-saga: ^1.3.0
     sass: ^1.53.0
     socket.io-client: ^4.5.1
@@ -20448,13 +20448,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"redux-first-history@npm:^5.1.1":
-  version: 5.1.1
-  resolution: "redux-first-history@npm:5.1.1"
+"redux-first-history@npm:^5.2.0":
+  version: 5.2.0
+  resolution: "redux-first-history@npm:5.2.0"
   peerDependencies:
     history: ^4.7.2 || ^5.0
-    redux: ^3.6.0 || ^4.0.0
-  checksum: a13648752aafdbc5f537ccbcae54d7894d9415820a6f0a687f788fdb5fba1dc8d8593b89be8efd29ce551b407f27510c9bfe6c659cbce8d37717fae0482cf394
+    redux: ^3.6.0 || ^4.0.0 || ^5.0.0
+  checksum: 81e7d50f409f5b1cd258448f4ca7bfb66be3a6b2bd16aa9a8d5615da7f4afbc2f662f897dfb71f8e32eb7756c2d037661ad1c671e2bbdc09606d38719b234d3d
   languageName: node
   linkType: hard