import React from "react" ; import { useQuery } from "@apollo/react-hooks" ; import Render from "./Render" ; import trim from "lodash.trim" ; import { GET_SETTINGS , GET_PUBLISHED_PAGE } from "./graphql" ; declare global { interface Window { __PS_NOT_FOUND_PAGE__ : string ; } } const trimPath = ( value ) => { if ( typeof value === "string" ) { return "/" + trim ( value , "/" ) ; } return null ; } ; const isNotFoundPage = window . __PS_NOT_FOUND_PAGE__ ; const notFoundInitialPath = trimPath ( location . pathname ) ; const getPath = ( ) => { let path = location . pathname ; if ( typeof path !== "string" ) { return null ; } path = trimPath ( path ) ; if ( isNotFoundPage && path === notFoundInitialPath ) { return "/not-found" ; } return path ; } ; /**
 * This component will fetch the published page's data and pass it to the `Render` function. Note that if the
 * `preview` query parameter is present, we're getting the page directly by its ID, instead of the URL.
 * The `preview` query parameter is set, for example, when previewing pages from Page Builder's editor / Admin app.
 */ const Page = ( ) => { const path = getPath ( ) ; const query = new URLSearchParams ( location . search ) ; const id = query . get ( "preview" ) ; const getPublishedPageQuery = useQuery ( GET_PUBLISHED_PAGE ( ) , { variables : { id , path , returnErrorPage : true , returnNotFoundPage : true , preview : ! ! id } } ) ; const getSettingsQuery = useQuery ( GET_SETTINGS ) ; const { data : page , error } = getPublishedPageQuery . data ?. pageBuilder ?. getPublishedPage || { } ; const settings = getSettingsQuery . data ?. pageBuilder ?. getSettings ?. data || { } ; return < Render page = { page } error = { error } settings = { settings } / > ; } ; export default Page ;