From 8c67681825fc8b6df613caf954dc163a1205b816 Mon Sep 17 00:00:00 2001 From: Owen Rees Date: Tue, 23 May 2023 16:57:07 +0200 Subject: [PATCH] map and table added --- app/api/tournaments/route.ts | 15 ++++++---- app/page.tsx | 10 +++---- app/tournois/page.tsx | 54 +++++++++++++--------------------- components/Layout.tsx | 4 +-- components/Navbar.tsx | 45 +++++++++++++++++++++++++++- components/TournamentMap.tsx | 24 +++++++++++++++ components/TournamentTable.tsx | 42 ++++++++++++++++++++++++++ package-lock.json | 30 +++++++++++++++++++ package.json | 2 ++ tailwind.config.js | 18 ++++-------- 10 files changed, 184 insertions(+), 60 deletions(-) create mode 100644 components/TournamentMap.tsx create mode 100644 components/TournamentTable.tsx diff --git a/app/api/tournaments/route.ts b/app/api/tournaments/route.ts index fae38b5..0090407 100644 --- a/app/api/tournaments/route.ts +++ b/app/api/tournaments/route.ts @@ -1,13 +1,18 @@ -import type { NextApiRequest, NextApiResponse } from "next"; import clientPromise from "@/lib/mongodb"; -export async function GET(req: NextApiRequest, res: NextApiResponse) { - // TODO delete req / res ? +/** + * Tournament data API endpoint + * @route /api/tournaments + * @internal + */ +export async function GET() { try { const client = await clientPromise; const db = client.db("tournamentsFranceDB"); - // const data = await db.collection("tournaments").find({}).toArray(); - // converts date from string into a date and then orders by date + + /** + * Converts date from string into a date to allow ordering + */ const data = await db .collection("tournaments") .aggregate([ diff --git a/app/page.tsx b/app/page.tsx index cca751f..977af48 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,9 +1,9 @@ -import Image from 'next/image' +import Layout from "@/components/Layout"; export default function Home() { return ( -
- -
- ) + +
+ + ); } diff --git a/app/tournois/page.tsx b/app/tournois/page.tsx index 1e91624..29aa7af 100644 --- a/app/tournois/page.tsx +++ b/app/tournois/page.tsx @@ -1,16 +1,22 @@ +import dynamic from "next/dynamic"; import Layout from "@/components/Layout"; +import TournamentTable from "@/components/TournamentTable"; -export interface TournamentType { - _id: string; - location: string; - department: string; - tournament: string; - url: string; - time_control: string; - date: string; - coordinates: [number, number]; -} +/** + * Imports the tournament map component, ensuring CSR only. + * @remarks SSR is not supported by react-leaflet + */ +const TournamentMapNoSSR = dynamic( + () => import("../../components/TournamentMap"), + { + ssr: false, + } +); +/** + * Retrieves tournament data from /api/tournaments + * @remarks The result is cached for the revalidation period in seconds + */ async function getTournaments() { const res = await fetch("http://localhost:3000/api/tournaments", { next: { revalidate: 300 }, @@ -19,33 +25,13 @@ async function getTournaments() { } export default async function Tournaments() { - const data = await getTournaments(); - console.log(data); - - const tournaments = data.map((t: TournamentType) => ( - - {t.date} - {t.location} - {t.tournament} - {t.time_control} - - )); + const tournamentData = await getTournaments(); + console.log(tournamentData); return ( -
- - - - - - - - - - {tournaments} -
DateVilleTournoisCadence
-
+ + ); } diff --git a/components/Layout.tsx b/components/Layout.tsx index fddb624..6169224 100644 --- a/components/Layout.tsx +++ b/components/Layout.tsx @@ -6,9 +6,9 @@ export default function Layout({ children: React.ReactNode; }) { return ( - <> +
{children} - +
); } diff --git a/components/Navbar.tsx b/components/Navbar.tsx index b2315c0..c1b4cae 100644 --- a/components/Navbar.tsx +++ b/components/Navbar.tsx @@ -1,3 +1,46 @@ +import Link from "next/link"; + export default function Navbar() { - return ; + return ( + + ); } diff --git a/components/TournamentMap.tsx b/components/TournamentMap.tsx new file mode 100644 index 0000000..05af869 --- /dev/null +++ b/components/TournamentMap.tsx @@ -0,0 +1,24 @@ +"use client"; + +import "leaflet/dist/leaflet.css"; +import { MapContainer, TileLayer, Marker } from "react-leaflet"; + +export default function TournamentMap() { + const center: number[] = [47.0844, 2.3964]; + + return ( +
+ + + +
+ ); +} diff --git a/components/TournamentTable.tsx b/components/TournamentTable.tsx new file mode 100644 index 0000000..3f768c1 --- /dev/null +++ b/components/TournamentTable.tsx @@ -0,0 +1,42 @@ +interface TournamentType { + _id: string; + location: string; + department: string; + tournament: string; + url: string; + time_control: string; + date: string; + coordinates: [number, number]; +} + +export default function TournamentTable({ tournamentData }) { + const tournaments = tournamentData.map((t: TournamentType) => ( + + {t.date} + {t.location} + + {t.tournament} + + {t.time_control} + + )); + + return ( +
+ + + + + + + + + + {tournaments} +
DateVilleTournoisCadence
+
+ ); +} diff --git a/package-lock.json b/package-lock.json index 874be0d..8240384 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,11 +14,13 @@ "autoprefixer": "10.4.14", "eslint": "8.41.0", "eslint-config-next": "13.4.3", + "leaflet": "^1.9.4", "mongodb": "^5.5.0", "next": "13.4.3", "postcss": "8.4.23", "react": "18.2.0", "react-dom": "18.2.0", + "react-leaflet": "^4.2.1", "tailwindcss": "3.3.2", "typescript": "5.0.4" }, @@ -1430,6 +1432,16 @@ "url": "https://opencollective.com/unts" } }, + "node_modules/@react-leaflet/core": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-2.1.0.tgz", + "integrity": "sha512-Qk7Pfu8BSarKGqILj4x7bCSZ1pjuAPZ+qmRwH5S7mDS91VSbVVsJSrW4qA+GPrro8t69gFYVMWb1Zc4yFmPiVg==", + "peerDependencies": { + "leaflet": "^1.9.0", + "react": "^18.0.0", + "react-dom": "^18.0.0" + } + }, "node_modules/@rushstack/eslint-patch": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.3.0.tgz", @@ -5805,6 +5817,11 @@ "language-subtag-registry": "~0.3.2" } }, + "node_modules/leaflet": { + "version": "1.9.4", + "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz", + "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==" + }, "node_modules/leven": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz", @@ -6888,6 +6905,19 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "node_modules/react-leaflet": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-4.2.1.tgz", + "integrity": "sha512-p9chkvhcKrWn/H/1FFeVSqLdReGwn2qmiobOQGO3BifX+/vV/39qhY8dGqbdcPh1e6jxh/QHriLXr7a4eLFK4Q==", + "dependencies": { + "@react-leaflet/core": "^2.1.0" + }, + "peerDependencies": { + "leaflet": "^1.9.0", + "react": "^18.0.0", + "react-dom": "^18.0.0" + } + }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", diff --git a/package.json b/package.json index f9da16c..f56afac 100644 --- a/package.json +++ b/package.json @@ -16,11 +16,13 @@ "autoprefixer": "10.4.14", "eslint": "8.41.0", "eslint-config-next": "13.4.3", + "leaflet": "^1.9.4", "mongodb": "^5.5.0", "next": "13.4.3", "postcss": "8.4.23", "react": "18.2.0", "react-dom": "18.2.0", + "react-leaflet": "^4.2.1", "tailwindcss": "3.3.2", "typescript": "5.0.4" }, diff --git a/tailwind.config.js b/tailwind.config.js index 8c4d1b2..73c536b 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,18 +1,10 @@ /** @type {import('tailwindcss').Config} */ module.exports = { content: [ - './pages/**/*.{js,ts,jsx,tsx,mdx}', - './components/**/*.{js,ts,jsx,tsx,mdx}', - './app/**/*.{js,ts,jsx,tsx,mdx}', + "./pages/**/*.{js,ts,jsx,tsx,mdx}", + "./components/**/*.{js,ts,jsx,tsx,mdx}", + "./app/**/*.{js,ts,jsx,tsx,mdx}", ], - theme: { - extend: { - backgroundImage: { - 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))', - 'gradient-conic': - 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))', - }, - }, - }, + theme: {}, plugins: [], -} +};