Deploy master to production.

Add error handling to home page when requesting character data.

client/src/components/characterCard.js

@@ -18,8 +18,6 @@ export default function CharacterCard(props) {
                 
                 <Card.Title>{characterName}</Card.Title>
                     
-                <Card.Text>
-                    
                 <Table>
                     
                     <tbody>
@@ -44,8 +42,6 @@ export default function CharacterCard(props) {
                 
                 </Table>
             
-                </Card.Text>
-            
             </Card.Body>
         
         </Card>

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-cta'
+                        onClick={props.handleClick}
+                    >
+                        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) {
-        if (!res.ok) return;
+
+            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}
+                    handleClick={handleTryAgain}
+                />
+                
                 : <Loading />}
         </>
     );

client/src/styles/app.css

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