Merge branch 'master' into add-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

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

client/src/components/dataButtonHolder.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import Container from 'react-bootstrap/Container';
+import Row from 'react-bootstrap/Row';
+
+export default function DataButtonHolder(props) {
+    return(
+        <Container fluid>
+
+            <Row className="d-flex flex-row justify-content-center align-items-center">
+                
+                {props.children}
+            
+            </Row>
+
+        </Container>
+    );
+}

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,44 +5,111 @@ import CardHolder from '../components/cardHolder';
 import CharacterCard from '../components/characterCard';
 import Loading from '../components/loading';
 import LoadingError from '../components/loadingError';
+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 [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 getCharacterCards = () => {
+    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 }];
 
-        return characters.map(character => {
+    const getDataButtons = () => {
+
+        return models.map(model => {
+
+            return (
+                <DataButton
+                    label={model.name}
+                    handleClick={model.handleClick}
+                    key={model.id}
+                />
+            );
+
+        });
+
+    }
+
+    const getCards = () => {
+
+        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}
                 />
@@ -57,30 +124,32 @@ export default function Home() {
 
         setErrorMessage(null);
 
-        if (errorMessage === 'Failed to load characters.') return await getCharacters();
-
     }
 
     return (
         <>
             <Greeting />
 
-            {characters.length > 0 ?
+            <DataButtonHolder>
+                {getDataButtons()}
+            </DataButtonHolder>
+
+            {data.length > 0 ?
 
                 <CardHolder>
 
-                    {getCharacterCards()}
+                    {getCards()}
 
                 </CardHolder>
-                
-                : errorMessage ? 
 
-                <LoadingError
+                : errorMessage ?
-                    message={errorMessage}
+
-                    handleClick={handleTryAgain}
+                    <LoadingError
-                />
+                        message={errorMessage}
-                
+                        handleClick={handleTryAgain}
-                : <Loading />}
+                    />
+
+                    : <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;