handle a fail to load characters situation

client/src/components/characterCard.js

@@ -18,33 +18,29 @@ export default function CharacterCard(props) {
                 
                 <Card.Title>{characterName}</Card.Title>
                     
-                <Card.Text>
+                <Table>
                     
-                    <Table>
+                    <tbody>
                         
-                        <tbody>
+                        <tr>
                             
-                            <tr>
+                            <td className='fw-bold'>First Episode:</td>
                             
-                                <td className='fw-bold'>First Episode:</td>
+                            <td>{firstEpisode}</td>
                         
-                                <td>{firstEpisode}</td>
+                        </tr>
                         
-                            </tr>
+                        <tr>
                             
-                            <tr>
+                            <td className='fw-bold'>Last Episode:</td>
                             
-                                <td className='fw-bold'>Last Episode:</td>
+                            <td>{lastEpisode}</td>
                         
-                                <td>{lastEpisode}</td>
+                        </tr>
                     
-                            </tr>
+                    </tbody>
                 
-                        </tbody>
-                    
-                    </Table>
-                
-                </Card.Text>
+                </Table>
             
             </Card.Body>
         

client/src/components/loadingError.js

@@ -0,0 +1,30 @@
+import React from 'react';
+
+import Container from 'react-bootstrap/Container';
+import Row from 'react-bootstrap/Row';
+import Col from 'react-bootstrap/Col';
+
+export default function LoadingError(props) {
+    return (
+        <Container className='my-auto'>
+
+            <Row>
+
+                <Col className='text-center'>
+
+                    <p>{props.message}</p>
+
+                    <button
+                        className='btn btn-try-again'
+                        onClick={props.onClick}
+                    >
+                        Try again
+                    </button>
+
+                </Col>
+
+            </Row>
+
+        </Container>
+    );
+}

client/src/pages/home.js

@@ -4,6 +4,7 @@ import Greeting from '../components/greeting';
 import CardHolder from '../components/cardHolder';
 import CharacterCard from '../components/characterCard';
 import Loading from '../components/loading';
+import LoadingError from '../components/loadingError';
 
 import CharacterService from '../services/characterService';
 const characterService = new CharacterService();
@@ -11,13 +12,17 @@ const characterService = new CharacterService();
 export default function Home() {
 
     const [characters, setCharacters] = useState([]);
+    const [errorMessage, setErrorMessage] = useState(null);
 
     const getCharacters = async () => {
 
         const res = await characterService.getCharacters();
         
-        // TODO: Handle a failed request.
-        if (!res.ok) return;
+        if (!res.ok) {
+
+            return setErrorMessage('Failed to load characters.');
+
+        }
 
         const characters = await res.json();
 
@@ -26,7 +31,9 @@ export default function Home() {
     }
 
     useEffect(() => {
+
         getCharacters();
+
     }, []);
 
     const getCharacterCards = () => {
@@ -37,6 +44,7 @@ export default function Home() {
 
                 <CharacterCard 
                     character={character}
+                    key={character.id}
                 />
 
             );
@@ -45,6 +53,12 @@ export default function Home() {
 
     }
 
+    const handleTryAgain = async () => {
+
+        if (errorMessage === 'Failed to load characters.') return await getCharacters();
+
+    }
+
     return (
         <>
             <Greeting />
@@ -57,6 +71,13 @@ export default function Home() {
 
                 </CardHolder>
                 
+                : errorMessage ? 
+
+                <LoadingError
+                    message={errorMessage}
+                    onClick={handleTryAgain}
+                />
+                
                 : <Loading />}
         </>
     );

client/src/styles/app.css

@@ -15,3 +15,13 @@
 .highlight {
     color: #912718;
 }
+
+.btn-try-again,
+.btn-try-again:hover,
+.btn-try-again:focus,
+.btn-try-again:active:focus {
+    color: white;
+    background-color: #912718;
+    border-color: #912718;
+    box-shadow: none;
+}