Pass component to SearchableList as props.

src/components/SearchableList.tsx

@@ -1,4 +1,4 @@
-import { ComponentType, FC } from "react";
+import { Component, FC, useState } from "react";
 
 interface ItemProps<Item> {
   name: string;
@@ -6,30 +6,22 @@ interface ItemProps<Item> {
 }
 
 interface ListProps<Item> {
+  component: Component<ItemProps<Item>>;
   map: { [key: string]: Item };
 }
 
 // TODO: Add search box.
-function SearchableList<Item>(
-  ItemComponent: ComponentType<ItemProps<Item>>
-): FC<ListProps<Item>> {
-  return ({ id, map }: ListProps<Item>) => {
-    const children = [];
+const SearchableList: FC<ListProps<Item>> = ({ component, map }) => {
+  const children = [];
+  for (const name in map) {
+    children.push(<li key={name}>{component({ name, data: map[name] })}</li>);
+  }
 
-    for (const name in map) {
-      children.push(
-        <li key={name}>
-          <ItemComponent name={name} data={map[name]} />
-        </li>
-      );
-    }
-
-    return (
-      <div className="flex flex-col h-full px-3">
-        <ul className="flex-grow flex flex-col">{children}</ul>
-      </div>
-    );
-  };
-}
+  return (
+    <div className="flex flex-col h-full px-3">
+      <ul className="flex-grow flex flex-col">{children}</ul>
+    </div>
+  );
+};
 
 export default SearchableList;

src/modules/room/RoomList.tsx

@@ -5,8 +5,6 @@ import SearchableList from "components/SearchableList";
 import RoomListEntry from "modules/room/RoomListEntry";
 import { RoomSliceState, roomGetAll } from "modules/room/slice";
 
-const SearchableRoomList = SearchableList(RoomListEntry);
-
 const RoomList: FC<RoomSliceState> = ({ rooms }) => {
   const dispatch = useDispatch();
 
@@ -25,7 +23,7 @@ const RoomList: FC<RoomSliceState> = ({ rooms }) => {
           Refresh
         </button>
       </div>
-      <SearchableRoomList map={rooms} />
+      <SearchableList component={RoomListEntry} map={rooms} />
     </div>
   );
 };

src/modules/user/UserList.tsx

@@ -5,8 +5,6 @@ import SearchableList from "components/SearchableList";
 import { UserMap, userGetAll } from "modules/user/slice";
 import UserListEntry from "modules/user/UserListEntry";
 
-const SearchableUserList = SearchableList(UserListEntry);
-
 interface Props {
   users: UserMap;
 }
@@ -29,7 +27,7 @@ const UserList: FC<Props> = ({ users }) => {
           Refresh
         </button>
       </div>
-      <SearchableUserList map={users} />
+      <SearchableList component={UserListEntry} map={users} />
     </div>
   );
 };