Define user slice.

src/app/store.ts

@@ -6,24 +6,20 @@ import {
 } from "@reduxjs/toolkit";
 
 import counterReducer from "features/counter/counterSlice";
-// TODO: Rework these to use a slice, otherwise redux complains about
-// non-serializable Immutable.js types.
-//
-// import users from "../reducers/users";
-//
 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/socket/middleware";
 import socketReducer from "modules/socket/slice";
+import userReducer from "modules/user/slice";
 
 const rootReducer = combineReducers({
   counter: counterReducer,
   login: loginReducer,
   rooms: roomReducer,
   socket: socketReducer,
-  //users,
+  users: userReducer,
 });
 
 // Define this before defining `store`, to break a circular type reference:

src/modules/user/slice.ts

@@ -0,0 +1,74 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+
+import { RootState } from "app/store";
+
+export enum UserStatus {
+  Offline,
+  Away,
+  Online,
+}
+
+export interface UserState {
+  name: string;
+  averageSpeed: number;
+  numDownloads: number;
+  numFiles: number;
+  numFolders: number;
+  numFreeSlots: number;
+  country: string;
+}
+
+export interface UserMap {
+  [name: string]: UserState;
+}
+
+export interface RoomSliceState {
+  users: UserMap;
+}
+
+const initialState: UserSliceState = {
+  // TODO: Set to {} once UserListResponse actually comes. Until then, it helps
+  // to have some state that we can observe in the UI.
+  rooms: {
+    alice: {
+      name: "alice",
+      averageSpeed: 1,
+      numDownloads: 2,
+      numFiles: 3,
+      numFolders: 4,
+      numFreeSlots: 5,
+      country: 6,
+    },
+    bob: {
+      name: "bob",
+      averageSpeed: 1,
+      numDownloads: 2,
+      numFiles: 3,
+      numFolders: 4,
+      numFreeSlots: 5,
+      country: 6,
+    },
+  },
+};
+
+export const userSlice = createSlice({
+  name: "users",
+  initialState,
+  reducers: {
+    userSetAll: (state: UserSliceState, action: PayloadAction<UserState[]>) => {
+      state.users = {};
+      for (const user of action.payload) {
+        state.users[user.name] = user;
+      }
+    },
+    userGetAll: () => {},
+  },
+});
+
+export const { userGetAll, userSetAll } = userSlice.actions;
+
+export function selectAllUsers(state: RootState): UserMap {
+  return state.users.users;
+}
+
+export default userSlice.reducer;