link search results to pages

web/src/app/sok/page.tsx

@@ -18,6 +18,9 @@ export default async function Page({
       query search($query: String) {
         results: search(query: $query) {
           __typename
+          ... on PageInterface {
+            slug
+          }
           ... on NewsPage {
             id
             title

web/src/components/search/SearchContainer.tsx

@@ -3,8 +3,9 @@ import { useDebouncedCallback } from "use-debounce";
 import { PageHeader } from "../general/PageHeader";
 import { useSearchParams, usePathname, useRouter } from "next/navigation";
 import { getSearchPath } from "@/lib/common";
-import styles from './searchContainer.module.scss';
+import styles from "./searchContainer.module.scss";
 import Icon from "../general/Icon";
+import Link from "next/link";
 
 export function SearchContainer({
   query,
@@ -34,7 +35,9 @@ export function SearchContainer({
             onQueryChange(e.target.value);
           }}
         />
-        <div className={styles.searchIcon}><Icon type="search" /></div>
+        <div className={styles.searchIcon}>
+          <Icon type="search" />
+        </div>
       </div>
       {query && <SearchResults results={results} />}
     </div>
@@ -45,6 +48,26 @@ function capitalizeFirstLetter(s: string) {
   return s.charAt(0).toUpperCase() + s.slice(1);
 }
 
+function linkTo(page: any): string | null {
+  console.log(page)
+  if (page.__typename === "EventPage") {
+    return `/arrangementer/${page.slug}`;
+  }
+  if (page.__typename === "NewsPage") {
+    return `/aktuelt/${page.slug}`;
+  }
+  if (page.__typename === "AssociationPage") {
+    return `/foreninger/${page.slug}`;
+  }
+  if (page.__typename === "GenericPage") {
+    return `/{page.slug}`;
+  }
+  if (page.__typename === "VenuePage") {
+    return `/lokaler/${page.slug}`;
+  }
+  return null;
+}
+
 const PAGE_TYPES: Record<string, string> = {
   NewsPage: "Nyhet",
   EventPage: "Arrangement",
@@ -69,12 +92,21 @@ function SearchResults({ results }: { results: any }) {
         if (result.__typename === "AssociationPage") {
           resultType = capitalizeFirstLetter(result?.associationType);
         }
-        return (
+        const link = linkTo(result);
-          <div key={result.id} className={styles.resultItem}>
+        const ResultItem = () => (
+          <div className={styles.resultItem}>
             <span className={styles.suphead}>{resultType}</span>
             <h2 className={styles.title}>{result.title}</h2>
           </div>
         );
+        if (link) {
+          return (
+            <Link key={result.id} href={link}>
+              <ResultItem />
+            </Link>
+          );
+        }
+        return <ResultItem key={result.id} />;
       })}
     </div>
   );

web/src/gql/gql.ts

@@ -34,7 +34,7 @@ const documents = {
     "\n    query venueIndex {\n      index: venueIndex {\n        ... on VenueIndex {\n          ...VenueIndex\n        }\n      }\n      venues: pages(contentType: \"venues.VenuePage\", limit: 100) {\n        ... on VenuePage {\n          ...Venue\n        }\n      }\n    }\n  ": types.VenueIndexDocument,
     "\n  fragment Home on HomePage {\n    ... on HomePage {\n      featuredEvents {\n        id\n      }\n    }\n  }\n": types.HomeFragmentDoc,
     "\n    query home {\n      events: eventIndex {\n        ... on EventIndex {\n          futureEvents {\n            ... on EventPage {\n              ...Event\n            }\n          }\n        }\n      }\n      home: page(contentType: \"home.HomePage\", urlPath: \"/home/\") {\n        ... on HomePage {\n          ...Home\n        }\n      }\n      news: pages(contentType: \"news.newsPage\", order: \"-first_published_at\", limit: 4) {\n        ... on NewsPage {\n          ...News\n        }\n      }\n    }\n  ": types.HomeDocument,
-    "\n      query search($query: String) {\n        results: search(query: $query) {\n          __typename\n          ... on NewsPage {\n            id\n            title\n          }\n          ... on EventPage {\n            id\n            title\n          }\n          ... on GenericPage {\n            id\n            title\n          }\n          ... on VenuePage {\n            id\n            title\n          }\n          ... on AssociationPage {\n            id\n            title\n            associationType\n          }\n        }\n      }\n    ": types.SearchDocument,
+    "\n      query search($query: String) {\n        results: search(query: $query) {\n          __typename\n          ... on PageInterface {\n            slug\n          }\n          ... on NewsPage {\n            id\n            title\n          }\n          ... on EventPage {\n            id\n            title\n          }\n          ... on GenericPage {\n            id\n            title\n          }\n          ... on VenuePage {\n            id\n            title\n          }\n          ... on AssociationPage {\n            id\n            title\n            associationType\n          }\n        }\n      }\n    ": types.SearchDocument,
     "\n  fragment VenueRentalIndex on VenueRentalIndex {\n    ... on VenueRentalIndex {\n      title\n      lead\n      body {\n        ...Blocks\n      }\n    }\n  }\n": types.VenueRentalIndexFragmentDoc,
     "\n    query venueRentalIndex {\n      index: venueRentalIndex {\n        ... on VenueRentalIndex {\n          ...VenueRentalIndex\n        }\n      }\n      venues: pages(contentType: \"venues.VenuePage\", limit: 100) {\n        ... on VenuePage {\n          ...Venue\n        }\n      }\n    }\n  ": types.VenueRentalIndexDocument,
     "\n  fragment OneLevelOfBlocks on StreamFieldInterface {\n    id\n    blockType\n    field\n    ... on RichTextBlock {\n      rawValue\n      value\n    }\n    ... on ImageWithTextBlock {\n      image {\n        ...Image\n      }\n      imageFormat\n      text\n    }\n    ... on ImageSliderBlock {\n      images {\n        ... on ImageSliderItemBlock {\n          image {\n            ...Image\n          }\n          text\n        }\n      }\n    }\n    ... on HorizontalRuleBlock {\n      color\n    }\n    ... on FeaturedBlock {\n      title\n      featuredBlockText: text\n      linkText\n      imagePosition\n      backgroundColor\n      featuredPage {\n        contentType\n        pageType\n        url\n        ... on EventPage {\n          featuredImage {\n            ...Image\n          }\n        }\n        ... on NewsPage {\n          featuredImage {\n            ...Image\n          }\n        }\n      }\n      featuredImageOverride {\n        ...Image\n      }\n    }\n    ... on ContactListBlock {\n      items {\n        blockType\n        ... on ContactEntityBlock {\n          contactEntity {\n            ...ContactEntity\n          }\n        }\n      }\n    }\n    ... on EmbedBlock {\n      url\n      embed\n      rawEmbed\n    }\n    ... on FactBoxBlock {\n      backgroundColor\n      factBoxBody: body\n    }\n  }\n": types.OneLevelOfBlocksFragmentDoc,
@@ -153,7 +153,7 @@ export function graphql(source: "\n    query home {\n      events: eventIndex {\
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n      query search($query: String) {\n        results: search(query: $query) {\n          __typename\n          ... on NewsPage {\n            id\n            title\n          }\n          ... on EventPage {\n            id\n            title\n          }\n          ... on GenericPage {\n            id\n            title\n          }\n          ... on VenuePage {\n            id\n            title\n          }\n          ... on AssociationPage {\n            id\n            title\n            associationType\n          }\n        }\n      }\n    "): (typeof documents)["\n      query search($query: String) {\n        results: search(query: $query) {\n          __typename\n          ... on NewsPage {\n            id\n            title\n          }\n          ... on EventPage {\n            id\n            title\n          }\n          ... on GenericPage {\n            id\n            title\n          }\n          ... on VenuePage {\n            id\n            title\n          }\n          ... on AssociationPage {\n            id\n            title\n            associationType\n          }\n        }\n      }\n    "];
+export function graphql(source: "\n      query search($query: String) {\n        results: search(query: $query) {\n          __typename\n          ... on PageInterface {\n            slug\n          }\n          ... on NewsPage {\n            id\n            title\n          }\n          ... on EventPage {\n            id\n            title\n          }\n          ... on GenericPage {\n            id\n            title\n          }\n          ... on VenuePage {\n            id\n            title\n          }\n          ... on AssociationPage {\n            id\n            title\n            associationType\n          }\n        }\n      }\n    "): (typeof documents)["\n      query search($query: String) {\n        results: search(query: $query) {\n          __typename\n          ... on PageInterface {\n            slug\n          }\n          ... on NewsPage {\n            id\n            title\n          }\n          ... on EventPage {\n            id\n            title\n          }\n          ... on GenericPage {\n            id\n            title\n          }\n          ... on VenuePage {\n            id\n            title\n          }\n          ... on AssociationPage {\n            id\n            title\n            associationType\n          }\n        }\n      }\n    "];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */