1 files changed, 56 insertions, 0 deletions
diff --git a/frontend/src/UserList.js b/frontend/src/UserList.js
new file mode 100644
index 0000000..dd17ace
--- /dev/null
+++ b/frontend/src/UserList.js
@@ -0,0 +1,56 @@
+import React, { useEffect, useState } from 'react';
+import axios from './axios';
+
+const UserList = () => {
+  const [ data, setData ] = useState({});
+  useEffect(() => {
+    (async () => {
+      try {
+        const resp = await axios.get('/users');
+        setData({
+          users: resp.data.users,
+        });
+      } catch (err) {
+        if (err.response.status === 401) {
+          setData({
+            error: err.response.data.error,
+          });
+        } else {
+          throw err;
+        }
+      }
+    })();
+  }, []);
+
+  const users = data.users;
+  const userRows = !!users
+    ? users.map(user => (
+        <tr key={user.id}>
+          <td>{user.id}</td>
+          <td>{user.username}</td>
+        </tr>
+      ))
+    : null;
+
+  return (
+    <div>
+      <h2 className="subtitle">User list</h2>
+      <div>
+        <div className="error" key="error">
+          {data.error}
+        </div>
+        <table className="table">
+          <thead>
+            <tr>
+              <th>ID</th>
+              <th>Username</th>
+            </tr>
+          </thead>
+          <tbody>{userRows}</tbody>
+        </table>
+      </div>
+    </div>
+  );
+};
+
+export default UserList;