added loading animation. add episode info to character cards

client/src/components/characterCard.js

@@ -1,10 +1,13 @@
 import React from 'react';
 import Card from 'react-bootstrap/Card';
+import Table from 'react-bootstrap/Table';
 
 export default function CharacterCard(props) {
     
-    const characterName = props.character.fullName;
     const image = new URL(props.character.image).pathname;
+    const characterName = props.character.fullName;
+    const firstEpisode = props.character.firstEpisode;
+    const lastEpisode = props.character.lastEpisode;
     
     return(
 
@@ -13,8 +16,18 @@ export default function CharacterCard(props) {
             <Card.Body>
                 <Card.Title>{characterName}</Card.Title>
                 <Card.Text>
-                    Some quick example text to build on the card title and make up the
-                    bulk of the card's content.
+                    <Table>
+                        <tbody>
+                            <tr>
+                                <td className='fw-bold'>First Episode:</td>
+                                <td>{firstEpisode}</td>
+                            </tr>
+                            <tr>
+                                <td className='fw-bold'>Last Episode:</td>
+                                <td>{lastEpisode}</td>
+                            </tr>
+                        </tbody>
+                    </Table>
                 </Card.Text>
             </Card.Body>
         </Card>

client/src/components/loading.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import Container from 'react-bootstrap/Container';
+import Row from 'react-bootstrap/Row';
+import Col from 'react-bootstrap/Col';
+import { TailSpin } from 'react-loading-icons';
+
+export default function Loading() {
+
+    return (
+        <Container className='m-auto'>
+            <Row>
+                <Col className='text-center'>
+                    <TailSpin
+                        height='3em'
+                        fill='#912718'
+                        stroke='#912718'
+                        speed={1}
+                        fillOpacity={1}
+                        strokeOpacity={1}
+                        strokeWidth={2}
+                    />
+                     <div className='mt-2'>Loading...</div>
+                </Col>
+            </Row>
+        </Container>
+    );
+
+}

client/src/pages/about.js

@@ -1,7 +1,8 @@
 import React from 'react';
+import Loading from '../components/loading';
 
 export default function About() {
     return (
-        <h1>About</h1>
+        <p>Coming soon...</p>
     );
 }

client/src/pages/home.js

@@ -3,6 +3,7 @@ import React, { useEffect, useState } from 'react';
 import Greeting from '../components/greeting';
 import CardHolder from '../components/cardHolder';
 import CharacterCard from '../components/characterCard';
+import Loading from '../components/loading';
 
 import CharacterService from '../services/characterService';
 const characterService = new CharacterService();
@@ -15,6 +16,8 @@ export default function Home() {
 
         const res = await characterService.getCharacters();
         
+        if (!res.ok) return;
+
         const characters = await res.json();
 
         return setCharacters(characters);
@@ -43,14 +46,12 @@ export default function Home() {
 
     return (
         <>
+            <Greeting />
             {characters.length > 0 ?
-                <>
-                    <Greeting />
-                    <CardHolder>
-                        {getCharacterCards()}
-                    </CardHolder>
-                </>
-            : null}
+                <CardHolder>
+                    {getCharacterCards()}
+                </CardHolder>
+                : <Loading />}
         </>
     );
 }