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

web/src/app/foreninger/page.tsx

@@ -1,30 +1,12 @@
 import { Metadata, ResolvingMetadata } from "next";
-import { graphql } from "@/gql";
 import { AssociationFragment, AssociationIndexFragment } from "@/gql/graphql";
 import { getClient } from "@/app/client";
-import { AssociationList } from "@/components/associations/AssociationList";
-import { PageHeader } from "@/components/general/PageHeader";
-import { PageContent } from "@/components/general/PageContent";
+import {
+  AssociationIndexView,
+  allAssociationsQuery,
+} from "@/components/associations/AssociationIndexView";
 import { getSeoMetadata } from "@/lib/seo";
 
-const allAssociationsQuery = graphql(`
-  query allAssociations {
-    index: associationIndex {
-      ... on AssociationIndex {
-        ...AssociationIndex
-      }
-    }
-    associations: pages(
-      contentType: "associations.AssociationPage"
-      limit: 1000
-    ) {
-      ... on AssociationPage {
-        ...Association
-      }
-    }
-  }
-`);
-
 export async function generateMetadata(
   { params }: { params: Promise<{}> },
   parent: ResolvingMetadata
@@ -43,43 +25,6 @@ export async function generateMetadata(
   return metadata;
 }
 
-const AssociationIndexDefinition = graphql(`
-  fragment AssociationIndex on AssociationIndex {
-    ... on AssociationIndex {
-      title
-      seoTitle
-      searchDescription
-      lead
-      body {
-        ...Blocks
-      }
-    }
-  }
-`);
-
-const AssociationFragmentDefinition = graphql(`
-  fragment Association on AssociationPage {
-    __typename
-    id
-    slug
-    title
-    seoTitle
-    searchDescription
-    excerpt
-    lead
-    body {
-      ...Blocks
-    }
-    logo {
-      url
-      width
-      height
-    }
-    associationType
-    websiteUrl
-  }
-`);
-
 export default async function Page() {
   const { data, error } = await getClient().query(allAssociationsQuery, {});
 
@@ -93,14 +38,5 @@ export default async function Page() {
   const associations = data.associations as AssociationFragment[];
   const index = data.index as AssociationIndexFragment;
 
-  return (
-    <main className="site-main" id="main">
-      <PageHeader heading={index.title} lead={index.lead} />
-      {index.body && <PageContent blocks={index.body} />}
-      <AssociationList
-        associations={associations}
-        heading="Foreninger og utvalg"
-      />
-    </main>
-  );
+  return <AssociationIndexView index={index} associations={associations} />;
 }