From be5c41ee0a51ef4ceab4cbb044d06a687f1860e5 Mon Sep 17 00:00:00 2001 From: StevanFreeborn Date: Sat, 25 Jun 2022 23:39:33 -0500 Subject: [PATCH] added loading animation. add episode info to character cards --- client/package-lock.json | 15 ++++++++++++++ client/package.json | 1 + client/src/components/characterCard.js | 19 ++++++++++++++--- client/src/components/loading.js | 28 ++++++++++++++++++++++++++ client/src/pages/about.js | 3 ++- client/src/pages/home.js | 15 +++++++------- 6 files changed, 70 insertions(+), 11 deletions(-) create mode 100644 client/src/components/loading.js diff --git a/client/package-lock.json b/client/package-lock.json index 61f8e8a..6fe2545 100644 --- a/client/package-lock.json +++ b/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", diff --git a/client/package.json b/client/package.json index 175d4c8..441fb34 100644 --- a/client/package.json +++ b/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", diff --git a/client/src/components/characterCard.js b/client/src/components/characterCard.js index fe581bd..37fe4de 100644 --- a/client/src/components/characterCard.js +++ b/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) { {characterName} - Some quick example text to build on the card title and make up the - bulk of the card's content. + + + + + + + + + + + +
First Episode:{firstEpisode}
Last Episode:{lastEpisode}
 diff --git a/client/src/components/loading.js b/client/src/components/loading.js new file mode 100644 index 0000000..1565269 --- /dev/null +++ b/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 ( + + + + +
Loading...
+ + + + ); + +} \ No newline at end of file diff --git a/client/src/pages/about.js b/client/src/pages/about.js index bebfc29..64959c5 100644 --- a/client/src/pages/about.js +++ b/client/src/pages/about.js @@ -1,7 +1,8 @@ import React from 'react'; +import Loading from '../components/loading'; export default function About() { return ( -

About

+

Coming soon...

); } \ No newline at end of file diff --git a/client/src/pages/home.js b/client/src/pages/home.js index 5df733a..f3c8e9a 100644 --- a/client/src/pages/home.js +++ b/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 ( <> + {characters.length > 0 ? - <> - - - {getCharacterCards()} - - - : null} + + {getCharacterCards()} + + : } ); } \ No newline at end of file