completed ch7 front-end work

src/components/ApplicationViews.js

@@ -1,13 +1,19 @@
 import React from "react"
 import { Route } from "react-router-dom"
-
+import { EventList } from "./game/EventList.js"
+import { GameList } from "./game/GameList.js"
 export const ApplicationViews = () => {
     return <>
         <main style={{
             margin: "5rem 2rem",
-            backgroundColor: "lightgoldenrodyellow"
+            lineHeight: "1.75rem"
         }}>
-            Application views
+            <Route exact path="/">
+                <GameList />
+            </Route>
+            <Route exact path="/">
+                <EventList />
+            </Route>
         </main>
     </>
-}
+}

src/components/game/EventList.js

@@ -0,0 +1,23 @@
+import React, { useEffect, useState } from "react"
+import { getEvents } from "./EventManager.js"
+
+export const EventList = (props) => {
+    const [ events, setEvents ] = useState([])
+
+    useEffect(() => {
+        getEvents().then(data => setEvents(data))
+    }, [])
+
+    return (
+        <article className="events">
+            {
+                events.map(event => {
+                    return <section key={`event--${event.id}`} className="event">
+                        <div className="event__description">{event.description}</div>
+                        <div className="event__date">The event is happening on {event.date} at {event.time}.</div>
+                    </section>
+                })
+            }
+        </article>
+    )
+}

src/components/game/EventManager.js

@@ -0,0 +1,8 @@
+export const getEvents = () => {
+    return fetch("http://localhost:8000/events", {
+        headers:{
+            "Authorization": `Token ${localStorage.getItem("lu_token")}`
+        }
+    })
+        .then(response => response.json())
+}

src/components/game/GameList.js

@@ -0,0 +1,24 @@
+import React, { useEffect, useState } from "react"
+import { getGames } from "./GameManager.js"
+
+export const GameList = (props) => {
+    const [ games, setGames ] = useState([])
+
+    useEffect(() => {
+        getGames().then(data => setGames(data))
+    }, [])
+
+    return (
+        <article className="games">
+            {
+                games.map(game => {
+                    return <section key={`game--${game.id}`} className="game">
+                        <div className="game__title">{game.title} by {game.maker}</div>
+                        <div className="game__players">{game.number_of_players} players needed</div>
+                        <div className="game__skillLevel">Skill level is {game.skill_level}</div>
+                    </section>
+                })
+            }
+        </article>
+    )
+}

src/components/game/GameManager.js

@@ -0,0 +1,8 @@
+export const getGames = () => {
+    return fetch("http://localhost:8000/games", {
+        headers:{
+            "Authorization": `Token ${localStorage.getItem("lu_token")}`
+        }
+    })
+        .then(response => response.json())
+}