From 3ba975e2fe6fe4d902f93724146bd823d552abc3 Mon Sep 17 00:00:00 2001
From: miguel-merlin <mmerlin@stevens.edu>
Date: Thu, 28 Mar 2024 15:49:03 -0400
Subject: [PATCH] feat: Added alert message on failed API call

---
 src/pages/HomePage.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index fd02177..9c15a47 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -1,16 +1,20 @@
-import { Container, HStack } from '@chakra-ui/react'
+import { Container, HStack, Text } from '@chakra-ui/react'
 import TableDashboard from '../components/TableDashboard'
 import Sidebar from '../components/Sidebar'
 import { getAllUsers } from '../api/lib/users'
 import { type User } from '../types/index'
-import React, { useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
 
 function HomePage (): JSX.Element {
   const [members, setMembers] = React.useState<User[]>([])
+  const [error, setError] = useState<string | null>(null)
 
   useEffect(() => {
     void getAllUsers().then((response) => {
       setMembers(response.data as User[])
+    }).catch((error) => {
+      console.error(error)
+      setError('Failed to load Blueprint members. Please try again later.')
     })
   }, [])
 
@@ -18,7 +22,7 @@ function HomePage (): JSX.Element {
     <HStack height="100vh" spacing="0">
       <Sidebar />
       <Container>
-        <TableDashboard members={members} />
+        {error ? (<Text color="red.500">{error}</Text>) : (<TableDashboard members={members} />)}
       </Container>
     </HStack>
   )