import { GetServerSideProps , NextPageContext } from 'next' ; import { FunctionComponent , ReactElement } from 'react' ; import PageLayout from '@weco/common/views/components/PageLayout/PageLayout' ; import SpacingSection from '@weco/common/views/components/SpacingSection/SpacingSection' ; import LayoutPaginatedResults from '../components/LayoutPaginatedResults/LayoutPaginatedResults' ; import Layout12 from '@weco/common/views/components/Layout12/Layout12' ; import SegmentedControl from '@weco/common/views/components/SegmentedControl/SegmentedControl' ; import { getGuides , getGuideFormats , } from '@weco/common/services/prismic/guides' ; import { removeUndefinedProps } from '@weco/common/utils/json' ; import { Page } from '@weco/common/model/pages' ; import { PaginatedResults } from '@weco/common/services/prismic/types' ; import { Format } from '@weco/common/model/format' ; const pageDescription = 'Guides intro text...' ; const displayTitle = 'Guides' ; type FiltersProps = { currentId : string | string [ ] | null ; guideFormats : Format [ ] ; } ; const Filters = ( { currentId , guideFormats , } ) => { const items = guideFormats . map ( guide => { return { id : guide . id , url : `/guides?format=${ guide . id }` , text : guide . title , } ; } ) ; items . unshift ( { id : 'all' , url : '/guides' , text : 'All' , } ) ; return ( < Layout12 > < SegmentedControl id = { 'guidesFilter' } activeId = { currentId || 'all' } items = { items } / > < /Layout12>); } ; type Props = { guides : PaginatedResults < Page > ; guideFormats : Format [ ] ; formatId : string | string [ ] | null ; } ; const GuidePage = ( { guides , guideFormats , formatId , } ) : ReactElement < Props > => { return ( < PageLayout title = { 'Guides' } description = { pageDescription } url = { { pathname : '/guides' } } jsonLd = { { '@type' : 'Webpage' } } openGraphType = { 'website' } siteSection = { 'what-we-do' } imageUrl = { undefined } imageAltText = { undefined } > < SpacingSection > < LayoutPaginatedResults showFreeAdmissionMessage = { false } title = { displayTitle } description = { [ { type : 'paragraph' , text : pageDescription , spans : [ ] , } , ] } paginatedResults = { guides } paginationRoot = { '' } > < Filters currentId = { formatId } guideFormats = { guideFormats } / > < /LayoutPaginatedResults> < /SpacingSection> < /PageLayout>); } ; export const getServerSideProps = async ( ctx ) => { const serverData = await getServerData ( context ) ; const { format , memoizedPrismic } = ctx . query ; const guidesPromise = getGuides ( ctx . req , { format , } , memoizedPrismic ) ; const guideFormatsPromise = getGuideFormats ( ctx . req , memoizedPrismic ) ; const [ guides , guideFormats ] = await Promise . all ( [ guidesPromise , guideFormatsPromise , ] ) ; if ( guides ) { return { props : removeUndefinedProps ( { guides , guideFormats , formatId : format || null , serverData , } ) , } ; } else { return { notFound : true } ; } } ; export default GuidePage ;