pages

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>
     </>

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>
+                </Link>
-                <a className="rounded-md px-3 py-2 text-sm font-medium text-primary-50 hover:bg-primary-700 hover:text-white">
+                <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>
+                </Link>
-                <a className="rounded-md px-3 py-2 text-sm font-medium text-primary-50 hover:bg-primary-700 hover:text-white">
+                <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>
+                </Link>
-                <a className="rounded-md px-3 py-2 text-sm font-medium text-primary-50 hover:bg-primary-700 hover:text-white">
+                <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>

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
+  }
+}

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
+  }
+}

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)
+      const myPlayer = await db.collection("players").insertOne(JSON.parse(req.body))
-      let myPost = await db.collection("players").insertOne(bodyObject)
+      res.json(myPlayer)
-      res.json(myPost.ops[0])
       break
     case "GET":
-      const allPosts = await db.collection("players").find({}).toArray()
+      const allPlayers = await db.collection("players").find({}).toArray()
-      res.json({ status: 200, data: allPosts })
+      res.json({ status: 200, data: allPlayers })
       break
   }
 }

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
+  }
+}

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>
+    </>
+  )
+}

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>
+    </>
+  )
+}

pages/index.tsx

@@ -1,19 +1,4 @@
-export async function getServerSideProps({ res }) {
+export default function Web() {
-  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 }) {
   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>

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>
+    </>
+  )
+}

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>
+    </>
+  )
+}