refactor to app directory
This commit is contained in:
isaconantonis
parent
4b9364fdb3
commit
3c8a7543bf
17 changed files with 87 additions and 307 deletions
11
app/actions.ts
Normal file
11
app/actions.ts
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
import client from "@/lib/mongodb";
|
||||||
|
|
||||||
|
export async function getTeamPlayers() {
|
||||||
|
const db = client.db("SloppyFuckers")
|
||||||
|
return await db.collection("players").find({}).toArray();
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function getEvents() {
|
||||||
|
const db = client.db("SloppyFuckers")
|
||||||
|
return await db.collection("events").find({}).toArray();
|
||||||
|
}
|
||||||
42
app/layout.tsx
Normal file
42
app/layout.tsx
Normal file
|
|
@ -0,0 +1,42 @@
|
||||||
|
import { Metadata } from "next"
|
||||||
|
import Footer from "../components/Footer/Footer"
|
||||||
|
import Navbar from "../components/Navbar/Navbar"
|
||||||
|
|
||||||
|
import "../styles/tailwind.css"
|
||||||
|
|
||||||
|
export const metadata: Metadata = {
|
||||||
|
title: "IsaCon",
|
||||||
|
description: "IsaCon Consulting",
|
||||||
|
openGraph: {
|
||||||
|
type: "website",
|
||||||
|
url: "https://isacon.be",
|
||||||
|
title: "IsaCon",
|
||||||
|
description: "IsaCon Consulting",
|
||||||
|
siteName: "IsaCon",
|
||||||
|
images: [
|
||||||
|
{
|
||||||
|
url: "/Isacon logo RBG_1.png",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function RootLayout({
|
||||||
|
// Layouts must accept a children prop.
|
||||||
|
// This will be populated with nested layouts or pages
|
||||||
|
children,
|
||||||
|
}: {
|
||||||
|
children: React.ReactNode
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<html lang="en">
|
||||||
|
<body>
|
||||||
|
<div className="flex min-h-screen flex-col justify-between">
|
||||||
|
<Navbar />
|
||||||
|
<main className="mb-auto min-h-screen bg-primary-50">{children}</main>
|
||||||
|
<Footer />
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
)
|
||||||
|
}
|
||||||
13
app/page.tsx
Normal file
13
app/page.tsx
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
export default function Web() {
|
||||||
|
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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -1,23 +0,0 @@
|
||||||
import Head from "next/head"
|
|
||||||
import Footer from "../Footer/Footer"
|
|
||||||
import Navbar from "../Navbar/Navbar"
|
|
||||||
|
|
||||||
export default function Layout({ children }) {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<Head>
|
|
||||||
<meta property="og:url" content="https://isacon.be" />
|
|
||||||
<meta property="og:image" content="/Isacon logo RBG_1.png" />
|
|
||||||
<meta property="og:image:width" content="1200" />
|
|
||||||
<meta property="og:image:height" content="630" />
|
|
||||||
<meta name="twitter:card" content="summary_large_image" />
|
|
||||||
<title>IsaCon</title>
|
|
||||||
</Head>
|
|
||||||
<div className="flex min-h-screen flex-col justify-between">
|
|
||||||
<Navbar />
|
|
||||||
<main className="min-h-screen mb-auto bg-primary-50">{children}</main>
|
|
||||||
<Footer />
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
@ -1,29 +0,0 @@
|
||||||
import { render } from "@testing-library/react"
|
|
||||||
import { AppProps } from "next/app"
|
|
||||||
import MyApp from "./_app"
|
|
||||||
|
|
||||||
// Mock router object with required properties
|
|
||||||
const router = {
|
|
||||||
basePath: "",
|
|
||||||
pathname: "/",
|
|
||||||
query: {},
|
|
||||||
asPath: "/",
|
|
||||||
}
|
|
||||||
|
|
||||||
describe("MyApp", () => {
|
|
||||||
it("should render a component with page props", () => {
|
|
||||||
const props: AppProps = {
|
|
||||||
Component: ({ title }) => (
|
|
||||||
<>
|
|
||||||
<div>Test Component</div>
|
|
||||||
<div>{title}</div>
|
|
||||||
</>
|
|
||||||
),
|
|
||||||
pageProps: { title: "Test Page" },
|
|
||||||
router: router as never, // Include mocked router object in props
|
|
||||||
}
|
|
||||||
const { getByText } = render(<MyApp {...props} />)
|
|
||||||
expect(getByText("Test Component")).toBeInTheDocument()
|
|
||||||
expect(getByText("Test Page")).toBeInTheDocument()
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
@ -1,12 +0,0 @@
|
||||||
import "../styles/tailwind.css"
|
|
||||||
import { AppProps } from "next/app"
|
|
||||||
import Layout from "../components/Layout/Layout";
|
|
||||||
|
|
||||||
|
|
||||||
function MyApp({ Component, pageProps }: AppProps) {
|
|
||||||
return <Layout>
|
|
||||||
<Component {...pageProps} />
|
|
||||||
</Layout>
|
|
||||||
}
|
|
||||||
|
|
||||||
export default MyApp
|
|
||||||
|
|
@ -1,15 +0,0 @@
|
||||||
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
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,15 +0,0 @@
|
||||||
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
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,5 +0,0 @@
|
||||||
import { NextApiRequest, NextApiResponse } from "next"
|
|
||||||
|
|
||||||
export default function handler(req: NextApiRequest, res: NextApiResponse) {
|
|
||||||
res.status(200).json({ status: "ok" })
|
|
||||||
}
|
|
||||||
|
|
@ -1,15 +0,0 @@
|
||||||
import client from "../../lib/mongodb"
|
|
||||||
|
|
||||||
export default async function handler(req, res) {
|
|
||||||
const db = client.db("SloppyFuckers")
|
|
||||||
switch (req.method) {
|
|
||||||
case "POST":
|
|
||||||
const myPlayer = await db.collection("players").insertOne(JSON.parse(req.body))
|
|
||||||
res.json(myPlayer)
|
|
||||||
break
|
|
||||||
case "GET":
|
|
||||||
const allPlayers = await db.collection("players").find({}).toArray()
|
|
||||||
res.json({ status: 200, data: allPlayers })
|
|
||||||
break
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,15 +0,0 @@
|
||||||
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
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,67 +0,0 @@
|
||||||
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 className="mb-2 font-bold">Games</h2>
|
|
||||||
{allGames.data.map((game) => (
|
|
||||||
<div key={game.id}>
|
|
||||||
<div className="mb-2 flex max-w-sm flex-wrap overflow-hidden rounded bg-white shadow-lg">
|
|
||||||
<div className="grid w-1/2 content-center p-2">
|
|
||||||
{findTeam(game.homeTeam).logo?._meta.url ? (
|
|
||||||
<img src={findTeam(game.homeTeam).logo?._meta.url} alt="Sunset in the mountains" />
|
|
||||||
) : (
|
|
||||||
findTeam(game.homeTeam).name
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div className="grid w-1/2 content-center p-2">
|
|
||||||
{findTeam(game.awayTeam).logo?._meta.url ? (
|
|
||||||
<img src={findTeam(game.awayTeam).logo?._meta.url} alt="Sunset in the mountains" />
|
|
||||||
) : (
|
|
||||||
findTeam(game.awayTeam).name
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div className="flex w-full justify-around p-2">
|
|
||||||
<span>{game.homeScore}</span>
|
|
||||||
<span>-</span>
|
|
||||||
<span>{game.awayScore}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
@ -1,16 +0,0 @@
|
||||||
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>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
@ -1,15 +0,0 @@
|
||||||
export default function Web() {
|
|
||||||
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>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
@ -1,34 +0,0 @@
|
||||||
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>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
@ -1,42 +0,0 @@
|
||||||
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>
|
|
||||||
<div className="flex flex-wrap items-center justify-center">
|
|
||||||
{allPlayers.data.map((player) => (
|
|
||||||
<div className="p-2" key={player.id}>
|
|
||||||
{player.avatar?._meta.url ? (
|
|
||||||
<img className="max-w-sm" src={player.avatar?._meta.url} alt="Sunset in the mountains" />
|
|
||||||
) : (
|
|
||||||
player.name
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
@ -3,7 +3,11 @@
|
||||||
"display": "Next.js",
|
"display": "Next.js",
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"target": "es5",
|
"target": "es5",
|
||||||
"lib": ["dom", "dom.iterable", "esnext"],
|
"lib": [
|
||||||
|
"dom",
|
||||||
|
"dom.iterable",
|
||||||
|
"esnext"
|
||||||
|
],
|
||||||
"allowJs": true,
|
"allowJs": true,
|
||||||
"skipLibCheck": true,
|
"skipLibCheck": true,
|
||||||
"strict": true,
|
"strict": true,
|
||||||
|
|
@ -16,8 +20,21 @@
|
||||||
"isolatedModules": true,
|
"isolatedModules": true,
|
||||||
"jsx": "preserve",
|
"jsx": "preserve",
|
||||||
"incremental": true,
|
"incremental": true,
|
||||||
"baseUrl": "."
|
"baseUrl": ".",
|
||||||
},
|
"plugins": [
|
||||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "**/*.mjs"],
|
{
|
||||||
"exclude": ["node_modules"]
|
"name": "next"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"include": [
|
||||||
|
"next-env.d.ts",
|
||||||
|
"**/*.ts",
|
||||||
|
"**/*.tsx",
|
||||||
|
"**/*.mjs",
|
||||||
|
".next/types/**/*.ts"
|
||||||
|
],
|
||||||
|
"exclude": [
|
||||||
|
"node_modules"
|
||||||
|
]
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue