implement load user

Author: fcheung

app/javascript/components/users.tsx

@@ -1,12 +1,15 @@
 import { useState } from 'react'
-import { GetUsersResponse } from '../generated_types/users'
+import { GetUsersResponse, UserDetail } from '../generated_types/users'
 import PaginationLinks from './pagination'
 import getApi from '../utils/get_api'
+import User from './user'
 
 const Users = ({ pagination: initialPagination, users: initialUsers }: GetUsersResponse) => {
   const [pagination, setPagination] = useState(initialPagination)
   const [users, setUsers] = useState(initialUsers)
 
+  const [loadedUser, setLoadedUser] = useState<UserDetail | undefined>()
+
   // this methods loads the requested page & re-renders
   // the table/pagination using it
   const loadPage = async (pageNumber: number) => {
@@ -15,6 +18,11 @@ const Users = ({ pagination: initialPagination, users: initialUsers }: GetUsersR
     setPagination(response.pagination)
   }
 
+  const loadUser = async (userId: number) => {
+    const response = await getApi(`/users/${userId}`)
+    setLoadedUser(response.user)
+  }
+
   return (
     <>
       <table>
@@ -30,12 +38,16 @@ const Users = ({ pagination: initialPagination, users: initialUsers }: GetUsersR
             <tr key={u.id}>
               <td>{u.id}</td>
               <td>{u.name}</td>
-              <td>Show</td>
+              <td>
+                <a onClick={() => loadUser(u.id)}>Show</a>
+              </td>
             </tr>
           ))}
         </tbody>
       </table>
       <PaginationLinks onPageChanged={newPage => loadPage(newPage)} {...pagination} />
+
+      {loadedUser && <User user={loadedUser} />}
     </>
   )
 }