From bbbe6cb8d94d0334242712b3e92af641ff7a00c2 Mon Sep 17 00:00:00 2001
From: Titouan Rigoudy <titouan.rigoudy@gmail.com>
Date: Sat, 31 Jul 2021 15:50:03 -0400
Subject: [PATCH] Improve UserList, add title and refresh button.

---
 src/modules/user/UserList.tsx | 26 ++++++++++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/src/modules/user/UserList.tsx b/src/modules/user/UserList.tsx
index 100adff..4cb7b8a 100644
--- a/src/modules/user/UserList.tsx
+++ b/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;