Fix TypeScript errors.

src/components/SearchableList.tsx

@@ -1,4 +1,10 @@
-import { Component, FC, ReactEventHandler, useState } from "react";
+import {
+  ChangeEvent,
+  FC,
+  ReactElement,
+  ReactEventHandler,
+  useState,
+} from "react";
 
 interface ItemProps<Item> {
   name: string;
@@ -8,19 +14,19 @@ interface ItemProps<Item> {
 interface ListProps<Item> {
   title: string;
   onRefresh: ReactEventHandler;
-  component: Component<ItemProps<Item>>;
+  component: FC<ItemProps<Item>>;
   map: { [key: string]: Item };
 }
 
-const SearchableList: FC<ListProps<Item>> = ({
+function SearchableList<Item>({
   title,
   onRefresh,
   component,
   map,
-}) => {
+}: ListProps<Item>): ReactElement {
   const [filter, setFilter] = useState<string>("");
 
-  const onChange: ReactEventHandler = (event) => {
+  const onChange = (event: ChangeEvent<HTMLInputElement>) => {
     setFilter(event.target.value);
   };
 
@@ -56,6 +62,6 @@ const SearchableList: FC<ListProps<Item>> = ({
       <ul className="flex-1 flex flex-col min-h-0 overflow-auto">{children}</ul>
     </div>
   );
-};
+}
 
 export default SearchableList;

src/modules/room/RoomDetails.tsx

@@ -1,6 +1,6 @@
 import { FC } from "react";
 
-import { RoomState, RoomMembership } from "modules/room/slice";
+import { RoomState } from "modules/room/slice";
 
 const Members: FC<Props> = ({ room }) => {
   const children = [];

src/modules/room/RoomUserList.js

@@ -1,23 +0,0 @@
-import { FC } from "react";
-
-interface Props {
-  users: string[];
-}
-
-const RoomUserList: FC<Props> = ({ users }) => {
-  // Append all users
-  const children = [];
-  let i = 0;
-  for (const user of users) {
-    children.push(
-      <li key={i} className="room-user">
-        {user}
-      </li>
-    );
-    i++;
-  }
-
-  return <ul id="room-user-list">{children}</ul>;
-};
-
-export default RoomUserList;

src/modules/room/message.ts

@@ -1,6 +1,7 @@
 import { AppDispatch } from "app/store";
 import {
   RoomMembership,
+  RoomMessage,
   RoomMessagePayload,
   RoomState,
   roomGetAll,
@@ -10,7 +11,11 @@ import {
   roomSetAll,
   roomSetState,
 } from "modules/room/slice";
-import { SocketMessage, SocketMessageMiddleware } from "modules/socket/message";
+import {
+  SocketMessage,
+  SocketMessageMiddleware,
+  SocketMessageSender,
+} from "modules/socket/message";
 
 function convertMembership(membership: string): RoomMembership {
   switch (membership) {
@@ -22,6 +27,8 @@ function convertMembership(membership: string): RoomMembership {
       return RoomMembership.Joined;
     case "Leaving":
       return RoomMembership.Leaving;
+    default:
+      throw new TypeError(`invalid membership string: ${membership}`);
   }
 }
 
@@ -51,7 +58,7 @@ function convertRoomListEntry(name: string, room: any): RoomState {
   };
 }
 
-function handleRoomListResponse(dispatch: AppDispatch, response): void {
+function handleRoomListResponse(dispatch: AppDispatch, response: any): void {
   const { rooms } = response;
   if (rooms === undefined) {
     console.log("RoomListResponse has wrong shape:", response);
@@ -66,7 +73,7 @@ function handleRoomListResponse(dispatch: AppDispatch, response): void {
   dispatch(roomSetAll(payload));
 }
 
-function handleRoomMessageResponse(dispatch: AppDispatch, response): void {
+function handleRoomMessageResponse(dispatch: AppDispatch, response: any): void {
   dispatch(
     roomReceiveMessage({
       roomName: response.room_name,
@@ -76,12 +83,12 @@ function handleRoomMessageResponse(dispatch: AppDispatch, response): void {
   );
 }
 
-function handleRoomJoinResponse(dispatch: AppDispatch, response): void {
+function handleRoomJoinResponse(dispatch: AppDispatch, response: any): void {
   const room = convertRoomListEntry(response.room_name, response.room);
   dispatch(roomSetState(room));
 }
 
-function handleRoomLeaveResponse(dispatch: AppDispatch, response): void {
+function handleRoomLeaveResponse(dispatch: AppDispatch, response: any): void {
   dispatch(roomSetMembership([response.room_name, RoomMembership.Left]));
 }
 

src/modules/room/slice.ts

@@ -97,7 +97,7 @@ export const roomSlice = createSlice({
 
       room.messages.push({ userName, message });
     },
-    roomSetAll: (state: RoomSliceState, action: PayloadAction<Room[]>) => {
+    roomSetAll: (state: RoomSliceState, action: PayloadAction<RoomState[]>) => {
       state.rooms = {};
       for (const room of action.payload) {
         state.rooms[room.name] = room;

src/modules/user/slice.ts

@@ -23,7 +23,7 @@ export interface UserMap {
   [name: string]: UserState;
 }
 
-export interface RoomSliceState {
+export interface UserSliceState {
   users: UserMap;
 }
 
@@ -39,17 +39,17 @@ const initialState: UserSliceState = {
       numFiles: 3,
       numFolders: 4,
       numFreeSlots: 5,
-      country: 6,
+      country: "US",
     },
     bob: {
-      name: "bob",
+      name: "karandeep",
       status: UserStatus.Offline,
       averageSpeed: 1,
       numDownloads: 2,
       numFiles: 3,
       numFolders: 4,
       numFreeSlots: 5,
-      country: 6,
+      country: "IN",
     },
   },
 };