Merge branch 'main' into feat/sidebar

.github/CONTRIBUTORS.md

@@ -0,0 +1,3 @@
+Contributors:
+- Miguel Merlin
+- Maya Patel

README.md

@@ -26,6 +26,11 @@ In the repo, submit a pr.
 
 ## How to run the application
 To run the application
+1. Install all the dependencies
+```
+npm install
+```
+2. Run the application
 ```
 npm run start
 ```

package.json

@@ -17,6 +17,7 @@
     "framer-motion": "^11.0.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.22.1",
     "react-scripts": "5.0.1",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"

src/api/lib/users.tsx

@@ -21,3 +21,7 @@ export const updateUser = async (username: string, user: User): Promise<AxiosRes
 export const deleteUser = async (username: string): Promise<AxiosResponse> => {
   return await request('DELETE', `/v1/users/user?username=${username}`)
 }
+
+export const getMemberSizeWeeklyChange = async (): Promise<AxiosResponse> => {
+  return await request('GET', '/v1/users/member-size-weekly-change')
+}

src/app/App.tsx

@@ -1,28 +1,13 @@
-import { Box, Container, Flex, Spinner } from '@chakra-ui/react'
-import Sidebar from '../components/Sidebar'
+import React from 'react'
+import { Routes, Route } from 'react-router-dom'
+import HomePage from '../pages/HomePage'
 
 function App (): JSX.Element {
   return (
-    <div style={{ height: '100vh' }}>
-      <Flex height="100%">
-        <Sidebar />
-        <Container height="100%" display="flex" justifyContent="center" alignItems="center">
-          <Box
-            display="flex"
-            justifyContent="center"
-            alignItems="center"
-            height="100px"
-          >
-            <Spinner
-              thickness='4px'
-              speed='0.65s'
-              emptyColor='gray.200'
-              color='blue.500'
-              size='xl'
-            />
-          </Box>
-        </Container>
-      </Flex>
+    <div>
+      <Routes>
+        <Route path="/" element={<HomePage />} />
+      </Routes>
     </div>
   )
 }

src/components/MetricCard.tsx

@@ -0,0 +1,29 @@
+import {
+  Stat,
+  StatLabel,
+  StatNumber,
+  StatHelpText,
+  StatArrow
+} from '@chakra-ui/react'
+
+interface MetricCardProps {
+  label: string
+  statistic: string | number
+  changePercentage: string | number
+  change: 'increase' | 'decrease'
+}
+
+function MetricCard ({ label, statistic, changePercentage, change }: MetricCardProps): JSX.Element {
+  return (
+    <Stat>
+      <StatLabel>{label}</StatLabel>
+      <StatNumber>{statistic.toLocaleString()}</StatNumber>
+      <StatHelpText>
+        <StatArrow type={change} />
+        {changePercentage.toLocaleString()}
+      </StatHelpText>
+    </Stat>
+  )
+}
+
+export default MetricCard

src/components/TableDashboard.tsx

@@ -0,0 +1,56 @@
+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'
+
+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'>
+            <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>
+    </TableContainer>
+  )
+}
+
+export default TableDashboard

src/components/UserCard.tsx

@@ -0,0 +1,8 @@
+function UserCard (): JSX.Element {
+  return (
+    <div>
+    </div>
+  )
+}
+
+export default UserCard

src/index.tsx

@@ -3,16 +3,19 @@ import ReactDOM from 'react-dom/client'
 import App from './app/App'
 import reportWebVitals from './reportWebVitals'
 import { ChakraProvider } from '@chakra-ui/react'
+import { BrowserRouter } from 'react-router-dom'
 
 const rootElement = document.getElementById('root')
 
 if (rootElement !== null) {
   const root = ReactDOM.createRoot(rootElement)
   root.render(
     <React.StrictMode>
+      <BrowserRouter>
       <ChakraProvider>
         <App />
       </ChakraProvider>
+      </BrowserRouter>
     </React.StrictMode>
   )
 } else {

src/pages/HomePage.tsx

@@ -0,0 +1,14 @@
+import { Container } from '@chakra-ui/react'
+import TableDashboard from '../components/TableDashboard'
+
+function HomePage (): JSX.Element {
+  return (
+        <div>
+            <Container>
+                <TableDashboard />
+            </Container>
+        </div>
+  )
+}
+
+export default HomePage