more work to add multiple datasets to home page

client/src/components/characterCard.js

@@ -3,7 +3,7 @@ import Card from 'react-bootstrap/Card';
 import Table from 'react-bootstrap/Table';
 
 export default function CharacterCard(props) {
-    
+
     const image = new URL(props.character.image).pathname;
     const characterName = props.character.fullName;
     const firstEpisode = props.character.firstEpisode;

client/src/components/dataButton.js

@@ -2,8 +2,13 @@ import React from 'react';
 
 export default function DataButton(props) {
 
+    const label = props.label;
+
     return (
-        <button>
+        <button
+            value={label.toLowerCase()}
+            onClick={(e) => props.handleClick(e.target.value)}
+        >
             {props.label}
         </button>
     );

client/src/components/quoteCard.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import Card from 'react-bootstrap/Card';
+
+export default function QuoteCard(props) {
+
+    const text = props.quote.text;
+    const source = props.quote.source
+
+    return (
+        <Card style={{ width: '22rem' }} className='p-1 m-3'>
+
+            <Card.Body>
+
+                <Card.Text>{text}</Card.Text>
+                <Card.Text>{source}</Card.Text>
+
+            </Card.Body>
+
+        </Card>
+    );
+}

client/src/pages/home.js

@@ -5,48 +5,81 @@ 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';
 import DataButtonHolder from '../components/dataButtonHolder';
 import DataButton from '../components/dataButton';
+
+import CharacterService from '../services/characterService';
+import QuoteService from '../services/quoteService';
+import QuoteCard from '../components/quoteCard';
 const characterService = new CharacterService();
+const quoteService = new QuoteService();
 
 export default function Home() {
 
-    const models = [{name: 'Characters'}, {name: 'Quotes'}, {name: 'Episodes'}, {name: 'Seasons'}];
-
-    const [characters, setCharacters] = useState([]);
+    const [currentData, setCurrentData] = useState('characters');
+    const [data, setData] = useState([]);
     const [errorMessage, setErrorMessage] = useState(null);
 
     const getCharacters = async () => {
 
+        setData([]);
+        setCurrentData('characters');
+
         const res = await characterService.getCharacters();
-        
+
         if (!res.ok) {
 
-            return setErrorMessage('Failed to load characters.');
+            return setErrorMessage(`Failed to load characters`);
 
         }
 
         const characters = await res.json();
 
-        return setCharacters(characters);
-
+        return setData(characters);
     }
 
+    const getQuotes = async () => {
+
+        setData([]);
+        setCurrentData('quotes');
+
+        const res = await quoteService.getQuotes();
+
+        if (!res.ok) {
+
+            return setErrorMessage(`Failed to load quotes`);
+
+        }
+
+        const quotes = await res.json();
+
+        return setData(quotes.slice(0,20));
+    }
+
+    const getEpisodes = () => {console.log('episodes')}
+
+    const getSeasons = () => {console.log('seasons')}
+
     useEffect(() => {
 
         getCharacters();
 
     }, []);
 
+    const models = [{ id: 1, name: 'Characters', handleClick: getCharacters},
+                    { id: 2, name: 'Quotes', handleClick: getQuotes },
+                    { id: 3, name: 'Episodes', handleClick: getEpisodes },
+                    { id: 4, name: 'Seasons', handleClick: getSeasons }];
+
     const getDataButtons = () => {
 
         return models.map(model => {
-            
+
             return (
-                <DataButton 
+                <DataButton
                     label={model.name}
+                    handleClick={model.handleClick}
+                    key={model.id}
                 />
             );
 
@@ -54,13 +87,29 @@ export default function Home() {
 
     }
 
-    const getCharacterCards = () => {
+    const getCards = () => {
 
-        return characters.map(character => {
+        if (currentData === 'quotes') {
+
+            return data.map(quote => {
+
+                return (
+
+                    <QuoteCard
+                        quote={quote}
+                        key={quote.id}
+                    />
+                );
+
+            });
+
+        }
+
+        return data.map(character => {
 
             return (
 
-                <CharacterCard 
+                <CharacterCard
                     character={character}
                     key={character.id}
                 />
@@ -75,8 +124,6 @@ export default function Home() {
 
         setErrorMessage(null);
 
-        if (errorMessage === 'Failed to load characters.') return await getCharacters();
-
     }
 
     return (
@@ -87,22 +134,22 @@ export default function Home() {
                 {getDataButtons()}
             </DataButtonHolder>
 
-            {characters.length > 0 ?
+            {data.length > 0 ?
 
                 <CardHolder>
 
-                    {getCharacterCards()}
+                    {getCards()}
 
                 </CardHolder>
-                
-                : errorMessage ? 
 
-                <LoadingError
-                    message={errorMessage}
-                    handleClick={handleTryAgain}
-                />
-                
-                : <Loading />}
+                : errorMessage ?
+
+                    <LoadingError
+                        message={errorMessage}
+                        handleClick={handleTryAgain}
+                    />
+
+                    : <Loading />}
         </>
     );
 }

client/src/services/quoteService.js

@@ -0,0 +1,19 @@
+import { baseUrl, versionHeader, versionHeaderValue } from '../constants';
+
+class QuoteService {
+
+    getQuotes = async () => {
+
+        const res = await fetch(`${baseUrl}/api/quotes`, {
+            headers: {
+                [versionHeader]: versionHeaderValue
+            }
+        });
+
+        return res;
+
+    }
+
+}
+
+export default QuoteService;