Add canteen page

src/app.tsx

@@ -46,6 +46,10 @@ const ROUTES: RouteDefinition[] = [
       },
     ],
   },
+  {
+    path: '/canteen',
+    component: lazy(() => import('~/pages/Canteen')),
+  },
   {
     path: '/_debug',
     component: lazy(() => import('~/pages/Debug')),

src/data/canteen.data.ts

@@ -0,0 +1,56 @@
+import { gql, request } from '@solid-primitives/graphql'
+import { cache } from '@solidjs/router'
+import { addWeeks, getISOWeek, getISOWeekYear } from 'date-fns'
+import { GRAPHQL_BACKEND_URL } from '~/constants'
+import { Day } from '~/models/canteen'
+
+const QUERY = gql`
+  query CanteenTwoWeeks($year1: Int!, $week1: Int!, $year2: Int!, $week2: Int!) {
+    week1: canteen(year: $year1, week: $week1) {
+      ...canteen
+    }
+    week2: canteen(year: $year2, week: $week2) {
+      ...canteen
+    }
+  }
+
+  fragment canteen on Canteen {
+    date
+    menus {
+      menu
+      type
+    }
+  }
+`
+
+export type CanteenData = [Day[], Day[]]
+
+export const queryCanteen = cache(async (): Promise<CanteenData> => {
+  const now = new Date()
+  const nextWeek = addWeeks(now, 1)
+
+  type Result = {
+    week1: Day<string>[]
+    week2: Day<string>[]
+  }
+
+  const response = await request<Result>(GRAPHQL_BACKEND_URL, QUERY, {
+    variables: {
+      year1: getISOWeekYear(now),
+      week1: getISOWeek(now),
+      year2: getISOWeekYear(nextWeek),
+      week2: getISOWeek(nextWeek),
+    },
+  })
+
+  return [
+    response.week1.map((d) => ({
+      ...d,
+      date: new Date(d.date),
+    })),
+    response.week2.map((d) => ({
+      ...d,
+      date: new Date(d.date),
+    })),
+  ]
+}, 'Canteen.queryCanteen')

src/models/canteen.ts

@@ -0,0 +1,11 @@
+export type Day<D = Date> = {
+  id: number
+  menus: [Menu, Menu, Menu?]
+  date: D
+}
+
+export type Menu = {
+  id: number
+  menu: string
+  type: number
+}

src/pages/Canteen.module.scss

@@ -0,0 +1,44 @@
+.container {
+  max-width: var(--content-page-width);
+  padding-inline: var(--page-padding);
+  margin-inline: auto;
+
+  h1, h2 {
+    text-align: center;
+    font-weight: 700;
+  }
+}
+
+.columns {
+  display: grid;
+  grid-gap: 2rem;
+
+  @include lg {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  section {
+    background-color: var(--color-surface1);
+    border-radius: 0.8rem;
+
+    h2,
+    > ul > li {
+      padding: 1rem 2rem;
+    }
+
+    ul, li {
+      list-style: none;
+    }
+
+    span {
+      font-weight: 700;
+      font-size: 2rem;
+      margin-bottom: 1rem;
+      display: block;
+    }
+
+    li li {
+      margin-block: 0.5rem;
+    }
+  }
+}

src/pages/Canteen.tsx

@@ -0,0 +1,68 @@
+import { RouteSectionProps, createAsync } from '@solidjs/router'
+import { Component, For, Show, VoidComponent } from 'solid-js'
+import { queryCanteen } from '~/data/canteen.data'
+import { Day } from '~/models/canteen'
+import styles from './Canteen.module.scss'
+
+const DAYS = ['Hétfő', 'Kedd', 'Szerda', 'Csütörtök', 'Péntek']
+
+type CanteenWeekProps = {
+  title: string
+  days: Day[]
+}
+
+const CanteenWeek: VoidComponent<CanteenWeekProps> = (props) => {
+  const dataWithDays = () =>
+    DAYS.map((d, i) => ({
+      day: d,
+      menus: props.days[i]?.menus ?? [],
+    }))
+
+  return (
+    <section>
+      <h2>{props.title}</h2>
+      <ul>
+        <For each={dataWithDays()}>
+          {(day) => (
+            <li>
+              <span>{day.day}</span>
+              <ul>
+                <Show when={(day.menus.length as number) === 0}>
+                  <li>Nincs megadva</li>
+                </Show>
+                <For each={day.menus}>
+                  {(menu) => (
+                    <Show when={menu}>
+                      <li>{menu!.menu}</li>
+                    </Show>
+                  )}
+                </For>
+              </ul>
+            </li>
+          )}
+        </For>
+      </ul>
+    </section>
+  )
+}
+
+const CanteenPage: Component<RouteSectionProps> = () => {
+  const data = createAsync(() => queryCanteen())
+
+  return (
+    <>
+      <div class={styles.container}>
+        <h1>Menza étlap</h1>
+
+        <div class={styles.columns}>
+          <Show when={data()}>
+            <CanteenWeek title="Heti menü" days={data()![0]} />
+            <CanteenWeek title="Jövő heti menü" days={data()![1]} />
+          </Show>
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default CanteenPage