web: move page rendering logic from page.tsx to components

web/src/app/lokaler/page.tsx

@@ -1,77 +1,12 @@
 import { Metadata, ResolvingMetadata } from "next";
-import { graphql } from "@/gql";
 import { VenueFragment, VenueIndexFragment } from "@/gql/graphql";
 import { getClient } from "@/app/client";
-import { VenueList } from "@/components/venues/VenueList";
-import { PageHeader } from "@/components/general/PageHeader";
-import { PageContent } from "@/components/general/PageContent";
+import {
+  VenueIndexView,
+  venueIndexQuery,
+} from "@/components/venues/VenueIndexView";
 import { getSeoMetadata } from "@/lib/seo";
 
-const venueIndexQuery = graphql(`
-  query venueIndex {
-    index: venueIndex {
-      ... on VenueIndex {
-        ...VenueIndex
-      }
-    }
-    venues: pages(contentType: "venues.VenuePage", limit: 100) {
-      ... on VenuePage {
-        ...Venue
-      }
-    }
-  }
-`);
-
-const VenueIndexDefinition = graphql(`
-  fragment VenueIndex on VenueIndex {
-    ... on VenueIndex {
-      title
-      seoTitle
-      searchDescription
-      lead
-      body {
-        ...Blocks
-      }
-    }
-  }
-`);
-
-const VenueFragmentDefinition = graphql(`
-  fragment Venue on VenuePage {
-    __typename
-    id
-    slug
-    title
-    seoTitle
-    searchDescription
-    images {
-      __typename
-      ... on ImageSliderBlock {
-        ...ImageSliderBlock
-      }
-    }
-    body {
-      ...Blocks
-    }
-    featuredImage {
-      ...Image
-    }
-    showAsBookable
-    showInOverview
-    floor
-    preposition
-    usedFor
-    techSpecsUrl
-    capabilityAudio
-    capabilityAudioVideo
-    capabilityBar
-    capabilityLighting
-    capacityLegal
-    capacityStanding
-    capacitySitting
-  }
-`);
-
 export async function generateMetadata(
   { params }: { params: Promise<{}> },
   parent: ResolvingMetadata
@@ -102,13 +37,6 @@ export default async function Page() {
 
   const index = data.index as VenueIndexFragment;
   const venues = (data?.venues ?? []) as VenueFragment[];
-  const visibleVenues = venues.filter((x) => x.showInOverview);
 
-  return (
-    <main className="site-main" id="main">
-      <PageHeader heading={index.title} lead={index.lead} />
-      <PageContent blocks={index.body} />
-      <VenueList venues={visibleVenues} />
-    </main>
-  );
+  return <VenueIndexView index={index} venues={venues} />;
 }