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

web/src/app/lokaler/[slug]/page.tsx

@@ -2,27 +2,13 @@ import { Metadata, ResolvingMetadata } from "next";
 import { notFound } from "next/navigation";
 import { getClient } from "@/app/client";
 import {
-  ImageSliderBlock,
-  ImageSliderBlockFragmentDefinition,
-} from "@/components/blocks/ImageSliderBlock";
-import { Breadcrumb } from "@/components/general/Breadcrumb";
-import { PageContent } from "@/components/general/PageContent";
-import { NeufMap } from "@/components/venues/NeufMap";
-import { VenueInfo } from "@/components/venues/VenueInfo";
-import { graphql, unmaskFragment } from "@/gql";
+  VenuePageView,
+  venueBySlugQuery,
+} from "@/components/venues/VenuePageView";
+import { graphql } from "@/gql";
 import { VenueFragment } from "@/gql/graphql";
 import { getSeoMetadata } from "@/lib/seo";
 
-const venueBySlugQuery = graphql(`
-  query venueBySlug($slug: String!) {
-    venue: page(contentType: "venues.VenuePage", slug: $slug) {
-      ... on VenuePage {
-        ...Venue
-      }
-    }
-  }
-`);
-
 type Params = Promise<{ slug: string }>;
 
 export async function generateMetadata(
@@ -85,26 +71,6 @@ export default async function Page({ params }: { params: Params }) {
   }
 
   const venue = data.venue as VenueFragment;
-  const featuredImage: any = venue.featuredImage;
 
-  return (
-    <main className="site-main" id="main">
-      {venue.images?.[0]?.__typename === "ImageSliderBlock" && (
-        <ImageSliderBlock
-          block={unmaskFragment(
-            ImageSliderBlockFragmentDefinition,
-            venue.images[0]
-          )}
-          hero
-        />
-      )}
-      <div className="page-header-small">
-        <Breadcrumb link="/utleie" text="Lokale" />
-        <h1 className="page-title">{venue.title}</h1>
-      </div>
-      <PageContent blocks={venue.body} />
-      <VenueInfo venue={venue} />
-      <NeufMap venueSlug={venue.slug} />
-    </main>
-  );
+  return <VenuePageView venue={venue} />;
 }

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} />;
 }