Improve UserList, add title and refresh button.

src/modules/user/UserList.tsx

@@ -1,7 +1,8 @@
 import { FC } from "react";
+import { useDispatch } from "react-redux";
 
 import SearchableList from "components/SearchableList";
-import { UserMap } from "modules/user/slice";
+import { UserMap, userGetAll } from "modules/user/slice";
 import UserListEntry from "modules/user/UserListEntry";
 
 const SearchableUserList = SearchableList(UserListEntry);
@@ -10,6 +11,27 @@ interface Props {
   users: UserMap;
 }
 
-const UserList: FC<Props> = ({ users }) => <SearchableUserList map={users} />;
+const UserList: FC<Props> = ({ users }) => {
+  const dispatch = useDispatch();
+
+  const onClick: 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>
+      <SearchableUserList map={users} />
+    </div>
+  );
+};
 
 export default UserList;