web: simplify link generation for search

dnscms/dnscms/settings/base.py

@@ -174,6 +174,9 @@ MEDIA_URL = "/media/"
 
 WAGTAIL_SITE_NAME = "dnscms"
 WAGTAIL_ALLOW_UNICODE_SLUGS = False
+# Headless: the Next.js frontend uses trailing-slash-free URLs, so strip
+# trailing slashes from links generated by Wagtail (e.g. the GraphQL `url` field).
+WAGTAIL_APPEND_SLASH = False
 
 WAGTAILIMAGES_IMAGE_MODEL = "images.CustomImage"
 WAGTAILIMAGES_EXTENSIONS = ["avif", "gif", "jpg", "jpeg", "png", "webp", "svg"]

web/src/app/sok/page.tsx

@@ -21,27 +21,11 @@ export default async function Page({
         results: search(query: $query) {
           __typename
           ... on PageInterface {
-            slug
-          }
-          ... on NewsPage {
-            id
-            title
-          }
-          ... on EventPage {
-            id
-            title
-          }
-          ... on GenericPage {
-            id
-            title
-          }
-          ... on VenuePage {
             id
             title
+            url
           }
           ... on AssociationPage {
-            id
-            title
             associationType
           }
         }

web/src/components/search/SearchContainer.tsx

@@ -1,7 +1,8 @@
 "use client";
+import { useEffect, useState } from "react";
 import { useDebouncedCallback } from "use-debounce";
 import { PageHeader } from "../general/PageHeader";
-import { useSearchParams, usePathname, useRouter } from "next/navigation";
+import { useRouter } from "next/navigation";
 import { getSearchPath } from "@/lib/common";
 import styles from './searchContainer.module.scss';
 import { Icon } from "../general/Icon";
@@ -14,12 +15,15 @@ export function SearchContainer({
   query: string;
   results: any;
 }) {
-  const searchParams = useSearchParams();
-  const pathname = usePathname();
   const { replace } = useRouter();
+  const [inputValue, setInputValue] = useState(query);
 
-  const onQueryChange = useDebouncedCallback((query) => {
+  useEffect(() => {
-    replace(getSearchPath(query));
+    setInputValue(query);
+  }, [query]);
+
+  const pushQuery = useDebouncedCallback((next: string) => {
+    replace(getSearchPath(next));
   }, 500);
 
   return (
@@ -30,9 +34,10 @@ export function SearchContainer({
           name="query"
           type="text"
           autoFocus
-          defaultValue={query ?? ""}
+          value={inputValue}
           onChange={(e) => {
-            onQueryChange(e.target.value);
+            setInputValue(e.target.value);
+            pushQuery(e.target.value);
           }}
         />
         <div className={styles.searchIcon}>
@@ -49,22 +54,7 @@ function capitalizeFirstLetter(s: string) {
 }
 
 function linkTo(page: any): string | null {
-  if (page.__typename === "EventPage") {
+  return page?.url ?? null;
-    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> = {

web/src/gql/gql.ts

@@ -20,7 +20,7 @@ type Documents = {
     "\n    query allAssociationSlugs {\n      pages(contentType: \"associations.AssociationPage\") {\n        id\n        slug\n      }\n    }\n  ": typeof types.AllAssociationSlugsDocument,
     "\n    query allVenueSlugs {\n      pages(contentType: \"venues.VenuePage\", limit: 100) {\n        id\n        slug\n      }\n    }\n  ": typeof types.AllVenueSlugsDocument,
     "\n  query previewPage($token: String!) {\n    page: page(token: $token) {\n      __typename\n      ... on GenericPage {\n        ...Generic\n      }\n      ... on StudioPage {\n        ...Studio\n      }\n      ... on SponsorsPage {\n        ...SponsorsPage\n      }\n      ... on HomePage {\n        ...Home\n      }\n      ... on EventPage {\n        ...Event\n      }\n      ... on NewsPage {\n        ...News\n      }\n      ... on AssociationPage {\n        ...Association\n      }\n      ... on VenuePage {\n        ...Venue\n      }\n      ... on NewsIndex {\n        ...NewsIndex\n      }\n      ... on AssociationIndex {\n        ...AssociationIndex\n      }\n      ... on VenueIndex {\n        ...VenueIndex\n      }\n      ... on VenueRentalIndex {\n        ...VenueRentalIndex\n      }\n      ... on ContactIndex {\n        ...ContactIndex\n      }\n    }\n  }\n": typeof types.PreviewPageDocument,
-    "\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 types.SearchDocument,
+    "\n      query search($query: String) {\n        results: search(query: $query) {\n          __typename\n          ... on PageInterface {\n            id\n            title\n            url\n          }\n          ... on AssociationPage {\n            associationType\n          }\n        }\n      }\n    ": typeof types.SearchDocument,
     "\n  fragment AssociationIndex on AssociationIndex {\n    __typename\n    title\n    seoTitle\n    searchDescription\n    lead\n    body {\n      ...Blocks\n    }\n  }\n": typeof types.AssociationIndexFragmentDoc,
     "\n  fragment Association on AssociationPage {\n    __typename\n    id\n    slug\n    title\n    seoTitle\n    searchDescription\n    excerpt\n    lead\n    body {\n      ...Blocks\n    }\n    logo {\n      url\n      width\n      height\n    }\n    associationType\n    websiteUrl\n  }\n": typeof types.AssociationFragmentDoc,
     "\n  query allAssociations {\n    index: associationIndex {\n      ... on AssociationIndex {\n        ...AssociationIndex\n      }\n    }\n    associations: pages(\n      contentType: \"associations.AssociationPage\"\n      limit: 1000\n    ) {\n      ... on AssociationPage {\n        ...Association\n      }\n    }\n  }\n": typeof types.AllAssociationsDocument,
@@ -88,7 +88,7 @@ const documents: Documents = {
     "\n    query allAssociationSlugs {\n      pages(contentType: \"associations.AssociationPage\") {\n        id\n        slug\n      }\n    }\n  ": types.AllAssociationSlugsDocument,
     "\n    query allVenueSlugs {\n      pages(contentType: \"venues.VenuePage\", limit: 100) {\n        id\n        slug\n      }\n    }\n  ": types.AllVenueSlugsDocument,
     "\n  query previewPage($token: String!) {\n    page: page(token: $token) {\n      __typename\n      ... on GenericPage {\n        ...Generic\n      }\n      ... on StudioPage {\n        ...Studio\n      }\n      ... on SponsorsPage {\n        ...SponsorsPage\n      }\n      ... on HomePage {\n        ...Home\n      }\n      ... on EventPage {\n        ...Event\n      }\n      ... on NewsPage {\n        ...News\n      }\n      ... on AssociationPage {\n        ...Association\n      }\n      ... on VenuePage {\n        ...Venue\n      }\n      ... on NewsIndex {\n        ...NewsIndex\n      }\n      ... on AssociationIndex {\n        ...AssociationIndex\n      }\n      ... on VenueIndex {\n        ...VenueIndex\n      }\n      ... on VenueRentalIndex {\n        ...VenueRentalIndex\n      }\n      ... on ContactIndex {\n        ...ContactIndex\n      }\n    }\n  }\n": types.PreviewPageDocument,
-    "\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      query search($query: String) {\n        results: search(query: $query) {\n          __typename\n          ... on PageInterface {\n            id\n            title\n            url\n          }\n          ... on AssociationPage {\n            associationType\n          }\n        }\n      }\n    ": types.SearchDocument,
     "\n  fragment AssociationIndex on AssociationIndex {\n    __typename\n    title\n    seoTitle\n    searchDescription\n    lead\n    body {\n      ...Blocks\n    }\n  }\n": types.AssociationIndexFragmentDoc,
     "\n  fragment Association on AssociationPage {\n    __typename\n    id\n    slug\n    title\n    seoTitle\n    searchDescription\n    excerpt\n    lead\n    body {\n      ...Blocks\n    }\n    logo {\n      url\n      width\n      height\n    }\n    associationType\n    websiteUrl\n  }\n": types.AssociationFragmentDoc,
     "\n  query allAssociations {\n    index: associationIndex {\n      ... on AssociationIndex {\n        ...AssociationIndex\n      }\n    }\n    associations: pages(\n      contentType: \"associations.AssociationPage\"\n      limit: 1000\n    ) {\n      ... on AssociationPage {\n        ...Association\n      }\n    }\n  }\n": types.AllAssociationsDocument,
@@ -191,7 +191,7 @@ export function graphql(source: "\n  query previewPage($token: String!) {\n    p
 /**
  * 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 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    "];
+export function graphql(source: "\n      query search($query: String) {\n        results: search(query: $query) {\n          __typename\n          ... on PageInterface {\n            id\n            title\n            url\n          }\n          ... on AssociationPage {\n            associationType\n          }\n        }\n      }\n    "): (typeof documents)["\n      query search($query: String) {\n        results: search(query: $query) {\n          __typename\n          ... on PageInterface {\n            id\n            title\n            url\n          }\n          ... on AssociationPage {\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.
  */