From d285ac33a0d61cb0e14f23a340250f703f64a18c Mon Sep 17 00:00:00 2001
From: bytesparallel <jason.ross841@gmail.com>
Date: Wed, 9 Feb 2022 15:04:11 -0600
Subject: [PATCH] completed ch7 front-end work

---
 src/components/ApplicationViews.js  | 14 ++++++++++----
 src/components/game/EventList.js    | 23 +++++++++++++++++++++++
 src/components/game/EventManager.js |  8 ++++++++
 src/components/game/GameList.js     | 24 ++++++++++++++++++++++++
 src/components/game/GameManager.js  |  8 ++++++++
 5 files changed, 73 insertions(+), 4 deletions(-)
 create mode 100644 src/components/game/EventList.js
 create mode 100644 src/components/game/EventManager.js
 create mode 100644 src/components/game/GameList.js
 create mode 100644 src/components/game/GameManager.js

diff --git a/src/components/ApplicationViews.js b/src/components/ApplicationViews.js
index f6d32e0..56d2011 100644
--- a/src/components/ApplicationViews.js
+++ b/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>
     </>
-}
+}
\ No newline at end of file
diff --git a/src/components/game/EventList.js b/src/components/game/EventList.js
new file mode 100644
index 0000000..c65ad54
--- /dev/null
+++ b/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>
+    )
+}
\ No newline at end of file
diff --git a/src/components/game/EventManager.js b/src/components/game/EventManager.js
new file mode 100644
index 0000000..86daf5f
--- /dev/null
+++ b/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())
+}
\ No newline at end of file
diff --git a/src/components/game/GameList.js b/src/components/game/GameList.js
new file mode 100644
index 0000000..7983eb0
--- /dev/null
+++ b/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>
+    )
+}
\ No newline at end of file
diff --git a/src/components/game/GameManager.js b/src/components/game/GameManager.js
new file mode 100644
index 0000000..69fd552
--- /dev/null
+++ b/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())
+}
\ No newline at end of file