From e0df9ed858d65d8e913b01f62257bfd65f409b98 Mon Sep 17 00:00:00 2001
From: isaconantonis <sam.antonis@isacon.be>
Date: Fri, 28 Jul 2023 15:33:57 +0200
Subject: [PATCH] pages

---
 components/Layout/Layout.tsx |  4 +--
 components/Navbar/Navbar.tsx | 32 +++++++++++++++++-------
 pages/api/events.ts          | 15 ++++++++++++
 pages/api/games.ts           | 15 ++++++++++++
 pages/api/players.ts         |  9 +++----
 pages/api/teams.ts           | 15 ++++++++++++
 pages/calendar.tsx           | 47 ++++++++++++++++++++++++++++++++++++
 pages/dashboard.tsx          | 16 ++++++++++++
 pages/index.tsx              | 20 +--------------
 pages/projects.tsx           | 34 ++++++++++++++++++++++++++
 pages/team.tsx               | 34 ++++++++++++++++++++++++++
 11 files changed, 206 insertions(+), 35 deletions(-)
 create mode 100644 pages/api/events.ts
 create mode 100644 pages/api/games.ts
 create mode 100644 pages/api/teams.ts
 create mode 100644 pages/calendar.tsx
 create mode 100644 pages/dashboard.tsx
 create mode 100644 pages/projects.tsx
 create mode 100644 pages/team.tsx

diff --git a/components/Layout/Layout.tsx b/components/Layout/Layout.tsx
index bc66007..e10f680 100644
--- a/components/Layout/Layout.tsx
+++ b/components/Layout/Layout.tsx
@@ -13,9 +13,9 @@ export default function Layout({ children }) {
         <meta name="twitter:card" content="summary_large_image" />
         <title>IsaCon</title>
       </Head>
-      <div className="flex h-screen flex-col justify-between">
+      <div className="flex min-h-screen flex-col justify-between">
         <Navbar />
-        <main className="h-screen mb-auto bg-primary-50">{children}</main>
+        <main className="min-h-screen mb-auto bg-primary-50">{children}</main>
         <Footer />
       </div>
     </>
diff --git a/components/Navbar/Navbar.tsx b/components/Navbar/Navbar.tsx
index 636272c..fcc180c 100644
--- a/components/Navbar/Navbar.tsx
+++ b/components/Navbar/Navbar.tsx
@@ -1,6 +1,8 @@
+import Link from "next/link"
+
 export default function Navbar() {
   return (
-    <nav className="bg-primary-800">
+    <nav className="fixed w-full bg-primary-800">
       <div className="mx-auto px-4 sm:px-6 lg:px-8">
         <div className="flex h-16 items-center justify-between">
           <div className="flex items-center">
@@ -9,18 +11,30 @@ export default function Navbar() {
             </div>
             <div className="hidden sm:ml-6 sm:block">
               <div className="flex space-x-4">
-                <a className="rounded-md px-3 py-2 text-sm font-medium text-primary-50 hover:bg-primary-700 hover:text-white">
+                <Link
+                  href="/dashboard"
+                  className="rounded-md px-3 py-2 text-sm font-medium text-primary-50 hover:bg-primary-700 hover:text-white"
+                >
                   Dashboard
-                </a>
-                <a className="rounded-md px-3 py-2 text-sm font-medium text-primary-50 hover:bg-primary-700 hover:text-white">
+                </Link>
+                <Link
+                  href="/team"
+                  className="rounded-md px-3 py-2 text-sm font-medium text-primary-50 hover:bg-primary-700 hover:text-white"
+                >
                   Team
-                </a>
-                <a className="rounded-md px-3 py-2 text-sm font-medium text-primary-50 hover:bg-primary-700 hover:text-white">
+                </Link>
+                <Link
+                  href="/projects"
+                  className="rounded-md px-3 py-2 text-sm font-medium text-primary-50 hover:bg-primary-700 hover:text-white"
+                >
                   Projects
-                </a>
-                <a className="rounded-md px-3 py-2 text-sm font-medium text-primary-50 hover:bg-primary-700 hover:text-white">
+                </Link>
+                <Link
+                  href="/calendar"
+                  className="rounded-md px-3 py-2 text-sm font-medium text-primary-50 hover:bg-primary-700 hover:text-white"
+                >
                   Calendar
-                </a>
+                </Link>
               </div>
             </div>
           </div>
diff --git a/pages/api/events.ts b/pages/api/events.ts
new file mode 100644
index 0000000..0682d30
--- /dev/null
+++ b/pages/api/events.ts
@@ -0,0 +1,15 @@
+import client from "../../lib/mongodb"
+
+export default async function handler(req, res) {
+  const db = client.db("SloppyFuckers")
+  switch (req.method) {
+    case "POST":
+      const myEvent = await db.collection("events").insertOne(JSON.parse(req.body))
+      res.json(myEvent)
+      break
+    case "GET":
+      const allEvents = await db.collection("events").find({}).toArray()
+      res.json({ status: 200, data: allEvents })
+      break
+  }
+}
diff --git a/pages/api/games.ts b/pages/api/games.ts
new file mode 100644
index 0000000..14acf23
--- /dev/null
+++ b/pages/api/games.ts
@@ -0,0 +1,15 @@
+import client from "../../lib/mongodb"
+
+export default async function handler(req, res) {
+  const db = client.db("SloppyFuckers")
+  switch (req.method) {
+    case "POST":
+      const myEvent = await db.collection("games").insertOne(JSON.parse(req.body))
+      res.json(myEvent)
+      break
+    case "GET":
+      const allEvents = await db.collection("games").find({}).toArray()
+      res.json({ status: 200, data: allEvents })
+      break
+  }
+}
diff --git a/pages/api/players.ts b/pages/api/players.ts
index e05ad78..0d03b00 100644
--- a/pages/api/players.ts
+++ b/pages/api/players.ts
@@ -4,13 +4,12 @@ export default async function handler(req, res) {
   const db = client.db("SloppyFuckers")
   switch (req.method) {
     case "POST":
-      let bodyObject = JSON.parse(req.body)
-      let myPost = await db.collection("players").insertOne(bodyObject)
-      res.json(myPost.ops[0])
+      const myPlayer = await db.collection("players").insertOne(JSON.parse(req.body))
+      res.json(myPlayer)
       break
     case "GET":
-      const allPosts = await db.collection("players").find({}).toArray()
-      res.json({ status: 200, data: allPosts })
+      const allPlayers = await db.collection("players").find({}).toArray()
+      res.json({ status: 200, data: allPlayers })
       break
   }
 }
diff --git a/pages/api/teams.ts b/pages/api/teams.ts
new file mode 100644
index 0000000..c8af8d3
--- /dev/null
+++ b/pages/api/teams.ts
@@ -0,0 +1,15 @@
+import client from "../../lib/mongodb"
+
+export default async function handler(req, res) {
+  const db = client.db("SloppyFuckers")
+  switch (req.method) {
+    case "POST":
+      const myEvent = await db.collection("teams").insertOne(JSON.parse(req.body))
+      res.json(myEvent)
+      break
+    case "GET":
+      const allEvents = await db.collection("teams").find({}).toArray()
+      res.json({ status: 200, data: allEvents })
+      break
+  }
+}
diff --git a/pages/calendar.tsx b/pages/calendar.tsx
new file mode 100644
index 0000000..3b889fa
--- /dev/null
+++ b/pages/calendar.tsx
@@ -0,0 +1,47 @@
+export async function getServerSideProps({ res }) {
+  res.setHeader("Cache-Control", "public, s-maxage=10, stale-while-revalidate=59")
+  const gamesResponse = await fetch("http://localhost:3000/api/games", {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+    },
+  })
+  const allGames = await gamesResponse.json()
+
+  const teamsResponse = await fetch("http://localhost:3000/api/teams", {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+    },
+  })
+  const allTeams = await teamsResponse.json()
+
+  return {
+    props: { allGames, allTeams },
+  }
+}
+
+export default function Dashboard({ allGames, allTeams }) {
+  const findTeam = (id) => {
+    return allTeams?.data.find((team) => team._id === id)
+  }
+  return (
+    <>
+      <section>
+        <div className="mx-auto grid max-w-screen-xl px-4 py-8 text-center lg:py-16">
+          <div className="mx-auto place-self-center">
+            <h1 className="mb-4 max-w-2xl text-4xl font-extrabold leading-none tracking-tight md:text-5xl xl:text-6xl">
+              IsaCon
+            </h1>
+            <h2>Games</h2>
+            {allGames.data.map((game) => (
+              <div key={game.id}>
+                {findTeam(game.homeTeam).name} - {findTeam(game.awayTeam).name}
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+    </>
+  )
+}
diff --git a/pages/dashboard.tsx b/pages/dashboard.tsx
new file mode 100644
index 0000000..1dcbe99
--- /dev/null
+++ b/pages/dashboard.tsx
@@ -0,0 +1,16 @@
+export default function Dashboard() {
+  return (
+    <>
+      <section>
+        <div className="mx-auto grid max-w-screen-xl px-4 py-8 text-center lg:py-16">
+          <div className="mx-auto place-self-center">
+            <h1 className="mb-4 max-w-2xl text-4xl font-extrabold leading-none tracking-tight md:text-5xl xl:text-6xl">
+              IsaCon
+            </h1>
+            <h2>Dashboard</h2>
+          </div>
+        </div>
+      </section>
+    </>
+  )
+}
diff --git a/pages/index.tsx b/pages/index.tsx
index 1f623bd..fec4088 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,19 +1,4 @@
-export async function getServerSideProps({ res }) {
-  res.setHeader("Cache-Control", "public, s-maxage=10, stale-while-revalidate=59")
-  const response = await fetch("http://localhost:3000/api/players", {
-    method: "GET",
-    headers: {
-      "Content-Type": "application/json",
-    },
-  })
-  const allPlayers = await response.json()
-
-  return {
-    props: { allPlayers },
-  }
-}
-
-export default function Web({ allPlayers }) {
+export default function Web() {
   return (
     <>
       <section>
@@ -22,9 +7,6 @@ export default function Web({ allPlayers }) {
             <h1 className="mb-4 max-w-2xl text-4xl font-extrabold leading-none tracking-tight md:text-5xl xl:text-6xl">
               IsaCon
             </h1>
-            {allPlayers.data.map((player) => (
-              <div key={player.id}>{player.name}</div>
-            ))}
           </div>
         </div>
       </section>
diff --git a/pages/projects.tsx b/pages/projects.tsx
new file mode 100644
index 0000000..5dacea1
--- /dev/null
+++ b/pages/projects.tsx
@@ -0,0 +1,34 @@
+export async function getServerSideProps({ res }) {
+  res.setHeader("Cache-Control", "public, s-maxage=10, stale-while-revalidate=59")
+  const eventsResponse = await fetch("http://localhost:3000/api/events", {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+    },
+  })
+  const allEvents = await eventsResponse.json()
+
+  return {
+    props: { allEvents },
+  }
+}
+
+export default function Dashboard({ allEvents }) {
+  return (
+    <>
+      <section>
+        <div className="mx-auto grid max-w-screen-xl px-4 py-8 text-center lg:py-16">
+          <div className="mx-auto place-self-center">
+            <h1 className="mb-4 max-w-2xl text-4xl font-extrabold leading-none tracking-tight md:text-5xl xl:text-6xl">
+              IsaCon
+            </h1>
+            <h2>Events</h2>
+            {allEvents.data.map((event) => (
+              <div key={event.id}>{event.name}</div>
+            ))}
+          </div>
+        </div>
+      </section>
+    </>
+  )
+}
diff --git a/pages/team.tsx b/pages/team.tsx
new file mode 100644
index 0000000..dd48b5e
--- /dev/null
+++ b/pages/team.tsx
@@ -0,0 +1,34 @@
+export async function getServerSideProps({ res }) {
+  res.setHeader("Cache-Control", "public, s-maxage=10, stale-while-revalidate=59")
+  const playersResponse = await fetch("http://localhost:3000/api/players", {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+    },
+  })
+  const allPlayers = await playersResponse.json()
+
+  return {
+    props: { allPlayers },
+  }
+}
+
+export default function Dashboard({ allPlayers }) {
+  return (
+    <>
+      <section>
+        <div className="mx-auto grid max-w-screen-xl px-4 py-8 text-center lg:py-16">
+          <div className="mx-auto place-self-center">
+            <h1 className="mb-4 max-w-2xl text-4xl font-extrabold leading-none tracking-tight md:text-5xl xl:text-6xl">
+              IsaCon
+            </h1>
+            <h2>Players</h2>
+            {allPlayers.data.map((player) => (
+              <div key={player.id}>{player.name}</div>
+            ))}
+          </div>
+        </div>
+      </section>
+    </>
+  )
+}