added loading animation. add episode info to character cards

client/package-lock.json

@@ -7,6 +7,7 @@
     "": {
       "name": "client",
       "version": "1.0.0",
+      "license": "MIT",
       "dependencies": {
         "@testing-library/jest-dom": "^5.16.4",
         "@testing-library/react": "^13.3.0",
@@ -18,6 +19,7 @@
         "react-bootstrap": "^2.4.0",
         "react-bootstrap-icons": "^1.8.4",
         "react-dom": "^18.2.0",
+        "react-loading-icons": "^1.1.0",
         "react-router": "^6.3.0",
         "react-router-dom": "^6.3.0",
         "react-scripts": "5.0.1",
@@ -13976,6 +13978,14 @@
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
       "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
     },
+    "node_modules/react-loading-icons": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/react-loading-icons/-/react-loading-icons-1.1.0.tgz",
+      "integrity": "sha512-Y9eZ6HAufmUd8DIQd6rFrx5Bt/oDlTM9Nsjvf8YpajTa3dI8cLNU8jUN5z7KTANU+Yd6/KJuBjxVlrU2dMw33g==",
+      "engines": {
+        "node": ">= 12.0.0"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@@ -26648,6 +26658,11 @@
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
       "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
     },
+    "react-loading-icons": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/react-loading-icons/-/react-loading-icons-1.1.0.tgz",
+      "integrity": "sha512-Y9eZ6HAufmUd8DIQd6rFrx5Bt/oDlTM9Nsjvf8YpajTa3dI8cLNU8jUN5z7KTANU+Yd6/KJuBjxVlrU2dMw33g=="
+    },
     "react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",

client/package.json

@@ -18,6 +18,7 @@
     "react-bootstrap": "^2.4.0",
     "react-bootstrap-icons": "^1.8.4",
     "react-dom": "^18.2.0",
+    "react-loading-icons": "^1.1.0",
     "react-router": "^6.3.0",
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",

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
+                    <Table>
-                    bulk of the card's content.
+                        <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);
@@ -42,15 +45,13 @@ export default function Home() {
     }
 
     return (
-        <>
-            {characters.length > 0 ?
         <>
             <Greeting />
+            {characters.length > 0 ?
                 <CardHolder>
                     {getCharacterCards()}
                 </CardHolder>
-                </>
+                : <Loading />}
-            : null}
         </>
     );
 }