Webatrice: Adding joined game to persistence layer (#5068)

* Adding joined game to persistence layer

* Linting fixes

webclient/src/store/rooms/rooms.actions.tsx

@@ -62,4 +62,10 @@ export const Actions = {
     type: Types.GAME_CREATED,
     roomId
   }),
+
+  joinedGame: (roomId, gameId) => ({
+    type: Types.JOINED_GAME,
+    roomId,
+    gameId
+  }),
 }

webclient/src/store/rooms/rooms.dispatch.tsx

@@ -51,4 +51,8 @@ export const Dispatch = {
   gameCreated: (roomId) => {
     store.dispatch(Actions.gameCreated(roomId));
   },
+
+  joinedGame: (roomId, gameId) => {
+    store.dispatch(Actions.joinedGame(roomId, gameId));
+  }
 }

webclient/src/store/rooms/rooms.interfaces.tsx

@@ -1,8 +1,10 @@
-import { GameSortField, Room, SortBy, UserSortField } from 'types';
+import { GameSortField, Room, Game, SortBy, UserSortField } from 'types';
 
 export interface RoomsState {
   rooms: RoomsStateRooms;
-  joined: JoinedRooms;
+  games: RoomsStateGames;
+  joinedRoomIds: JoinedRooms;
+  joinedGameIds: JoinedGames;
   messages: RoomsStateMessages;
   sortGamesBy: RoomsStateSortGamesBy;
   sortUsersBy: RoomsStateSortUsersBy;
@@ -12,10 +14,22 @@ export interface RoomsStateRooms {
   [roomId: number]: Room;
 }
 
+export interface RoomsStateGames {
+  [roomId: number]: {
+    [gameId: number]: Game;
+  };
+}
+
 export interface JoinedRooms {
   [roomId: number]: boolean;
 }
 
+export interface JoinedGames {
+  [roomId: number]: {
+    [gameId: number]: boolean;
+  };
+}
+
 export interface RoomsStateMessages {
   [roomId: number]: Message[];
 }

webclient/src/store/rooms/rooms.reducer.tsx

@@ -9,7 +9,9 @@ import { MAX_ROOM_MESSAGES, Types } from './rooms.types';
 
 const initialState: RoomsState = {
   rooms: {},
-  joined: {},
+  games: {},
+  joinedRoomIds: {},
+  joinedGameIds: {},
   messages: {},
   sortGamesBy: {
     field: GameSortField.START_TIME,
@@ -56,7 +58,7 @@ export const roomsReducer = (state = initialState, action: any) => {
 
     case Types.JOIN_ROOM: {
       const { roomInfo } = action;
-      const { joined, rooms, sortGamesBy, sortUsersBy } = state;
+      const { joinedRoomIds, rooms, sortGamesBy, sortUsersBy } = state;
 
       const { roomId } = roomInfo;
 
@@ -83,8 +85,8 @@ export const roomsReducer = (state = initialState, action: any) => {
           }
         },
 
-        joined: {
-          ...joined,
+        joinedRoomIds: {
+          ...joinedRoomIds,
           [roomId]: true
         },
       }
@@ -92,10 +94,10 @@ export const roomsReducer = (state = initialState, action: any) => {
 
     case Types.LEAVE_ROOM: {
       const { roomId } = action;
-      const { joined, messages } = state;
+      const { joinedRoomIds, messages } = state;
 
       const _joined = {
-        ...joined
+        ...joinedRoomIds
       };
 
       const _messages = {
@@ -108,7 +110,7 @@ export const roomsReducer = (state = initialState, action: any) => {
       return {
         ...state,
 
-        joined: _joined,
+        joinedRoomIds: _joined,
         messages: _messages,
       }
     }
@@ -302,6 +304,22 @@ export const roomsReducer = (state = initialState, action: any) => {
       }
     }
 
+    case Types.JOINED_GAME: {
+      const { gameId, roomId } = action;
+      const { joinedGameIds } = state;
+
+      return {
+        ...state,
+        joinedGameIds: {
+          ...joinedGameIds,
+          [roomId]: {
+            ...joinedGameIds[roomId],
+            [gameId]: true,
+          }
+        }
+      }
+    }
+
     default:
       return state;
   }

webclient/src/store/rooms/rooms.selectors.tsx

@@ -7,17 +7,25 @@ interface State {
 
 export const Selectors = {
   getRooms: ({ rooms }: State) => rooms.rooms,
+  getGames: ({ rooms }: State) => rooms.games,
   getRoom: ({ rooms }: State, id: number) =>
     _.find(rooms.rooms, ({ roomId }) => roomId === id),
-  getJoined: ({ rooms }: State) => rooms.joined,
+  getJoinedRoomIds: ({ rooms }: State) => rooms.joinedRoomIds,
+  getJoinedGameIds: ({ rooms }: State) => rooms.joinedGameIds,
   getMessages: ({ rooms }: State) => rooms.messages,
   getSortGamesBy: ({ rooms: { sortGamesBy } }: State) => sortGamesBy,
   getSortUsersBy: ({ rooms: { sortUsersBy } }: State) => sortUsersBy,
 
   getJoinedRooms: (state: State) => {
-    const joined = Selectors.getJoined(state);
+    const joined = Selectors.getJoinedRoomIds(state);
     return _.filter(Selectors.getRooms(state), room => joined[room.roomId]);
   },
+
+  getJoinedGames: (state: State, roomId: number) => {
+    const joined = Selectors.getJoinedGameIds(state)[roomId];
+    return _.filter(Selectors.getGames(state)[roomId], game => joined[game.gameId]);
+  },
+
   getRoomMessages: (state: State, roomId: number) => Selectors.getMessages(state)[roomId],
   getRoomGames: (state: State, roomId: number) => Selectors.getRooms(state)[roomId].gameList,
   getRoomUsers: (state: State, roomId: number) => Selectors.getRooms(state)[roomId].userList

webclient/src/store/rooms/rooms.types.tsx

@@ -10,6 +10,7 @@ export const Types = {
   SORT_GAMES: '[Rooms] Sort Games',
   REMOVE_MESSAGES: '[Rooms] Remove Messages',
   GAME_CREATED: '[Rooms] Game Created',
+  JOINED_GAME: '[Rooms] Joined Game',
 };
 
 export const MAX_ROOM_MESSAGES = 1000;

webclient/src/websocket/persistence/RoomPersistence.ts

@@ -58,6 +58,6 @@ export class RoomPersistence {
   }
 
   static joinedGame(roomId: number, gameId: number) {
-    console.log('joinedGame', roomId, gameId);
+    RoomsDispatch.joinedGame(roomId, gameId);
   }
 }