From 282b587568be26bcf8e207da230b560ac81b1b76 Mon Sep 17 00:00:00 2001
From: Titouan Rigoudy <titouan.rigoudy@gmail.com>
Date: Thu, 19 Aug 2021 17:34:54 +0200
Subject: [PATCH] Fix scrolling for over-long lists.

---
 src/components/SearchableList.tsx | 21 ++++++++++++++++++---
 src/modules/room/RoomList.tsx     | 21 ++++++++-------------
 src/modules/room/message.ts       |  7 +------
 src/modules/room/slice.ts         |  3 +--
 src/modules/user/UserList.tsx     | 21 ++++++++-------------
 5 files changed, 36 insertions(+), 37 deletions(-)

diff --git a/src/components/SearchableList.tsx b/src/components/SearchableList.tsx
index a172911..9f10599 100644
--- a/src/components/SearchableList.tsx
+++ b/src/components/SearchableList.tsx
@@ -1,4 +1,4 @@
-import { Component, FC, useState } from "react";
+import { Component, FC, ReactEventHandler, useState } from "react";
 
 interface ItemProps<Item> {
   name: string;
@@ -6,11 +6,18 @@ interface ItemProps<Item> {
 }
 
 interface ListProps<Item> {
+  title: string;
+  onRefresh: ReactEventHandler;
   component: Component<ItemProps<Item>>;
   map: { [key: string]: Item };
 }
 
-const SearchableList: FC<ListProps<Item>> = ({ component, map }) => {
+const SearchableList: FC<ListProps<Item>> = ({
+  title,
+  onRefresh,
+  component,
+  map,
+}) => {
   const [filter, setFilter] = useState<string>("");
 
   const onChange: ReactEventHandler = (event) => {
@@ -25,7 +32,15 @@ const SearchableList: FC<ListProps<Item>> = ({ component, map }) => {
   }
 
   return (
-    <div className="flex flex-col h-full px-3">
+    <div className="flex flex-col px-3 h-full">
+      <div className="flex justify-between p-3">
+        <h1 className="pl-3 text-2xl font-bold text-yellow-800 text-center">
+          {title}
+        </h1>
+        <button onClick={onRefresh} className="button">
+          Refresh
+        </button>
+      </div>
       <form className="flex gap-3 p-3">
         <label htmlFor="filter" className="self-center">
           Filter:
diff --git a/src/modules/room/RoomList.tsx b/src/modules/room/RoomList.tsx
index 10dfc95..5ed4762 100644
--- a/src/modules/room/RoomList.tsx
+++ b/src/modules/room/RoomList.tsx
@@ -1,4 +1,4 @@
-import { FC } from "react";
+import { FC, ReactEventHandler } from "react";
 import { useDispatch } from "react-redux";
 
 import SearchableList from "components/SearchableList";
@@ -8,23 +8,18 @@ import { RoomSliceState, roomGetAll } from "modules/room/slice";
 const RoomList: FC<RoomSliceState> = ({ rooms }) => {
   const dispatch = useDispatch();
 
-  const onClick: ReactEventHandler = (event) => {
+  const onRefresh: ReactEventHandler = (event) => {
     event.preventDefault();
     dispatch(roomGetAll());
   };
 
   return (
-    <div className="h-full">
-      <div className="flex justify-between p-3">
-        <h1 className="pl-3 text-2xl font-bold text-yellow-800 text-center">
-          Chat Rooms
-        </h1>
-        <button onClick={onClick} className="button">
-          Refresh
-        </button>
-      </div>
-      <SearchableList component={RoomListEntry} map={rooms} />
-    </div>
+    <SearchableList
+      title="Chat Rooms"
+      onRefresh={onRefresh}
+      component={RoomListEntry}
+      map={rooms}
+    />
   );
 };
 
diff --git a/src/modules/room/message.ts b/src/modules/room/message.ts
index b6b9423..c06e26f 100644
--- a/src/modules/room/message.ts
+++ b/src/modules/room/message.ts
@@ -82,12 +82,7 @@ function handleRoomJoinResponse(dispatch: AppDispatch, response): void {
 }
 
 function handleRoomLeaveResponse(dispatch: AppDispatch, response): void {
-  dispatch(
-    roomSetMembership([
-      response.room_name,
-      RoomMembership.Left,
-    ])
-  );
+  dispatch(roomSetMembership([response.room_name, RoomMembership.Left]));
 }
 
 function roomListRequest(): SocketMessage {
diff --git a/src/modules/room/slice.ts b/src/modules/room/slice.ts
index b806829..73df139 100644
--- a/src/modules/room/slice.ts
+++ b/src/modules/room/slice.ts
@@ -63,8 +63,7 @@ export const roomSlice = createSlice({
 
       room.membership = membership;
     },
-    roomSetState: (state: RoomSliceState,
-                   action: PayloadAction<RoomState>) => {
+    roomSetState: (state: RoomSliceState, action: PayloadAction<RoomState>) => {
       const room = action.payload;
       state.rooms[room.name] = room;
     },
diff --git a/src/modules/user/UserList.tsx b/src/modules/user/UserList.tsx
index e821a69..257f9ff 100644
--- a/src/modules/user/UserList.tsx
+++ b/src/modules/user/UserList.tsx
@@ -1,4 +1,4 @@
-import { FC } from "react";
+import { FC, ReactEventHandler } from "react";
 import { useDispatch } from "react-redux";
 
 import SearchableList from "components/SearchableList";
@@ -12,23 +12,18 @@ interface Props {
 const UserList: FC<Props> = ({ users }) => {
   const dispatch = useDispatch();
 
-  const onClick: ReactEventHandler = (event) => {
+  const onRefresh: ReactEventHandler = (event) => {
     event.preventDefault();
     dispatch(userGetAll());
   };
 
   return (
-    <div>
-      <div className="flex justify-between p-3">
-        <h1 className="pl-3 text-2xl font-bold text-yellow-800 text-center">
-          Users
-        </h1>
-        <button onClick={onClick} className="button">
-          Refresh
-        </button>
-      </div>
-      <SearchableList component={UserListEntry} map={users} />
-    </div>
+    <SearchableList
+      title="Users"
+      onRefresh={onRefresh}
+      component={UserListEntry}
+      map={users}
+    />
   );
 };