feat: add metadata title to form steps + refactor current/max step

delta10 · Nov 4, 2024 · b87e7cc · b87e7cc
1 parent a1f6564
commit b87e7cc
Show file tree

Hide file tree

Showing 4 changed files with 116 additions and 24 deletions.
diff --git a/src/app/[locale]/incident/add/page.tsx b/src/app/[locale]/incident/add/page.tsx
@@ -1,6 +1,30 @@
 import { NextIntlClientProvider, useMessages, useTranslations } from 'next-intl'
 import { IncidentQuestionsLocationForm } from '@/app/[locale]/incident/add/components/IncidentQuestionsLocationForm'
 import { Heading, HeadingGroup, PreHeading } from '@/components/index'
+import { getTranslations } from 'next-intl/server'
+import { createTitle } from '@/lib/utils/create-title'
+import { Metadata } from 'next/types'
+
+const currentStep = 2
+const maxStep = 4
+
+export async function generateMetadata(): Promise<Metadata> {
+  const errorMessage = ''
+  const t = await getTranslations('describe-add')
+  const tGeneral = await getTranslations('general.describe_form')
+
+  return {
+    title: createTitle(
+      [
+        errorMessage ? tGeneral('title-prefix-error') : '',
+        tGeneral('pre-heading', { current: currentStep, max: maxStep }),
+        t('heading'),
+        'gemeente Voorbeeld',
+      ],
+      tGeneral('title-separator')
+    ),
+  }
+}
 
 export default function AddAditionalInformationPage() {
   const t = useTranslations('describe-add')
@@ -12,7 +36,7 @@ export default function AddAditionalInformationPage() {
       <HeadingGroup>
         <Heading level={1}>{t('heading')}</Heading>
         <PreHeading>
-          {tGeneral('pre-heading', { current: 2, max: 4 })}
+          {tGeneral('pre-heading', { current: currentStep, max: maxStep })}
         </PreHeading>
       </HeadingGroup>
       <NextIntlClientProvider messages={messages}>

diff --git a/src/app/[locale]/incident/contact/page.tsx b/src/app/[locale]/incident/contact/page.tsx
@@ -1,6 +1,30 @@
 import { NextIntlClientProvider, useMessages, useTranslations } from 'next-intl'
 import { IncidentContactForm } from '@/app/[locale]/incident/contact/components/IncidentContactForm'
 import { Heading, HeadingGroup, PreHeading } from '@/components/index'
+import { getTranslations } from 'next-intl/server'
+import { createTitle } from '@/lib/utils/create-title'
+import { Metadata } from 'next/types'
+
+const currentStep = 3
+const maxStep = 4
+
+export async function generateMetadata(): Promise<Metadata> {
+  const errorMessage = ''
+  const t = await getTranslations('describe-contact')
+  const tGeneral = await getTranslations('general.describe_form')
+
+  return {
+    title: createTitle(
+      [
+        errorMessage ? tGeneral('title-prefix-error') : '',
+        tGeneral('pre-heading', { current: currentStep, max: maxStep }),
+        t('heading'),
+        'gemeente Voorbeeld',
+      ],
+      tGeneral('title-separator')
+    ),
+  }
+}
 
 export default function AddContactDetailsPage() {
   const t = useTranslations('describe-contact')
@@ -12,7 +36,7 @@ export default function AddContactDetailsPage() {
       <HeadingGroup>
         <Heading level={1}>{t('heading')}</Heading>
         <PreHeading>
-          {tGeneral('pre-heading', { current: 3, max: 4 })}
+          {tGeneral('pre-heading', { current: currentStep, max: maxStep })}
         </PreHeading>
       </HeadingGroup>
       <NextIntlClientProvider messages={messages}>

diff --git a/src/app/[locale]/incident/page.tsx b/src/app/[locale]/incident/page.tsx
@@ -1,24 +1,43 @@
 import { NextIntlClientProvider, useMessages, useTranslations } from 'next-intl'
+import { getTranslations } from 'next-intl/server'
 import { IncidentDescriptionForm } from '@/app/[locale]/incident/components/IncidentDescriptionForm'
-import { Alert, HeadingGroup, PreHeading, Link } from '@/components/index'
-
-import { Paragraph, Heading } from '@/components/index'
-// import { Metadata, ResolvingMetadata } from 'next/types'
-
-// type Props = {
-//   params: Promise<object>
-//   searchParams: Promise<{ [key: string]: string | string[] | undefined }>
-// }
-
-// export async function generateMetadata(
-//   { params, searchParams }: Props,
-//   parent: ResolvingMetadata
-// ): Promise<Metadata> {
-//   const t = useTranslations('describe-report')
-//   return {
-//     title: [t('heading'), 'Gemeente Purmerend'].join(' · '),
-//   }
-// }
+import {
+  Alert,
+  Heading,
+  HeadingGroup,
+  Paragraph,
+  PreHeading,
+  Link,
+} from '@/components/index'
+import { createTitle } from '@/lib/utils/create-title'
+import { Metadata } from 'next/types'
+
+// TODO: Consider if these should be static params
+const currentStep = 1
+const maxStep = 4
+
+export async function generateMetadata(): Promise<Metadata> {
+  // TODO: Somehow obtain errorMessage status, or remove this code.
+  // Trying to achieve this prefix because of NL Design System guidelines:
+  // "Update het <title> element in de <head>"
+  // https://nldesignsystem.nl/richtlijnen/formulieren/foutmeldingen/screenreaderfeedback
+  const errorMessage = ''
+
+  const t = await getTranslations('describe-report')
+  const tGeneral = await getTranslations('general.describe_form')
+
+  return {
+    title: createTitle(
+      [
+        errorMessage ? tGeneral('title-prefix-error') : '',
+        tGeneral('pre-heading', { current: currentStep, max: maxStep }),
+        t('heading'),
+        'gemeente Voorbeeld',
+      ],
+      tGeneral('title-separator')
+    ),
+  }
+}
 
 export default async function Home() {
   return <IncidentDescriptionPage />
@@ -27,6 +46,7 @@ export default async function Home() {
 function IncidentDescriptionPage() {
   const t = useTranslations('describe-report')
   const tGeneral = useTranslations('general.describe_form')
+  const errorMessage = ''
   const messages = useMessages()
 
   return (
@@ -35,7 +55,7 @@ function IncidentDescriptionPage() {
         <HeadingGroup>
           <Heading level={1}>{t('heading')}</Heading>
           <PreHeading>
-            {tGeneral('pre-heading', { current: 1, max: 4 })}
+            {tGeneral('pre-heading', { current: currentStep, max: maxStep })}
           </PreHeading>
         </HeadingGroup>
         <Alert>

diff --git a/src/app/[locale]/incident/summary/page.tsx b/src/app/[locale]/incident/summary/page.tsx
@@ -1,6 +1,30 @@
 import { NextIntlClientProvider, useMessages, useTranslations } from 'next-intl'
 import { IncidentSummaryForm } from '@/app/[locale]/incident/summary/components/IncidentSummaryForm'
-import { HeadingGroup, Heading, PreHeading } from '@/components/index'
+import { Heading, HeadingGroup, PreHeading } from '@/components/index'
+import { getTranslations } from 'next-intl/server'
+import { createTitle } from '@/lib/utils/create-title'
+import { Metadata } from 'next/types'
+
+const currentStep = 4
+const maxStep = 4
+
+export async function generateMetadata(): Promise<Metadata> {
+  const errorMessage = ''
+  const t = await getTranslations('describe-summary')
+  const tGeneral = await getTranslations('general.describe_form')
+
+  return {
+    title: createTitle(
+      [
+        errorMessage ? tGeneral('title-prefix-error') : '',
+        tGeneral('pre-heading', { current: currentStep, max: maxStep }),
+        t('heading'),
+        'gemeente Voorbeeld',
+      ],
+      tGeneral('title-separator')
+    ),
+  }
+}
 
 export default function SummaryDetailsPage() {
   const t = useTranslations('describe-summary')
@@ -12,7 +36,7 @@ export default function SummaryDetailsPage() {
       <HeadingGroup>
         <Heading level={1}>{t('heading')}</Heading>
         <PreHeading>
-          {tGeneral('pre-heading', { current: 4, max: 4 })}
+          {tGeneral('pre-heading', { current: currentStep, max: maxStep })}
         </PreHeading>
       </HeadingGroup>
       <NextIntlClientProvider messages={messages}>