From 6312b3df91b30f4e2b28842acd9de009f95c61eb Mon Sep 17 00:00:00 2001
From: miguel-merlin <mmerlin@stevens.edu>
Date: Thu, 22 Feb 2024 14:22:26 -0500
Subject: [PATCH] feat: Added API call to Table component

---
 src/components/TableDashboard.tsx | 32 ++++++++++++++++++++++++++++++-
 1 file changed, 31 insertions(+), 1 deletion(-)

diff --git a/src/components/TableDashboard.tsx b/src/components/TableDashboard.tsx
index ec58030..2897afa 100644
--- a/src/components/TableDashboard.tsx
+++ b/src/components/TableDashboard.tsx
@@ -3,10 +3,30 @@ import {
   Thead,
   Tr,
   Th,
-  TableContainer
+  TableContainer,
+  Td,
+  Tbody
 } from '@chakra-ui/react'
+import { getAllUsers } from '../api/lib/users'
+import { useEffect, useState } from 'react'
+import { type User } from '../types'
 
 function TableDashboard (): JSX.Element {
+  const [users, setUsers] = useState<User[]>([])
+  useEffect(() => {
+    const fetchUsers = async (): Promise<void> => {
+      try {
+        const response = await getAllUsers()
+        if (response.data) {
+          setUsers(response.data as User[])
+        }
+      } catch (error) {
+        console.error('Error fetching users: ', error)
+      }
+    }
+    void fetchUsers()
+  }, [])
+
   return (
     <TableContainer>
         <Table variant='simple'>
@@ -18,6 +38,16 @@ function TableDashboard (): JSX.Element {
                     <Th>Status</Th>
                 </Tr>
             </Thead>
+            <Tbody>
+                    {users.map((user, index) => (
+                    <Tr key={index}>
+                    <Td>{user.displayName}</Td>
+                    <Td>{user.email}</Td>
+                    <Td>{user.role}</Td>
+                    <Td>{user.enabled}</Td>
+                    </Tr>
+                    ))}
+            </Tbody>
         </Table>
     </TableContainer>
   )