Move SampleTableDashboard code to TableDashboard.

stevensblueprint · Mar 1, 2024 · 042e74d · 042e74d
1 parent eb70b3d
commit 042e74d
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 86 deletions.
diff --git a/src/components/SampleTableDashboard.tsx b/src/components/SampleTableDashboard.tsx
diff --git a/src/components/TableDashboard.tsx b/src/components/TableDashboard.tsx
@@ -1,54 +1,36 @@
-import {
-  Table,
-  Thead,
-  Tr,
-  Th,
-  TableContainer,
-  Td,
-  Tbody
-} from '@chakra-ui/react'
-import { getAllUsers } from '../api/lib/users'
-import { useEffect, useState } from 'react'
-import { type User } from '../types'
+import { Table, Thead, Tbody, Tr, Th, TableContainer } from '@chakra-ui/react'
+import React from 'react'
+import sampleUserData from '../sample_data.json'
 
 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()
-  }, [])
+  const [sampleData] = React.useState(sampleUserData)
 
   return (
     <TableContainer>
-        <Table variant='simple'>
-            <Thead>
-                <Tr>
-                    <Th>Name</Th>
-                    <Th>Email</Th>
-                    <Th>Title</Th>
-                    <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>
+      <Table variant="simple" size='md'>
+        <Thead>
+          <Tr>
+            <Th>Name</Th>
+            <Th>Email</Th>
+            <Th>Title</Th>
+            <Th>Status</Th>
+          </Tr>
+        </Thead>
+        <Tbody>
+          {sampleData && Object.values(sampleData.Users)
+            .sort((a, b) => {
+              return a.Displayname.localeCompare(b.Displayname)
+            }).filter((user) => !user.Disabled)
+            .map(({ Displayname, Email, Disabled }) =>
+              <Tr key={Email}>
+                <Th>{Displayname}</Th>
+                <Th>{Email}</Th>
+                <Th></Th>
+                <Th>{Disabled ? 'Inactive' : 'Active'}</Th>
+              </Tr>
+            )}
+        </Tbody>
+      </Table>
     </TableContainer>
   )
 }

diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
@@ -1,14 +1,12 @@
 import { Container, HStack } from '@chakra-ui/react'
 import TableDashboard from '../components/TableDashboard'
 import Sidebar from '../components/Sidebar'
-import SampleTableDashboard from '../components/SampleTableDashboard'
 
 function HomePage (): JSX.Element {
   return (
     <HStack height="100vh" spacing="0">
       <Sidebar />
       <Container>
-        <SampleTableDashboard />
         <TableDashboard />
       </Container>
     </HStack>