From f15f773e229b25f9234df1e0bbace96dcbc21b41 Mon Sep 17 00:00:00 2001
From: Titouan Rigoudy <titouan.rigoudy@gmail.com>
Date: Sat, 31 Jul 2021 16:14:06 -0400
Subject: [PATCH] Pass component to SearchableList as props.

---
 src/components/SearchableList.tsx | 34 ++++++++++++-------------------
 src/modules/room/RoomList.tsx     |  4 +---
 src/modules/user/UserList.tsx     |  4 +---
 3 files changed, 15 insertions(+), 27 deletions(-)

diff --git a/src/components/SearchableList.tsx b/src/components/SearchableList.tsx
index 84cd859..a496217 100644
--- a/src/components/SearchableList.tsx
+++ b/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;
diff --git a/src/modules/room/RoomList.tsx b/src/modules/room/RoomList.tsx
index 4af3656..6658263 100644
--- a/src/modules/room/RoomList.tsx
+++ b/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>
   );
 };
diff --git a/src/modules/user/UserList.tsx b/src/modules/user/UserList.tsx
index 4cb7b8a..e821a69 100644
--- a/src/modules/user/UserList.tsx
+++ b/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>
   );
 };