From cebb8d807ed530bfeb671d2b14a5c6b8fb5ace01 Mon Sep 17 00:00:00 2001
From: Chris Wilkinson <c.wilkinson@elifesciences.org>
Date: Mon, 5 Aug 2024 12:56:21 +0100
Subject: [PATCH] Remove duplication

Refs #1834
---
 src/response.ts                     | 115 +++++++++++++++++-----------
 visual-regression/base.ts           |  43 ++++-------
 visual-regression/skip-link.spec.ts |   2 +-
 3 files changed, 85 insertions(+), 75 deletions(-)

diff --git a/src/response.ts b/src/response.ts
index 1dd7d8753..cf134f455 100644
--- a/src/response.ts
+++ b/src/response.ts
@@ -19,7 +19,7 @@ import { type Page, type TemplatePageEnv, templatePage } from './page.js'
 import { type PublicUrlEnv, toUrl } from './public-url.js'
 import { orcidCodeMatch } from './routes.js'
 import { isCacheable } from './status-code.js'
-import { type GetUserOnboardingEnv, maybeGetUserOnboarding } from './user-onboarding.js'
+import { type GetUserOnboardingEnv, type UserOnboarding, maybeGetUserOnboarding } from './user-onboarding.js'
 import type { User } from './user.js'
 
 export type Response =
@@ -162,6 +162,62 @@ const FlashMessageD = D.literal(
   'avatar-removed',
 )
 
+export const toPage = ({
+  locale = DefaultLocale,
+  message,
+  userOnboarding,
+  response,
+  user,
+}: {
+  locale?: SupportedLocale
+  message?: D.TypeOf<typeof FlashMessageD>
+  userOnboarding?: UserOnboarding
+  response: PageResponse | StreamlinePageResponse | TwoUpPageResponse
+  user?: User | undefined
+}): Page =>
+  response._tag === 'TwoUpPageResponse'
+    ? {
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+        locale: locale !== DefaultLocale ? locale : undefined,
+        title: response.title,
+        description: response.description,
+        content: html`
+          <h1 class="visually-hidden">${response.h1}</h1>
+
+          <aside id="preprint-details" tabindex="0" aria-label="Preprint details">${response.aside}</aside>
+
+          <main id="prereviews">${message ? showFlashMessage(message, locale) : ''} ${response.main}</main>
+        `,
+        skipLinks: [
+          [html`Skip to preprint details`, '#preprint-details'],
+          [html`Skip to PREreviews`, '#prereviews'],
+        ],
+        js: message ? (['notification-banner.js'] as const) : [],
+        type: 'two-up',
+        user,
+        userOnboarding,
+      }
+    : {
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+        locale: locale !== DefaultLocale ? locale : undefined,
+        title: response.title,
+        description: response.description,
+        content: html`
+          ${response.nav ? html` <nav>${response.nav}</nav>` : ''}
+
+          <main id="${response.skipToLabel}">${message ? showFlashMessage(message, locale) : ''}${response.main}</main>
+        `,
+        skipLinks: [
+          [rawHtml(translate(locale, 'skip-links', response.skipToLabel)()), `#${response.skipToLabel}`],
+          ...(response._tag === 'PageResponse' && response.extraSkipLink ? [response.extraSkipLink] : []),
+        ],
+        current: response.current,
+        js: response.js.concat(...(message ? (['notification-banner.js'] as const) : [])),
+        type: response._tag === 'StreamlinePageResponse' ? 'streamline' : undefined,
+        user,
+        userOnboarding,
+      }
+
 export const handlePageResponse = ({
   response,
   user,
@@ -195,29 +251,8 @@ export const handlePageResponse = ({
     ),
     RM.bindW(
       'body',
-      RM.fromReaderK(({ locale, message, userOnboarding }) =>
-        templatePage({
-          // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-          locale: locale !== DefaultLocale ? locale : undefined,
-          title: response.title,
-          description: response.description,
-          content: html`
-            ${response.nav ? html` <nav>${response.nav}</nav>` : ''}
-
-            <main id="${response.skipToLabel}">
-              ${message ? showFlashMessage(message, locale) : ''} ${response.main}
-            </main>
-          `,
-          skipLinks: [
-            [rawHtml(translate(locale, 'skip-links', response.skipToLabel)()), `#${response.skipToLabel}`],
-            ...(response._tag === 'PageResponse' && response.extraSkipLink ? [response.extraSkipLink] : []),
-          ],
-          current: response.current,
-          js: response.js.concat(...(message ? (['notification-banner.js'] as const) : [])),
-          type: response._tag === 'StreamlinePageResponse' ? 'streamline' : undefined,
-          user,
-          userOnboarding,
-        }),
+      RM.fromReaderK(({ locale, userOnboarding, message }) =>
+        templatePage(toPage({ locale, userOnboarding, message, response, user })),
       ),
     ),
     RM.ichainFirst(() => RM.status(response.status)),
@@ -277,28 +312,16 @@ const handleTwoUpPageResponse = ({
     ),
     RM.bindW(
       'body',
-      RM.fromReaderK(({ locale, message, userOnboarding }) =>
-        templatePage({
-          // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-          locale: locale !== DefaultLocale ? locale : undefined,
-          title: response.title,
-          description: response.description,
-          content: html`
-            <h1 class="visually-hidden">${response.h1}</h1>
-
-            <aside id="preprint-details" tabindex="0" aria-label="Preprint details">${response.aside}</aside>
-
-            <main id="prereviews">${message ? showFlashMessage(message, locale) : ''} ${response.main}</main>
-          `,
-          skipLinks: [
-            [html`Skip to preprint details`, '#preprint-details'],
-            [html`Skip to PREreviews`, '#prereviews'],
-          ],
-          js: message ? (['notification-banner.js'] as const) : [],
-          type: 'two-up',
-          user,
-          userOnboarding,
-        }),
+      RM.fromReaderK(({ locale, userOnboarding, message }) =>
+        templatePage(
+          toPage({
+            locale,
+            userOnboarding,
+            message,
+            response,
+            user,
+          }),
+        ),
       ),
     ),
     RM.ichainFirst(() => RM.status(Status.OK)),
diff --git a/visual-regression/base.ts b/visual-regression/base.ts
index 351ce545a..df5a2037d 100644
--- a/visual-regression/base.ts
+++ b/visual-regression/base.ts
@@ -1,16 +1,16 @@
 import { type Locator, test as baseTest } from '@playwright/test'
 import path from 'path'
 import { P, match } from 'ts-pattern'
-import { type Html, html } from '../src/html.js'
+import type { Html } from '../src/html.js'
 import { type Page, page as templatePage } from '../src/page.js'
-import type { PageResponse, StreamlinePageResponse, TwoUpPageResponse } from '../src/response.js'
+import { PageResponse, type StreamlinePageResponse, type TwoUpPageResponse, toPage } from '../src/response.js'
 
 export { expect } from '@playwright/test'
 
 interface ShowPage {
   showPage(
     response: PageResponse | StreamlinePageResponse,
-    extra?: Pick<Page, 'skipLinks' | 'user' | 'userOnboarding'>,
+    extra?: Omit<Partial<Parameters<typeof toPage>[0]>, 'response'>,
   ): Promise<Locator>
 
   showTwoUpPage(response: TwoUpPageResponse): Promise<[Locator, Locator]>
@@ -44,18 +44,17 @@ export const test = baseTest.extend<ShowPage>({
   },
   showPage: async ({ page, showHtml, templatePage }, use) => {
     await use(async function showPage(response, extra = {}) {
-      const content = html`
-        ${response.nav ? html` <nav>${response.nav}</nav>` : ''}
-
-        <main id="${response.skipToLabel}">${response.main}</main>
-      `
-
-      const pageHtml = templatePage({
-        ...extra,
-        content,
-        title: response.title,
-        js: response.js,
-      })
+      const pageHtml = templatePage(
+        toPage({
+          ...extra,
+          response: PageResponse({
+            title: response.title,
+            main: response.main,
+            nav: response.nav,
+            js: response.js,
+          }),
+        }),
+      )
 
       await showHtml(pageHtml)
 
@@ -64,19 +63,7 @@ export const test = baseTest.extend<ShowPage>({
   },
   showTwoUpPage: async ({ page, showHtml, templatePage }, use) => {
     await use(async response => {
-      const content = html`
-        <h1 class="visually-hidden">${response.h1}</h1>
-
-        <aside id="preprint-details" tabindex="0" aria-label="Preprint details">${response.aside}</aside>
-
-        <main id="prereviews">${response.main}</main>
-      `
-
-      const pageHtml = templatePage({
-        content,
-        title: response.title,
-        type: 'two-up',
-      })
+      const pageHtml = templatePage(toPage({ response }))
 
       await showHtml(pageHtml)
 
diff --git a/visual-regression/skip-link.spec.ts b/visual-regression/skip-link.spec.ts
index 00bfc57eb..520b8915d 100644
--- a/visual-regression/skip-link.spec.ts
+++ b/visual-regression/skip-link.spec.ts
@@ -8,7 +8,7 @@ test('visibly hidden when not focussed', async ({ showPage }) => {
     title: plainText('Something'),
   })
 
-  const content = await showPage(response, { skipLinks: [[html`Skip to main content`, `#${response.skipToLabel}`]] })
+  const content = await showPage(response)
   const page = content.page()
 
   const skipLink = page.getByRole('link', { name: 'Skip to main content' })