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

web/src/app/page.tsx

@@ -1,97 +1,14 @@
-import { graphql } from "@/gql";
 import { EventFragment } from "@/lib/event";
 import { NewsFragment } from "@/lib/news";
 import { HomeFragment } from "@/gql/graphql";
 import { getClient } from "@/app/client";
-import { FeaturedEvents } from "@/components/events/FeaturedEvents";
-import { NewsList } from "@/components/news/NewsList";
-import { Newsletter } from "@/components/general/Newsletter";
-import { UpcomingEvents } from "@/components/events/UpcomingEvents";
-import { Pig } from "@/components/general/Pig";
-import Link from "next/link";
-import { Icon } from "@/components/general/Icon";
-import { SectionHeader } from "@/components/general/SectionHeader";
-import { SectionFooter } from "@/components/general/SectionFooter";
-
-const HomeFragmentDefinition = graphql(`
-  fragment Home on HomePage {
-    ... on HomePage {
-      featuredEvents {
-        id
-      }
-    }
-  }
-`);
+import { HomePageView, homeQuery } from "@/components/home/HomePageView";
 
 export default async function Home() {
-  const homeQuery = graphql(`
-    query home {
-      events: eventIndex {
-        ... on EventIndex {
-          futureEvents {
-            ... on EventPage {
-              ...Event
-            }
-          }
-        }
-      }
-      home: page(contentType: "home.HomePage", urlPath: "/home/") {
-        ... on HomePage {
-          ...Home
-        }
-      }
-      news: pages(contentType: "news.newsPage", order: "-first_published_at", limit: 4) {
-        ... on NewsPage {
-          ...News
-        }
-      }
-    }
-  `);
   const { data, error } = await getClient().query(homeQuery, {});
   const home = (data?.home ?? []) as HomeFragment;
   const events = (data?.events?.futureEvents ?? []) as EventFragment[];
   const news = (data?.news ?? []) as NewsFragment[];
 
-  const featuredEventIds = home.featuredEvents.map((x) => x.id);
-  const featuredEvents = [
-    ...events.filter((x) => featuredEventIds.includes(x.id)),
-    ...events.filter((x) => !featuredEventIds.includes(x.id)),
-  ];
-
-  return (
-    <>
-      <main className="site-main index" id="main">
-        <FeaturedEvents events={featuredEvents} />
-        <UpcomingEvents events={events} />
-        <div className="infoBlock">
-          <SectionHeader heading="Besøk oss" link="/praktisk" linkText="Praktisk info" />
-          <div>
-            <h2 className="title">Skal du besøke Chateau Neuf?</h2>
-            <p>
-              Vi hjelper deg med å finne frem, og sørger for at du har en fin
-              opplevelse.
-            </p>
-            <Link href="/praktisk#adkomst" className="button">
-              <span>Adresse og adkomst</span>
-              <Icon type="arrowRight" />
-            </Link>
-            <Link href="/praktisk#billetter" className="button">
-              <span>Billetter</span>
-              <Icon type="arrowRight" />
-            </Link>
-            <Link href="/praktisk#apningstider" className="button">
-              <span>Åpningstider</span>
-              <Icon type="arrowRight" />
-            </Link>
-          </div>
-          <div className="pig">
-            <Pig type="point" />
-          </div>
-          <SectionFooter link="/praktisk" linkText="Praktisk info" />
-        </div>
-        <NewsList heading="Siste nytt" featured news={news} />
-      </main>
-      <Newsletter />
-    </>
-  );
+  return <HomePageView home={home} events={events} news={news} />;
 }