From 96eb4e37f1308249524b73c7837f9303674ac0ba Mon Sep 17 00:00:00 2001 From: Owen Rees Date: Wed, 24 May 2023 00:07:34 +0200 Subject: [PATCH] grid split and searchbar --- app/tournois/page.tsx | 9 +++-- components/TournamentMap.tsx | 5 ++- components/TournamentTable.tsx | 73 ++++++++++++++++++++++------------ lib/mongodb.ts | 39 +++++++++--------- package-lock.json | 48 ++++++++++++++++++++++ package.json | 2 + types.ts | 14 +++++++ 7 files changed, 142 insertions(+), 48 deletions(-) create mode 100644 types.ts diff --git a/app/tournois/page.tsx b/app/tournois/page.tsx index 29aa7af..e6fb628 100644 --- a/app/tournois/page.tsx +++ b/app/tournois/page.tsx @@ -1,6 +1,7 @@ import dynamic from "next/dynamic"; import Layout from "@/components/Layout"; import TournamentTable from "@/components/TournamentTable"; +import { Tournament } from "@/types"; /** * Imports the tournament map component, ensuring CSR only. @@ -25,13 +26,15 @@ async function getTournaments() { } export default async function Tournaments() { - const tournamentData = await getTournaments(); + const tournamentData: Tournament[] = await getTournaments(); console.log(tournamentData); return ( - - +
+ + +
); } diff --git a/components/TournamentMap.tsx b/components/TournamentMap.tsx index 05af869..eb0eae3 100644 --- a/components/TournamentMap.tsx +++ b/components/TournamentMap.tsx @@ -2,12 +2,13 @@ import "leaflet/dist/leaflet.css"; import { MapContainer, TileLayer, Marker } from "react-leaflet"; +import { LatLngLiteral } from "leaflet"; export default function TournamentMap() { - const center: number[] = [47.0844, 2.3964]; + const center: LatLngLiteral = { lat: 47.0844, lng: 2.3964 }; return ( -
+
( +export default function TournamentTable({ + tournamentData, +}: TournamentTableProps) { + const tournaments = tournamentData.map((t: Tournament) => ( - {t.date} - {t.location} + {t.date} + {t.location} - {t.tournament} + {t.tournament} - {t.time_control} + {t.time_control} )); return ( -
- - - - - - - +
+
+ +
+
+ + + +
+ +
+
+
DateVilleTournoisCadence
+ + + + + + {tournaments} diff --git a/lib/mongodb.ts b/lib/mongodb.ts index 7aa064f..4db417c 100644 --- a/lib/mongodb.ts +++ b/lib/mongodb.ts @@ -1,31 +1,34 @@ import { MongoClient } from "mongodb"; if (!process.env.MONGODB_URI) { - throw new Error('Invalid environment variable: "MONGODB_URI"'); + throw new Error('Invalid environment variable: "MONGODB_URI"'); } -const uri = process.env.MONGODB_URI -const options = {} +const uri = process.env.MONGODB_URI; +const options = {}; -let client -let clientPromise: Promise +let client; +let clientPromise: Promise; if (!process.env.MONGODB_URI) { - throw new Error('Please add your Mongo URI to .env.local') + throw new Error("Please add your Mongo URI to .env.local"); } -if (process.env.NODE_ENV === 'development') { - // In development mode, use a global variable so that the value - // is preserved across module reloads caused by HMR (Hot Module Replacement). - if (!global._mongoClientPromise) { - client = new MongoClient(uri, options) - global._mongoClientPromise = client.connect() - } - clientPromise = global._mongoClientPromise +if (process.env.NODE_ENV === "development") { + // In development mode, use a global variable so that the value + // is preserved across module reloads caused by HMR (Hot Module Replacement). + //@ts-ignore + if (!global._mongoClientPromise) { + client = new MongoClient(uri, options); + //@ts-ignore + global._mongoClientPromise = client.connect(); + } + //@ts-ignore + clientPromise = global._mongoClientPromise; } else { - // In production mode, it's best to not use a global variable. - client = new MongoClient(uri, options) - clientPromise = client.connect() + // In production mode, it's best to not use a global variable. + client = new MongoClient(uri, options); + clientPromise = client.connect(); } -export default clientPromise +export default clientPromise; diff --git a/package-lock.json b/package-lock.json index 8240384..82da39f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "client", "version": "0.1.0", "dependencies": { + "@tanstack/react-table": "^8.9.1", "@types/node": "20.2.3", "@types/react": "18.2.6", "@types/react-dom": "18.2.4", @@ -27,6 +28,7 @@ "devDependencies": { "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^14.0.0", + "@types/leaflet": "^1.9.3", "jest": "^29.5.0", "jest-environment-jsdom": "^29.5.0" } @@ -1479,6 +1481,37 @@ "tslib": "^2.4.0" } }, + "node_modules/@tanstack/react-table": { + "version": "8.9.1", + "resolved": "https://registry.npmjs.org/@tanstack/react-table/-/react-table-8.9.1.tgz", + "integrity": "sha512-yHs2m6lk5J5RNcu2dNtsDGux66wNXZjEgzxos6MRCX8gL+nqxeW3ZglqP6eANN0bGElPnjvqiUHGQvdACOr3Cw==", + "dependencies": { + "@tanstack/table-core": "8.9.1" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + }, + "peerDependencies": { + "react": ">=16", + "react-dom": ">=16" + } + }, + "node_modules/@tanstack/table-core": { + "version": "8.9.1", + "resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.9.1.tgz", + "integrity": "sha512-2+R83n8vMZND0q3W1lSiF7co9nFbeWbjAErFf27xwbeA9E0wtUu5ZDfgj+TZ6JzdAEQAgfxkk/QNFAKiS8E4MA==", + "engines": { + "node": ">=12" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + } + }, "node_modules/@testing-library/dom": { "version": "9.3.0", "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.0.tgz", @@ -1607,6 +1640,12 @@ "@babel/types": "^7.3.0" } }, + "node_modules/@types/geojson": { + "version": "7946.0.10", + "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.10.tgz", + "integrity": "sha512-Nmh0K3iWQJzniTuPRcJn5hxXkfB1T1pgB89SBig5PlJQU5yocazeu4jATJlaA0GYFKWMqDdvYemoSnF2pXgLVA==", + "dev": true + }, "node_modules/@types/graceful-fs": { "version": "4.1.6", "resolved": "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.6.tgz", @@ -1698,6 +1737,15 @@ "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz", "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==" }, + "node_modules/@types/leaflet": { + "version": "1.9.3", + "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.3.tgz", + "integrity": "sha512-Caa1lYOgKVqDkDZVWkto2Z5JtVo09spEaUt2S69LiugbBpoqQu92HYFMGUbYezZbnBkyOxMNPXHSgRrRY5UyIA==", + "dev": true, + "dependencies": { + "@types/geojson": "*" + } + }, "node_modules/@types/node": { "version": "20.2.3", "resolved": "https://registry.npmjs.org/@types/node/-/node-20.2.3.tgz", diff --git a/package.json b/package.json index f56afac..7c55b8b 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "test": "jest --watch" }, "dependencies": { + "@tanstack/react-table": "^8.9.1", "@types/node": "20.2.3", "@types/react": "18.2.6", "@types/react-dom": "18.2.4", @@ -29,6 +30,7 @@ "devDependencies": { "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^14.0.0", + "@types/leaflet": "^1.9.3", "jest": "^29.5.0", "jest-environment-jsdom": "^29.5.0" } diff --git a/types.ts b/types.ts new file mode 100644 index 0000000..48479e2 --- /dev/null +++ b/types.ts @@ -0,0 +1,14 @@ +export interface Tournament { + _id: string; + location: string; + department: string; + tournament: string; + url: string; + time_control: string; + date: string; + coordinates: [number, number]; +} + +export interface TournamentTableProps { + tournamentData: Tournament[]; +}
DateVilleTournoisCadence