From 31d742d41f999236256882628bf70a593975d29a Mon Sep 17 00:00:00 2001
From: justian <justiandev@gmail.com>
Date: Wed, 6 Nov 2024 16:18:24 +0100
Subject: [PATCH 1/3] refactor: use NLDS link in summary form

---
 .../summary/components/IncidentSummaryForm.tsx  | 17 +++++++----------
 1 file changed, 7 insertions(+), 10 deletions(-)

diff --git a/src/app/[locale]/incident/summary/components/IncidentSummaryForm.tsx b/src/app/[locale]/incident/summary/components/IncidentSummaryForm.tsx
index 49c48698..810f5a32 100644
--- a/src/app/[locale]/incident/summary/components/IncidentSummaryForm.tsx
+++ b/src/app/[locale]/incident/summary/components/IncidentSummaryForm.tsx
@@ -3,17 +3,14 @@
 import { IncidentFormFooter } from '@/app/[locale]/incident/components/IncidentFormFooter'
 import { useTranslations } from 'next-intl'
 import { Divider } from '@/components/ui/Divider'
-import { LinkWrapper } from '@/components/ui/LinkWrapper'
 import { useStepperStore } from '@/store/stepper_store'
 import React, { useEffect } from 'react'
-import { LocationMap } from '@/components/ui/LocationMap'
 import { signalsClient } from '@/services/client/api-client'
 import { useRouter } from '@/routing/navigation'
 import { postAttachments } from '@/services/attachment/attachments'
 import { useFormStore } from '@/store/form_store'
 import { _NestedLocationModel } from '@/services/client'
-import { Paragraph, Heading } from '@/components/index'
-import { MAX_NUMBER_FILES } from '@/components/ui/upload/FileUpload'
+import { Paragraph, Heading, Link as NLDSLink } from '@/components/index'
 import PreviewFile from '@/components/ui/upload/PreviewFile'
 
 const IncidentSummaryForm = () => {
@@ -86,9 +83,9 @@ const IncidentSummaryForm = () => {
       <div className="flex flex-col gap-4">
         <div className="flex flex-col gap-1 md:flex-row justify-between">
           <Heading level={2}>{t('steps.step_one.title')}</Heading>
-          <LinkWrapper href={'/incident'} onClick={() => goToStep(1)}>
+          <NLDSLink href={'/incident'} onClick={() => goToStep(1)}>
             {t('steps.step_one.edit')}
-          </LinkWrapper>
+          </NLDSLink>
         </div>
         <IncidentSummaryFormItem
           title={t('steps.step_one.input_heading')}
@@ -105,9 +102,9 @@ const IncidentSummaryForm = () => {
       <div className="flex flex-col gap-4">
         <div className="flex flex-col gap-1 md:flex-row justify-between">
           <Heading level={2}>{t('steps.step_two.title')}</Heading>
-          <LinkWrapper href={'/incident/add'} onClick={() => goToStep(2)}>
+          <NLDSLink href={'/incident/add'} onClick={() => goToStep(2)}>
             {t('steps.step_two.edit')}
-          </LinkWrapper>
+          </NLDSLink>
         </div>
         {/* TODO: AssetSelect en LocationSelect hier tonen, indien een / beide zijn ingevuld */}
         {formState.extra_properties.map((answer) => {
@@ -132,9 +129,9 @@ const IncidentSummaryForm = () => {
       <div className="flex flex-col gap-4">
         <div className="flex flex-col gap-1 md:flex-row justify-between">
           <Heading level={2}>{t('steps.step_three.title')}</Heading>
-          <LinkWrapper href={'/incident/contact'} onClick={() => goToStep(3)}>
+          <NLDSLink href={'/incident/contact'} onClick={() => goToStep(3)}>
             {t('steps.step_three.edit')}
-          </LinkWrapper>
+          </NLDSLink>
         </div>
         {formState.phone === undefined &&
         formState.email === undefined &&

From 1a3369a824b60650e23fc9dcdcca930e4dee5f5a Mon Sep 17 00:00:00 2001
From: justian <justiandev@gmail.com>
Date: Fri, 8 Nov 2024 10:18:59 +0100
Subject: [PATCH 2/3] Fix: refactor use NextLinkWrapper instead of default NLDS
 Link in summary form

---
 .../components/IncidentSummaryForm.tsx        | 19 +++--
 src/components/ui/NextLinkWrapper.tsx         | 85 +++++++++++++++++++
 2 files changed, 96 insertions(+), 8 deletions(-)
 create mode 100644 src/components/ui/NextLinkWrapper.tsx

diff --git a/src/app/[locale]/incident/summary/components/IncidentSummaryForm.tsx b/src/app/[locale]/incident/summary/components/IncidentSummaryForm.tsx
index 37fe456c..08b72431 100644
--- a/src/app/[locale]/incident/summary/components/IncidentSummaryForm.tsx
+++ b/src/app/[locale]/incident/summary/components/IncidentSummaryForm.tsx
@@ -3,7 +3,6 @@
 import { IncidentFormFooter } from '@/app/[locale]/incident/components/IncidentFormFooter'
 import { useTranslations } from 'next-intl'
 import { Divider } from '@/components/ui/Divider'
-import { LinkWrapper } from '@/components/ui/LinkWrapper'
 import { useStepperStore } from '@/store/stepper_store'
 import React, { useEffect, useState } from 'react'
 import { signalsClient } from '@/services/client/api-client'
@@ -11,9 +10,10 @@ import { useRouter } from '@/routing/navigation'
 import { postAttachments } from '@/services/attachment/attachments'
 import { useFormStore } from '@/store/form_store'
 import { _NestedLocationModel } from '@/services/client'
-import { Paragraph, Heading, Link as NLDSLink } from '@/components/index'
+import { Paragraph, Heading } from '@/components/index'
 import PreviewFile from '@/components/ui/upload/PreviewFile'
 import { SubmitAlert } from '@/app/[locale]/incident/summary/components/SubmitAlert'
+import { NextLinkWrapper } from '@/components/ui/NextLinkWrapper'
 
 const IncidentSummaryForm = () => {
   const t = useTranslations('describe-summary')
@@ -102,9 +102,9 @@ const IncidentSummaryForm = () => {
       <div className="flex flex-col gap-4">
         <div className="flex flex-col gap-1 md:flex-row justify-between">
           <Heading level={2}>{t('steps.step_one.title')}</Heading>
-          <NLDSLink href={'/incident'} onClick={() => goToStep(1)}>
+          <NextLinkWrapper href={'/incident'} onClick={() => goToStep(1)}>
             {t('steps.step_one.edit')}
-          </NLDSLink>
+          </NextLinkWrapper>
         </div>
         <IncidentSummaryFormItem
           title={t('steps.step_one.input_heading')}
@@ -121,9 +121,9 @@ const IncidentSummaryForm = () => {
       <div className="flex flex-col gap-4">
         <div className="flex flex-col gap-1 md:flex-row justify-between">
           <Heading level={2}>{t('steps.step_two.title')}</Heading>
-          <NLDSLink href={'/incident/add'} onClick={() => goToStep(2)}>
+          <NextLinkWrapper href={'/incident/add'} onClick={() => goToStep(2)}>
             {t('steps.step_two.edit')}
-          </NLDSLink>
+          </NextLinkWrapper>
         </div>
         {/* TODO: AssetSelect en LocationSelect hier tonen, indien een / beide zijn ingevuld */}
         {formState.extra_properties.map((answer) => {
@@ -148,9 +148,12 @@ const IncidentSummaryForm = () => {
       <div className="flex flex-col gap-4">
         <div className="flex flex-col gap-1 md:flex-row justify-between">
           <Heading level={2}>{t('steps.step_three.title')}</Heading>
-          <NLDSLink href={'/incident/contact'} onClick={() => goToStep(3)}>
+          <NextLinkWrapper
+            href={'/incident/contact'}
+            onClick={() => goToStep(3)}
+          >
             {t('steps.step_three.edit')}
-          </NLDSLink>
+          </NextLinkWrapper>
         </div>
         {formState.phone === undefined &&
         formState.email === undefined &&
diff --git a/src/components/ui/NextLinkWrapper.tsx b/src/components/ui/NextLinkWrapper.tsx
new file mode 100644
index 00000000..c09f65ca
--- /dev/null
+++ b/src/components/ui/NextLinkWrapper.tsx
@@ -0,0 +1,85 @@
+import { Link as DesignSystemLink } from '@/components'
+import type { LinkProps as DesignSystemLinkProps } from '@utrecht/component-library-react/dist/Link'
+import clsx from 'clsx'
+import { Link as NextLink, usePathname } from '@/routing/navigation'
+import React, { ForwardedRef, forwardRef } from 'react'
+
+export interface LinkProps extends DesignSystemLinkProps {
+  /**
+   * Background to the naming of this API:
+   * "same-url" is inspired by "same-origin" and "same-site" from CSP.
+   * "reload" is from `window.reload()`
+   * Angular also has `onSameUrlNavigation: 'ignore' | 'reload'
+   * URL spec also suggest using a `somethingURL` name:
+   * https://url.spec.whatwg.org/#url-apis-elsewhere
+   */
+  sameURL?: 'no-link' | 'reload'
+}
+
+export const NextLinkWrapper = forwardRef(
+  (
+    {
+      boxContent,
+      children,
+      external,
+      href,
+      className,
+      sameURL,
+      placeholder,
+      role,
+      ...restProps
+    }: LinkProps,
+    ref: ForwardedRef<HTMLAnchorElement>
+  ) => {
+    const pathname = usePathname()
+    const isSameURL = pathname === href
+
+    if (isSameURL && sameURL === 'no-link') {
+      return <>{children}</>
+    }
+
+    if ((isSameURL && sameURL === 'reload') || placeholder) {
+      /* Avoid client-side routing with `NextLink` for reload behavior */
+      /* Avoid `NextLink` for placeholder links that render no `href` */
+      return (
+        <DesignSystemLink
+          href={href}
+          external={external}
+          boxContent={boxContent}
+          placeholder={placeholder}
+          ref={ref}
+          aria-current={isSameURL ? 'page' : undefined}
+          {...restProps}
+        >
+          {children}
+        </DesignSystemLink>
+      )
+    } else {
+      return (
+        <NextLink
+          // @ts-ignore
+          href={href || ''}
+          ref={ref}
+          role={role || (placeholder ? 'link' : undefined)}
+          className={clsx(
+            'utrecht-link',
+            {
+              'utrecht-link--box-content': boxContent,
+              'utrecht-link--external': external,
+              'utrecht-link--placeholder': placeholder,
+            },
+            className
+          )}
+          aria-disabled={placeholder ? 'true' : undefined}
+          rel={external ? 'external noopener noreferrer' : undefined}
+          aria-current={isSameURL ? 'page' : undefined}
+          {...restProps}
+        >
+          {children}
+        </NextLink>
+      )
+    }
+  }
+)
+
+NextLinkWrapper.displayName = 'NextLinkWrapper'

From cc3c768f7d3e6fc3d1e743fb11c625b73eac12f5 Mon Sep 17 00:00:00 2001
From: justian <justiandev@gmail.com>
Date: Fri, 8 Nov 2024 10:22:09 +0100
Subject: [PATCH 3/3] refactor: use NextLinkWrapper for every <Link> component
 with a href attribute

---
 .../[locale]/incident/components/Stepper.tsx  | 11 ++++---
 src/components/ui/LinkWrapper.tsx             | 30 -------------------
 2 files changed, 7 insertions(+), 34 deletions(-)
 delete mode 100644 src/components/ui/LinkWrapper.tsx

diff --git a/src/app/[locale]/incident/components/Stepper.tsx b/src/app/[locale]/incident/components/Stepper.tsx
index e2304cc5..c71e96cd 100644
--- a/src/app/[locale]/incident/components/Stepper.tsx
+++ b/src/app/[locale]/incident/components/Stepper.tsx
@@ -5,7 +5,8 @@ import { Paths, usePathname } from '@/routing/navigation'
 import { useStepperStore } from '@/store/stepper_store'
 import { useEffect, useRef } from 'react'
 import { useFormStore } from '@/store/form_store'
-import { Button, Link, Paragraph } from '@/components/index'
+import { Button, Paragraph } from '@/components/index'
+import { NextLinkWrapper } from '@/components/ui/NextLinkWrapper'
 
 type StepperProps = {}
 
@@ -91,7 +92,7 @@ export const Stepper = ({}: StepperProps) => {
         >
           {items.map((item, index) => {
             return (
-              <Link
+              <NextLinkWrapper
                 onClick={() => goToStep(index + 1)}
                 href={item.path}
                 key={item.path}
@@ -114,7 +115,7 @@ export const Stepper = ({}: StepperProps) => {
                 >
                   {item.name}
                 </Paragraph>
-              </Link>
+              </NextLinkWrapper>
             )
           })}
         </div>
@@ -124,7 +125,9 @@ export const Stepper = ({}: StepperProps) => {
 
   return (
     <Button onClick={() => resetState()} asChild>
-      <Link href={'/incident'}>{t('new_notification')}</Link>
+      <NextLinkWrapper href={'/incident'}>
+        {t('new_notification')}
+      </NextLinkWrapper>
     </Button>
   )
 }
diff --git a/src/components/ui/LinkWrapper.tsx b/src/components/ui/LinkWrapper.tsx
deleted file mode 100644
index d093378a..00000000
--- a/src/components/ui/LinkWrapper.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { Link } from '@/routing/navigation'
-
-type LinkWrapperProps = {
-  unstyled?: boolean
-} & Parameters<typeof Link>[0] &
-  React.AnchorHTMLAttributes<HTMLAnchorElement>
-
-const LinkWrapper = ({
-  href,
-  className,
-  unstyled = false,
-  children,
-  ...props
-}: LinkWrapperProps) => {
-  return (
-    <Link
-      className={`${className} ${
-        unstyled
-          ? ''
-          : 'transition duration-100 outline-none text-link underline active:text-active_link active:no-underline hover:text-hover_link hover:no-underline focus:bg-focus_link focus:text-black focus:no-underline focus-visible:border-2 focus-visible:border-focus_visible_link focus-visible:border-dashed'
-      }`}
-      href={href}
-      {...props}
-    >
-      {children}
-    </Link>
-  )
-}
-
-export { LinkWrapper }