WIP

AmazeeLabs · Dec 8, 2023 · f8a626d · f8a626d
1 parent 423703d
commit f8a626d
Show file tree

Hide file tree

Showing 12 changed files with 122 additions and 138 deletions.
diff --git a/apps/decap/src/helpers/frame.tsx b/apps/decap/src/helpers/frame.tsx
@@ -1,4 +1,4 @@
-import { Url } from '@custom/schema';
+import { FrameQuery, registerOperator, Url } from '@custom/schema';
 import { NavigationItemSource } from '@custom/schema/source';
 import { IntlProvider } from '@custom/ui/intl';
 import { Frame } from '@custom/ui/routes/Frame';
@@ -16,22 +16,20 @@ const menuItems = (amount: number) =>
   );
 
 export function PreviewFrame({ children }: PropsWithChildren) {
+  registerOperator(
+    () => ({
+      mainNavigation: {
+        items: menuItems(4),
+      },
+      footerNavigation: {
+        items: menuItems(4),
+      },
+    }),
+    FrameQuery,
+  );
   return (
     <IntlProvider locale={'en'}>
-      <Frame
-        header={{
-          mainNavigation: {
-            items: menuItems(4),
-          },
-        }}
-        footer={{
-          footerNavigation: {
-            items: menuItems(4),
-          },
-        }}
-      >
-        {children}
-      </Frame>
+      <Frame>{children}</Frame>
     </IntlProvider>
   );
 }
diff --git a/apps/website/src/layouts/index.tsx b/apps/website/src/layouts/index.tsx
@@ -1,10 +1,5 @@
 import { SilverbackPageContext } from '@amazeelabs/gatsby-source-silverback';
-import {
-  FooterQuery,
-  FrameQuery,
-  HeaderQuery,
-  registerOperator,
-} from '@custom/schema';
+import { FrameQuery, registerOperator } from '@custom/schema';
 import { IntlProvider } from '@custom/ui/intl';
 import { Frame } from '@custom/ui/routes/Frame';
 import { graphql, useStaticQuery, WrapPageElementNodeArgs } from 'gatsby';
@@ -19,34 +14,15 @@ export default function Layout({
   // TODO: Remove duplication of queries here.
   const data = useStaticQuery<FrameQuery>(graphql`
     query Frame {
-      main_en: mainNavigation(locale: "en") {
+      mainNavigation {
         ...Navigation
       }
-      main_de: mainNavigation(locale: "de") {
-        ...Navigation
-      }
-      footer_de: footerNavigation(locale: "de") {
-        ...Navigation
-      }
-      footer_en: footerNavigation(locale: "en") {
+      footerNavigation {
         ...Navigation
       }
     }
   `);
-  const main = locale === 'de' ? data.main_de : data.main_en;
-  const footer = locale === 'de' ? data.footer_de : data.footer_en;
-  registerOperator(
-    () => ({
-      mainNavigation: main,
-    }),
-    HeaderQuery,
-  );
-  registerOperator(
-    () => ({
-      footerNavigation: footer,
-    }),
-    FooterQuery,
-  );
+  registerOperator(() => data, FrameQuery);
   return (
     <IntlProvider locale={locale || 'en'}>
       <Frame>{children}</Frame>

diff --git a/packages/schema/src/fragments/Navigation.gql b/packages/schema/src/fragments/Navigation.gql
@@ -1,4 +1,5 @@
 fragment Navigation on Navigation {
+  locale
   items {
     ...NavigationItem
   }

diff --git a/packages/schema/src/operations/Footer.gql b/packages/schema/src/operations/Footer.gql
diff --git a/packages/schema/src/operations/Frame.gql b/packages/schema/src/operations/Frame.gql
@@ -1,14 +1,8 @@
 query Frame {
-  main_en: mainNavigation(locale: "en") {
+  mainNavigation {
     ...Navigation
   }
-  main_de: mainNavigation(locale: "de") {
-    ...Navigation
-  }
-  footer_en: footerNavigation(locale: "en") {
-    ...Navigation
-  }
-  footer_de: footerNavigation(locale: "de") {
+  footerNavigation {
     ...Navigation
   }
 }
diff --git a/packages/schema/src/operations/Header.gql b/packages/schema/src/operations/Header.gql
diff --git a/packages/schema/src/schema.graphql b/packages/schema/src/schema.graphql
@@ -2,11 +2,6 @@ scalar Url @default @value(json: "\"\"")
 scalar Markup @default @value(json: "\"\"")
 scalar ImageSource @default @value(json: "\"\"")
 
-"""
-implementation(gatsby): @custom/schema#fetchNavigation
-"""
-directive @fetchNavigation(type: String!, locale: String!) on FIELD_DEFINITION
-
 enum Locale @default @value(json: "\"en\"") {
   en
   de
@@ -48,14 +43,17 @@ type NavigationItem {
 }
 
 interface Navigation {
+  locale: Locale!
   items: [NavigationItem]!
 }
 
 type MainNavigation implements Navigation @menu(menu_id: "main") {
+  locale: Locale! @resolveEntityLanguage
   items: [NavigationItem]! @lang @resolveMenuItems
 }
 
 type FooterNavigation implements Navigation @menu(menu_id: "footer") {
+  locale: Locale! @resolveEntityLanguage
   items: [NavigationItem]! @lang @resolveMenuItems
 }
 
@@ -132,11 +130,9 @@ input PaginationInput {
 }
 
 type Query {
-  mainNavigation(locale: String!): MainNavigation
-    @fetchNavigation(type: "MainNavigation", locale: "$locale")
+  mainNavigation: [MainNavigation] @gatsbyNodes(type: "MainNavigation")
 
-  footerNavigation(locale: String!): FooterNavigation
-    @fetchNavigation(type: "FooterNavigation", locale: "$locale")
+  footerNavigation: [FooterNavigation] @gatsbyNodes(type: "FooterNavigation")
 
   page(id: ID!, rid: ID, locale: String!): Page
     @fetchEntity(type: "node", id: "$id", rid: "$rid", language: "$locale")

diff --git a/packages/ui/src/components/Organisms/Footer.stories.ts b/packages/ui/src/components/Organisms/Footer.stories.ts
@@ -1,4 +1,4 @@
-import { FooterQuery, Locale, Url } from '@custom/schema';
+import { FrameQuery, Locale, Navigation, Url } from '@custom/schema';
 import { Meta, StoryObj } from '@storybook/react';
 
 import { buildOperator } from '../../helpers/operators';
@@ -11,24 +11,27 @@ export default {
   },
 } satisfies Meta<typeof Footer>;
 
+export const FooterNavigationExample: Navigation = {
+  locale: Locale.En,
+  items: [
+    { title: 'About', target: '/about' as Url },
+    { title: 'Blog', target: '/blog' as Url },
+    { title: 'Jobs', target: '/jobs' as Url },
+    { title: 'Press', target: '/press' as Url },
+    { title: 'Accessibility', target: '/accessibility' as Url },
+    { title: 'Partners', target: '/partners' as Url },
+  ].map((item, index) => ({
+    ...item,
+    id: index.toString(),
+    locale: 'en' as Locale,
+  })),
+};
+
 export const Default = {
   parameters: {
     operators: [
-      buildOperator(FooterQuery, () => ({
-        footerNavigation: {
-          items: [
-            { title: 'About', target: '/about' as Url },
-            { title: 'Blog', target: '/blog' as Url },
-            { title: 'Jobs', target: '/jobs' as Url },
-            { title: 'Press', target: '/press' as Url },
-            { title: 'Accessibility', target: '/accessibility' as Url },
-            { title: 'Partners', target: '/partners' as Url },
-          ].map((item, index) => ({
-            ...item,
-            id: index.toString(),
-            locale: 'en' as Locale,
-          })),
-        },
+      buildOperator(FrameQuery, () => ({
+        footerNavigation: [FooterNavigationExample],
       })),
     ],
   },

diff --git a/packages/ui/src/components/Organisms/Footer.tsx b/packages/ui/src/components/Organisms/Footer.tsx
@@ -1,17 +1,23 @@
-import { FooterQuery, Link } from '@custom/schema';
+import { FrameQuery, Link } from '@custom/schema';
 import React from 'react';
 
 import { useIntl } from '../../utils/intl';
 import { isTruthy } from '../../utils/isTruthy';
 import { buildNavigationTree } from '../../utils/navigation';
 import { useOperation } from '../../utils/operation';
 
+function useFooterNavigation(lang: string = 'en') {
+  return (
+    useOperation(FrameQuery)
+      .data?.mainNavigation?.filter((nav) => nav?.locale === lang)
+      .pop()
+      ?.items.filter(isTruthy) || []
+  );
+}
+
 export function Footer() {
-  const { data } = useOperation(FooterQuery);
   const intl = useIntl();
-  const items = buildNavigationTree(
-    data?.footerNavigation.items.filter(isTruthy) || [],
-  );
+  const items = buildNavigationTree(useFooterNavigation(intl.locale));
   return (
     <footer className="bg-white">
       <div className="mx-auto max-w-7xl overflow-hidden py-20 px-6 sm:py-24 lg:px-8">

diff --git a/packages/ui/src/components/Organisms/Header.stories.ts b/packages/ui/src/components/Organisms/Header.stories.ts
@@ -1,4 +1,10 @@
-import { HeaderQuery, NavigationItemFragment, Url } from '@custom/schema';
+import {
+  FrameQuery,
+  Locale,
+  Navigation,
+  NavigationItemFragment,
+  Url,
+} from '@custom/schema';
 import { Meta, StoryObj } from '@storybook/react';
 import { userEvent, within } from '@storybook/testing-library';
 
@@ -12,48 +18,49 @@ export default {
   },
 } satisfies Meta<typeof Header>;
 
-const MainMenuItems: Array<NavigationItemFragment> = [
-  {
-    id: '1',
-    title: 'Home',
-    target: '/' as Url,
-  },
-  {
-    id: '2',
-    title: 'Products',
-    target: '/products' as Url,
-  },
-  {
-    id: '3',
-    title: 'About us',
-    target: '/about' as Url,
-  },
-  {
-    id: '4',
-    title: 'Blog',
-    target: '/blog' as Url,
-  },
-  {
-    id: '5',
-    title: 'Drupal',
-    target: '/drupal' as Url,
-    parent: '2',
-  },
-  {
-    id: '6',
-    title: 'Gatsby',
-    target: '/gatsby' as Url,
-    parent: '2',
-  },
-];
+export const MainNavigationExample: Navigation = {
+  locale: Locale.En,
+  items: [
+    {
+      id: '1',
+      title: 'Home',
+      target: '/' as Url,
+    },
+    {
+      id: '2',
+      title: 'Products',
+      target: '/products' as Url,
+    },
+    {
+      id: '3',
+      title: 'About us',
+      target: '/about' as Url,
+    },
+    {
+      id: '4',
+      title: 'Blog',
+      target: '/blog' as Url,
+    },
+    {
+      id: '5',
+      title: 'Drupal',
+      target: '/drupal' as Url,
+      parent: '2',
+    },
+    {
+      id: '6',
+      title: 'Gatsby',
+      target: '/gatsby' as Url,
+      parent: '2',
+    },
+  ],
+};
 
 export const Default = {
   parameters: {
     operators: [
-      buildOperator(HeaderQuery, () => ({
-        mainNavigation: {
-          items: MainMenuItems,
-        },
+      buildOperator(FrameQuery, () => ({
+        mainNavigation: [MainNavigationExample],
       })),
     ],
   },

diff --git a/packages/ui/src/components/Organisms/Header.tsx b/packages/ui/src/components/Organisms/Header.tsx
@@ -1,4 +1,4 @@
-import { HeaderQuery, Link } from '@custom/schema';
+import { FrameQuery, Link } from '@custom/schema';
 import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline';
 import React from 'react';
 
@@ -15,12 +15,18 @@ import {
   MobileMenuProvider,
 } from '../Client/MobileMenu';
 
+function useFooterNavigation(lang: string = 'en') {
+  return (
+    useOperation(FrameQuery)
+      .data?.footerNavigation?.filter((nav) => nav?.locale === lang)
+      .pop()
+      ?.items.filter(isTruthy) || []
+  );
+}
+
 export default function Header() {
-  const { data } = useOperation(HeaderQuery);
   const intl = useIntl();
-  const items = buildNavigationTree(
-    data?.mainNavigation.items.filter(isTruthy) || [],
-  );
+  const items = buildNavigationTree(useFooterNavigation(intl.locale));
 
   return (
     <MobileMenuProvider>