Feature/ba 2670 fe setup routing for wagtail and base app pages

packages/wagtail/modules/pages/createWagtailPage/PreloadedWagtailPagesProvider.tsx

@@ -0,0 +1,50 @@
+'use client'
+
+import { FC } from 'react'
+
+import { ComponentWithQueryRef, withRelay } from '@baseapp-frontend/graphql'
+
+import { notFound } from 'next/navigation'
+import { usePreloadedQuery } from 'react-relay'
+
+import { PageWagtailTokenQuery } from '../../../__generated__/PageWagtailTokenQuery.graphql'
+import PageQueryNode, {
+  PageWagtailURLPathQuery,
+} from '../../../__generated__/PageWagtailURLPathQuery.graphql'
+import {
+  getPageWagtailByTokenQuery,
+  getPageWagtailByURLPathQuery,
+} from '../../graphql/queries/Page'
+import WagtailPagesProvider from '../../providers/WagtailPagesProvider'
+import { WagtailPageProps } from './types'
+
+const PreloadedWagtailPagesProvider: FC<
+  ComponentWithQueryRef<PageWagtailURLPathQuery | PageWagtailTokenQuery> & WagtailPageProps
+> = ({ children, queryRef, defaultSettings }) => {
+  const isTokenQuery = 'token' in queryRef.variables && 'contentType' in queryRef.variables
+
+  const currentPage = usePreloadedQuery(
+    isTokenQuery ? getPageWagtailByTokenQuery : getPageWagtailByURLPathQuery,
+    queryRef,
+  )
+
+  if (!currentPage?.page) {
+    notFound()
+  }
+  return (
+    <WagtailPagesProvider
+      currentPage={currentPage.page}
+      defaultSettings={{
+        ...(defaultSettings ?? {}),
+      }}
+    >
+      {children}
+    </WagtailPagesProvider>
+  )
+}
+
+export default withRelay<
+  typeof PageQueryNode,
+  PageWagtailURLPathQuery | PageWagtailTokenQuery,
+  WagtailPageProps
+>(PreloadedWagtailPagesProvider)

packages/wagtail/modules/pages/createWagtailPage/index.tsx

@@ -13,7 +13,13 @@ import PageQueryByPathNode, {
 } from '../../../__generated__/PageWagtailURLPathQuery.graphql'
 import { PageTypes } from '../../components'
 import WagtailPagesProvider from '../../providers/WagtailPagesProvider'
-import { PageParams, PageSearchParams, WagtailPageProps } from './types'
+import PreloadedWagtailPagesProvider from './PreloadedWagtailPagesProvider'
+import {
+  CreateWagtailPageProviderParams,
+  PageParams,
+  PageSearchParams,
+  WagtailPageProps,
+} from './types'
 
 type PageQueryOptions =
   | {
@@ -73,8 +79,22 @@ export const generateWagtailPageComponents = (
 ) => ({
   preloadedPageQueryRef,
   WagtailPagesProvider: ({ children, defaultSettings }: WagtailPageProps) => (
-    <WagtailPagesProvider
+    <PreloadedWagtailPagesProvider
       preloadedQuery={preloadedPageQueryRef}
+      defaultSettings={defaultSettings}
+    >
+      {children}
+    </PreloadedWagtailPagesProvider>
+  ),
+  WagtailPageTypes: PageTypes,
+})
+
+export const createWagtailPageProviderFromFragment = ({
+  pageFragment,
+}: CreateWagtailPageProviderParams) => ({
+  WagtailPagesProvider: ({ children, defaultSettings }: WagtailPageProps) => (
+    <WagtailPagesProvider
+      currentPage={pageFragment}
       defaultSettings={{
         ...(defaultSettings ?? {}),
       }}

packages/wagtail/modules/pages/createWagtailPage/types.ts

@@ -1,5 +1,6 @@
 import type { PropsWithChildren } from 'react'
 
+import type { PageWagtailFieldsFragment$key } from '../../../__generated__/PageWagtailFieldsFragment.graphql'
 import type { WagtailPagesContextState } from '../../providers/WagtailPagesProvider/types'
 
 export interface PageParams {
@@ -15,6 +16,10 @@ export interface PageSearchParams {
   }
 }
 
+export interface CreateWagtailPageProviderParams {
+  pageFragment: PageWagtailFieldsFragment$key
+}
+
 export interface WagtailPageProps extends PropsWithChildren {
   defaultSettings?: ProviderDefaultSettingsType
 }

packages/wagtail/modules/pages/index.ts

@@ -1,3 +1,4 @@
 export { default as createWagtailPage } from './createWagtailPage'
 export { createWagtailPagePreview } from './createWagtailPage'
+export { createWagtailPageProviderFromFragment } from './createWagtailPage'
 export type * from './createWagtailPage/types'

packages/wagtail/modules/providers/WagtailPagesProvider/index.tsx

@@ -2,40 +2,22 @@
 
 import { FC, useMemo, useState } from 'react'
 
-import { ComponentWithQueryRef, withRelay } from '@baseapp-frontend/graphql'
-
-import { useFragment, usePreloadedQuery } from 'react-relay'
+import { useFragment } from 'react-relay'
 
 import { PageWagtailFieldsFragment$data } from '../../../__generated__/PageWagtailFieldsFragment.graphql'
-import { PageWagtailTokenQuery } from '../../../__generated__/PageWagtailTokenQuery.graphql'
-import PageQueryNode, {
-  PageWagtailURLPathQuery,
-} from '../../../__generated__/PageWagtailURLPathQuery.graphql'
-import {
-  PageWagtailFieldsFragment,
-  getPageWagtailByTokenQuery,
-  getPageWagtailByURLPathQuery,
-} from '../../graphql/queries/Page'
+import { PageWagtailFieldsFragment } from '../../graphql/queries/Page'
 import { PROVIDER_INITIAL_STATE } from './constants'
 import { WagtailPagesContext } from './context'
 import { WagtailPagesContextState, WagtailPagesProviderProps } from './types'
 
-const WagtailPagesProvider: FC<
-  ComponentWithQueryRef<PageWagtailURLPathQuery | PageWagtailTokenQuery> & WagtailPagesProviderProps
-> = ({ children, queryRef, defaultSettings }) => {
-  const isTokenQuery = 'token' in queryRef.variables && 'contentType' in queryRef.variables
-
-  const currentPage = usePreloadedQuery(
-    isTokenQuery ? getPageWagtailByTokenQuery : getPageWagtailByURLPathQuery,
-    queryRef,
-  )
-
-  if (!currentPage?.page) {
-    throw new Error('Current page not found in provider')
-  }
+const WagtailPagesProvider: FC<WagtailPagesProviderProps> = ({
+  children,
+  currentPage,
+  defaultSettings,
+}) => {
   const currentPageFragment = useFragment(
     PageWagtailFieldsFragment,
-    currentPage.page,
+    currentPage,
   ) as PageWagtailFieldsFragment$data
 
   const [state, setState] = useState<WagtailPagesContextState>({
@@ -73,8 +55,4 @@ const WagtailPagesProvider: FC<
   )
 }
 
-export default withRelay<
-  typeof PageQueryNode,
-  PageWagtailURLPathQuery | PageWagtailTokenQuery,
-  WagtailPagesProviderProps
->(WagtailPagesProvider)
+export default WagtailPagesProvider

packages/wagtail/modules/providers/WagtailPagesProvider/types.ts

@@ -1,11 +1,15 @@
 import React from 'react'
 
-import type { PageWagtailFieldsFragment$data } from '../../../__generated__/PageWagtailFieldsFragment.graphql'
+import type {
+  PageWagtailFieldsFragment$data,
+  PageWagtailFieldsFragment$key,
+} from '../../../__generated__/PageWagtailFieldsFragment.graphql'
 import type { AvailableBlocksType } from '../../components/Blocks/types'
 import type { AvailablePageTypesType } from '../../components/PageTypes/types'
 
 export type WagtailPagesProviderProps = {
   children: React.ReactNode
+  currentPage: PageWagtailFieldsFragment$key
   defaultSettings: Partial<Omit<WagtailPagesContextState, 'currentPage'>>
 }