Get tides for that month

src/components/navigation/menuItems.ts

@@ -1 +1 @@
-export const menuItems = [{ link: "/pdfs", label: "PDFs" }];
+export const menuItems = [{ link: "/tideTables", label: "Tide Tables" }];

src/components/templates/TideTablePage.tsx

@@ -1,25 +1,34 @@
 import * as React from "react"
 import type { HeadFC, PageProps } from "gatsby"
-import { Center, Container, Image, Text } from "@mantine/core"
+import { Card, Center, Container, Group, Image, Text } from "@mantine/core"
 import TidalData from "../../../data/tides.json";
-//import Layout from "../../components/navigation/Layout"
 import { SEO } from "../../components/SEO";
 import Layout from "../navigation/Layout";
+import { DateTime } from "luxon";
+import { TidesJson_PDFObject, TidesJson_ScheduleObject } from "../../types";
 
 
-const Page: React.FC<PageProps> = ({ pageContext }: { pageContext: any }) => {
-  const today = new Date();
-  today.setHours(0, 0, 0, 0);
-  const nextWeek = new Date(today);
-  nextWeek.setDate(today.getDate() + 7);
-  const tides = TidalData.schedule.filter(element => {
-    let date = new Date(element.date);
-    return date >= today && date <= nextWeek
+const Page: React.FC<PageProps> = ({ pageContext }: { pageContext: { pdf: TidesJson_PDFObject } }) => {
+  const firstDayOfMonth = pageContext.pdf.date;
+  const monthMatch = firstDayOfMonth.split("-")[0] + firstDayOfMonth.split("-")[1];
+  const tides = TidalData.schedule.filter((element: TidesJson_ScheduleObject) => {
+    return element.date.startsWith(monthMatch)
   });
-  console.log(pageContext)
+  console.log(tides)
   return (
     <Layout>
-      Test page
+      {tides.map((element: TidesJson_ScheduleObject, index: React.Key) => (
+        <Card shadow="xs" key={index}>
+
+          <Text size="xl" fw={500}>{DateTime.fromSQL(element.date).toLocaleString({ weekday: "long", day: "2-digit", month: "long" })}</Text>
+          {element.groups.map(tide => (
+            <Group justify="start" mt="md" mb="xs">
+              <Text size="lg" fw={500} >{DateTime.fromSQL(element.date + " " + tide.time).toLocaleString(DateTime.TIME_SIMPLE)}</Text>
+              <Text size="lg" fw={200}>{tide.height}m</Text>
+            </Group>
+          ))}
+        </Card>
+      ))}
     </Layout>
   )
 }

src/pages/tideTables.tsx

@@ -14,14 +14,14 @@ const Page: React.FC<PageProps> = () => {
   month.setDate(1);
   const nextYear = new Date(month);
   nextYear.setFullYear(month.getFullYear() + 1);
-  const files = TidalData.pdfs.filter((element: { date: string | number | Date; }) => {
+  const files = TidalData.pdfs.filter((element: TidesJson_PDFObject) => {
     let date = new Date(element.date);
     return date < nextYear;
   });
   return (
     <Layout>
       <Center>
-        {files.map((element: TidesJson_PDFObject, index: React.Key) => (<a href={"/tide-tables/" + element.filename.replace(".pdf", "")} key={index}>{element.name}</a>))}
+        {files.map((element: TidesJson_PDFObject, index: React.Key) => (<a href={"/tide-tables/" + element.url + "/"} key={index}>{element.name}</a>))}
       </Center>
     </Layout>
   )