wired up home page adjust image sizes

client/src/components/cardHolder.js

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

client/src/components/characterCard.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import Card from 'react-bootstrap/Card';
+
+export default function CharacterCard(props) {
+    
+    const characterName = props.character.fullName;
+    const image = new URL(props.character.image).pathname;
+    
+    return(
+
+        <Card style={{ width: '22rem' }} className='p-1 m-3'>
+            <Card.Img variant='top' src={image} width='100%' />
+            <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.
+                </Card.Text>
+            </Card.Body>
+        </Card>
+
+    );
+}

client/src/components/greeting.js

@@ -8,13 +8,11 @@ export default function Greeting() {
     return (
         <Container>
 
-            <Row>
+            <Row className='py-5'>
 
                 <Col className='text-center'>
 
-                    <h1
-                        className='pt-5'
-                    >
+                    <h1>
                         The <span className='highlight'>Criminal</span> Minds API
                     </h1>
 

client/src/constants.js

@@ -1,3 +1,12 @@
-const baseUrl = process.env.NODE_ENV == 'development' ?
+const baseUrl = process.env.NODE_ENV === 'development' ?
     '' :
     'http://criminalmindsapi.azurewebsites.net';
+
+const versionHeader = 'x-api-version';
+const versionHeaderValue = 1;
+
+export {
+    baseUrl,
+    versionHeader,
+    versionHeaderValue
+};

client/src/pages/home.js

@@ -1,11 +1,52 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 
 import Greeting from '../components/greeting';
+import CardHolder from '../components/cardHolder';
+import CharacterCard from '../components/characterCard';
+
+import CharacterService from '../services/characterService';
+const characterService = new CharacterService();
 
 export default function Home() {
+
+    const [characters, setCharacters] = useState([]);
+
+    const getCharacters = async () => {
+
+        const res = await characterService.getCharacters();
+        
+        const characters = await res.json();
+
+        return setCharacters(characters);
+
+    }
+
+    useEffect(() => {
+        getCharacters();
+    }, []);
+
+    const getCharacterCards = () => {
+
+        return characters.map(character => {
+
+            return (
+
+                <CharacterCard 
+                    character={character}
+                />
+
+            );
+
+        })
+
+    }
+
     return (
         <>
             <Greeting/>
+            <CardHolder>
+                {getCharacterCards()}
+            </CardHolder>
         </>
     );
 }

client/src/services/characterService.js

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

client/src/setupProxy.js

@@ -1,7 +1,10 @@
 const { createProxyMiddleware } = require('http-proxy-middleware');
 
 const context = [
-    '/api/seasons'
+    '/api/seasons',
+    '/api/characters',
+    '/api/quotes',
+    '/api/episodes'
 ];
 
 module.exports = function (app) {

client/src/styles/app.css

@@ -1,7 +1,10 @@
 /* Bootstrap Overrides */
+.navbar-toggler {
+    border: none;
+}
 
 .navbar-toggler:focus,
-.navbar-toggerl:active:focus {
+.navbar-toggler:active:focus {
 
     box-shadow: none;