3 files changed, 37 insertions, 3 deletions
diff --git a/client/components/admin/_admin.jsx b/client/components/admin/_admin.jsx
new file mode 100644
index 0000000..aff544c
--- /dev/null
+++ b/client/components/admin/_admin.jsx
@@ -0,0 +1,21 @@
+import { useState, useContext, useEffect } from 'react';
+import { ApiContext } from '../../utils/api_context';
+
+export const Admin = () => {
+  const [users, setUsers] = useState([]);
+  const api = useContext(ApiContext);
+
+  useEffect(async () => {
+    const { users } = await api.get('/users');
+    setUsers(users);
+  }, []);
+
+  return (
+    <div className="p-4">
+      <h2 className="text-3xl">Users</h2>
+      {users.map((user) => (
+        <div>{user.name}</div>
+      ))}
+    </div>
+  );
+};
diff --git a/client/components/home/_home.jsx b/client/components/home/_home.jsx
index 00a7ab3..7ec9335 100644
--- a/client/components/home/_home.jsx
+++ b/client/components/home/_home.jsx
@@ -1,10 +1,16 @@
 import { useContext, useEffect, useState } from 'react';
+import { useNavigate } from 'react-router';
 import { ApiContext } from '../../utils/api_context';
 import { AuthContext } from '../../utils/auth_context';
+import { RolesContext } from '../../utils/roles_context';
+import { Button } from '../common/button';
 
 export const Home = () => {
   const [, setAuthToken] = useContext(AuthContext);
   const api = useContext(ApiContext);
+  const roles = useContext(RolesContext);
+
+  const navigate = useNavigate();
 
   const [loading, setLoading] = useState(true);
   const [user, setUser] = useState(null);
@@ -26,11 +32,16 @@ export const Home = () => {
   }
 
   return (
-    <div>
+    <div className="p-4">
       <h1>Welcome {user.name}</h1>
-      <button type="button" onClick={logout}>
+      <Button type="button" onClick={logout}>
         Logout
-      </button>
+      </Button>
+      {roles.includes('admin') && (
+        <Button type="button" onClick={() => navigate('/admin')}>
+          Admin
+        </Button>
+      )}
     </div>
   );
 };
diff --git a/client/components/router.jsx b/client/components/router.jsx
index ccdb83a..08bb41f 100644
--- a/client/components/router.jsx
+++ b/client/components/router.jsx
@@ -4,6 +4,7 @@ import { Home } from './home/_home';
 import { AuthContext } from '../utils/auth_context';
 import { SignIn } from './sign_in/_sign_in';
 import { SignUp } from './sign_up/_sign_up';
+import { Admin } from './admin/_admin';
 
 export const Router = () => {
   const [authToken] = useContext(AuthContext);
@@ -14,6 +15,7 @@ export const Router = () => {
         path="/"
         element={authToken ? <Home /> : <Navigate replace to="signin" />} // no token means not logged in
       />
+      <Route path="admin" element={<Admin />} />
       <Route path="signin" element={<SignIn />} />
       <Route path="signup" element={<SignUp />} />
     </Routes>