WIP

AmazeeLabs · Dec 9, 2023 · 566e9ae · 566e9ae
1 parent 9415570
commit 566e9ae
Show file tree

Hide file tree

Showing 11 changed files with 166 additions and 108 deletions.
diff --git a/apps/decap/src/collections/page.tsx b/apps/decap/src/collections/page.tsx
@@ -1,4 +1,9 @@
-import { ImageSource, Url, ViewPageQuery } from '@custom/schema';
+import {
+  ImageSource,
+  registerOperator,
+  Url,
+  ViewPageQuery,
+} from '@custom/schema';
 import {
   BlockMarkupSource,
   BlockMediaSource,
@@ -243,7 +248,13 @@ export function PagePreview({
     (src) => getAsset(src).url,
   );
 
+  if (data) {
+    registerOperator(() => data, ViewPageQuery);
+  }
+
   return (
-    <PreviewFrame>{data?.page ? <Page page={data.page} /> : null}</PreviewFrame>
+    <PreviewFrame>
+      <Page id="1" locale="en" />
+    </PreviewFrame>
   );
 }
diff --git a/apps/website/gatsby-node.mjs b/apps/website/gatsby-node.mjs
@@ -1,4 +1,4 @@
-// @ts-check
+// TODO: re-add @ts-check when the issue with the type definitions is resolved.
 import { Locale } from '@custom/schema';
 import { resolve } from 'path';
 
@@ -33,29 +33,11 @@ export const createPages = async ({ actions, graphql }) => {
     statusCode: 200,
   });
 
+  // TODO: Remove duplication of queries and fix typing.
   /**
-   * @type {{
-   *   data?: {
-   *     websiteSettings?: {
-   *       homePage?: {
-   *         translations: Array<{
-   *           typeName: string;
-   *           path: string;
-   *           locale: string;
-   *           id: string;
-   *           remoteId: string;
-   *         }>;
-   *       };
-   *       notFoundPage?: {
-   *         translations: Array<{
-   *           path: string;
-   *         }>;
-   *       };
-   *     };
-   *   };
-   *   errors?: any[];
-   * }}
+   * @type {{data: import('@custom/schema')['IndexPagesQuery'], errors?: [string]}}
    */
+  // @ts-ignore
   const settings = await graphql(`
     query IndexPages {
       websiteSettings {

diff --git a/apps/website/src/pages/404.tsx b/apps/website/src/pages/404.tsx
@@ -1,4 +1,8 @@
-import { PageFragment } from '@custom/schema';
+import {
+  NotFoundPageQuery,
+  registerOperator,
+  ViewPageQuery,
+} from '@custom/schema';
 import { Page } from '@custom/ui/routes/Page';
 import { graphql, PageProps } from 'gatsby';
 import React from 'react';
@@ -12,7 +16,8 @@ export const query = graphql`
   query NotFoundPage {
     websiteSettings {
       notFoundPage {
-        translations: _translations {
+        translations {
+          id
           locale
           ...Page
         }
@@ -21,28 +26,34 @@ export const query = graphql`
   }
 `;
 
-type NotFoundPageQuery = {
-  websiteSettings?: {
-    notFoundPage?: {
-      translations?: Array<
-        {
-          locale: string;
-        } & PageFragment
-      >;
-    };
-  };
-};
+function isTruthy<T>(value: T | undefined | null): value is T {
+  return Boolean(value);
+}
 
 export default function Index({ data }: PageProps<NotFoundPageQuery>) {
+  data.websiteSettings?.notFoundPage?.translations
+    ?.filter(isTruthy)
+    .forEach(({ id, locale, ...page }) => {
+      registerOperator(
+        () => ({
+          page,
+        }),
+        ViewPageQuery,
+        {
+          id,
+          locale,
+        },
+      );
+    });
   return (
     <LanguageNegotiator defaultLanguage={'en'}>
-      {data.websiteSettings?.notFoundPage?.translations?.map(
-        ({ locale, ...page }) => (
+      {data.websiteSettings?.notFoundPage?.translations
+        ?.filter(isTruthy)
+        .map(({ id, locale }) => (
           <LanguageNegotiatorContent key={locale} language={locale}>
-            <Page page={page} />
+            <Page id={id} locale={locale} />
           </LanguageNegotiatorContent>
-        ),
-      )}
+        ))}
     </LanguageNegotiator>
   );
 }
diff --git a/apps/website/src/templates/page.tsx b/apps/website/src/templates/page.tsx
@@ -1,23 +1,20 @@
 import { SilverbackPageContext } from '@amazeelabs/gatsby-source-silverback';
-import { PageFragment } from '@custom/schema';
+import { Locale, registerOperator, ViewPageQuery } from '@custom/schema';
 import { Page } from '@custom/ui/routes/Page';
 import { graphql, HeadProps, PageProps } from 'gatsby';
 import React from 'react';
 
+// TODO: Remove duplication of queries here.
 export const query = graphql`
-  query PageTemplate($remoteId: String!) {
-    page(_id: { eq: $remoteId }) {
+  query ViewPageQuery($id: ID!, $rid: ID, $locale: String!) {
+    page(id: $id, rid: $rid, locale: $locale) {
       ...Page
     }
   }
 `;
 
-type PageTemplateQuery = {
-  page: PageFragment;
-};
-
-export function Head({ data }: HeadProps<PageTemplateQuery>) {
-  return (
+export function Head({ data }: HeadProps<ViewPageQuery>) {
+  return data.page ? (
     <>
       <title>{data.page.title}</title>
       {data.page.metaTags?.map((metaTag, index) => {
@@ -41,11 +38,21 @@ export function Head({ data }: HeadProps<PageTemplateQuery>) {
         return null;
       }) || null}
     </>
-  );
+  ) : null;
 }
 
 export default function PageTemplate({
   data,
-}: PageProps<PageTemplateQuery, SilverbackPageContext>) {
-  return <Page page={data.page} />;
+  pageContext,
+}: PageProps<ViewPageQuery, SilverbackPageContext>) {
+  registerOperator(() => data, ViewPageQuery, {
+    id: pageContext.id,
+    locale: pageContext.locale,
+  });
+  return (
+    <Page
+      id={pageContext.id}
+      locale={(pageContext.locale as Locale) || Locale.En}
+    />
+  );
 }
diff --git a/packages/schema/src/operations/IndexPages.gql b/packages/schema/src/operations/IndexPages.gql
@@ -0,0 +1,17 @@
+query IndexPages {
+  websiteSettings {
+    homePage {
+      translations {
+        __typename
+        locale
+        id
+        path
+      }
+    }
+    notFoundPage {
+      translations {
+        path
+      }
+    }
+  }
+}
diff --git a/packages/schema/src/operations/NotFoundPage.gql b/packages/schema/src/operations/NotFoundPage.gql
@@ -0,0 +1,11 @@
+query NotFoundPage {
+  websiteSettings {
+    notFoundPage {
+      translations {
+        id
+        locale
+        ...Page
+      }
+    }
+  }
+}
diff --git a/packages/schema/src/operations/ViewPage.gql b/packages/schema/src/operations/ViewPage.gql
@@ -1,4 +1,4 @@
-query ViewPage($id: ID!, $rid: ID!, $locale: String!) {
+query ViewPage($id: ID!, $rid: ID, $locale: String!) {
   page(id: $id, rid: $rid, locale: $locale) {
     ...Page
   }

diff --git a/packages/schema/src/schema.graphql b/packages/schema/src/schema.graphql
@@ -65,6 +65,7 @@ type Page implements ContentHubResultItem
   @type(id: "page") {
   id: ID! @resolveEntityId
   locale: Locale! @resolveEntityLanguage
+  translations: [Page] @resolveEntityTranslations
   path: Url! @resolveEntityPath @isPath
   title: String! @resolveProperty(path: "title.value")
   teaserImage: MediaImage
@@ -136,9 +137,12 @@ type Query {
   footerNavigation: [FooterNavigation] @gatsbyNodes(type: "FooterNavigation")
 
   allPages: [Page] @gatsbyNodes(type: "Page")
+  websiteSettings: WebsiteSettings
+    @gatsbyNode(type: "WebsiteSettings", id: "settings")
 
   page(id: ID!, rid: ID, locale: String!): Page
     @fetchEntity(type: "node", id: "$id", rid: "$rid", language: "$locale")
+    @gatsbyNode(type: "Page", id: "$id")
 
   contentHub(query: String, pagination: PaginationInput!): ContentHubResult!
     @contentHub(query: "$query", pagination: "$pagination")

diff --git a/packages/ui/src/components/Routes/Page.stories.ts b/packages/ui/src/components/Routes/Page.stories.ts
@@ -1,7 +1,9 @@
+import { ViewPageQuery } from '@custom/schema';
 import Landscape from '@stories/landscape.jpg?as=metadata';
 import { Meta, StoryObj } from '@storybook/react';
 
 import { image } from '../../helpers/image';
+import { buildOperator } from '../../helpers/operators';
 import { Mixed, Paragraph } from '../Organisms/PageContent/BlockMarkup.stories';
 import { WithCaption } from '../Organisms/PageContent/BlockMedia.stories';
 import { Page } from './Page';
@@ -11,56 +13,64 @@ export default {
 } satisfies Meta<typeof Page>;
 
 export const Default = {
-  args: {
-    page: {
-      title: 'Page Title',
-      hero: {
-        headline: 'Page Hero Headline',
-      },
-      content: [
-        {
-          __typename: 'BlockMarkup',
-          ...Mixed.args,
+  parameters: {
+    operators: [
+      buildOperator(ViewPageQuery, () => ({
+        page: {
+          title: 'Page Title',
+          hero: {
+            headline: 'Page Hero Headline',
+          },
+          content: [
+            {
+              __typename: 'BlockMarkup',
+              ...Mixed.args,
+            },
+            {
+              __typename: 'BlockMedia',
+              ...WithCaption.args,
+            },
+            {
+              __typename: 'BlockMarkup',
+              ...Paragraph.args,
+            },
+          ] as Exclude<ViewPageQuery['page'], undefined>['content'],
         },
-        {
-          __typename: 'BlockMedia',
-          ...WithCaption.args,
-        },
-        {
-          __typename: 'BlockMarkup',
-          ...Paragraph.args,
-        },
-      ],
-    },
+      })),
+    ],
   },
 } satisfies StoryObj<typeof Page>;
 
 export const FullHero = {
-  args: {
-    page: {
-      title: 'Page Title',
-      hero: {
-        headline: 'Page Hero Headline',
-        lead: 'A longer lead text that even might break into multiple lines.',
-        image: {
-          source: image(Landscape, { width: 2000 }),
-          alt: 'Stock photo landscape hero.',
-        },
-      },
-      content: [
-        {
-          __typename: 'BlockMarkup',
-          ...Mixed.args,
-        },
-        {
-          __typename: 'BlockMedia',
-          ...WithCaption.args,
-        },
-        {
-          __typename: 'BlockMarkup',
-          ...Paragraph.args,
+  parameters: {
+    operators: [
+      buildOperator(ViewPageQuery, () => ({
+        page: {
+          title: 'Page Title',
+          hero: {
+            headline: 'Page Hero Headline',
+            lead: 'A longer lead text that even might break into multiple lines.',
+            image: {
+              source: image(Landscape, { width: 2000 }),
+              alt: 'Stock photo landscape hero.',
+            },
+          },
+          content: [
+            {
+              __typename: 'BlockMarkup',
+              ...Mixed.args,
+            },
+            {
+              __typename: 'BlockMedia',
+              ...WithCaption.args,
+            },
+            {
+              __typename: 'BlockMarkup',
+              ...Paragraph.args,
+            },
+          ] as Exclude<ViewPageQuery['page'], undefined>['content'],
         },
-      ],
-    },
+      })),
+    ],
   },
 } satisfies StoryObj<typeof Page>;