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",
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"lib": ["dom", "dom.iterable", "esnext"],
|
||||
"lib": [
|
||||
"dom",
|
||||
"dom.iterable",
|
||||
"esnext"
|
||||
],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"strict": true,
|
||||
|
|
@ -16,8 +20,21 @@
|
|||
"isolatedModules": true,
|
||||
"jsx": "preserve",
|
||||
"incremental": true,
|
||||
"baseUrl": "."
|
||||
"baseUrl": ".",
|
||||
"plugins": [
|
||||
{
|
||||
"name": "next"
|
||||
}
|
||||
]
|
||||
},
|
||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "**/*.mjs"],
|
||||
"exclude": ["node_modules"]
|
||||
"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