diff --git a/components/static/Page.tsx b/components/static/Page.tsx new file mode 100644 index 00000000..75635550 --- /dev/null +++ b/components/static/Page.tsx @@ -0,0 +1,42 @@ +import ErrorMessage from '../Error'; +import parse from 'html-react-parser'; +import { useQuery } from '@apollo/react-hooks'; +import gql from 'graphql-tag'; + +const QUERY = gql` + query page($slug: String) { + page(slug: $slug) + @rest(type: "Page", path: "{args.slug}", endpoint: "wordpress") { + title + content + modified + featured_image + } + } +`; + +export default function Page({ variables }) { + const { loading, error, data } = useQuery(QUERY, { + variables, + // Setting this value to true will make the component rerender when + // the "networkStatus" changes, so we are able to know if it is fetching + // more data + notifyOnNetworkStatusChange: true, + }); + + if (error) return ; + if (loading) return
Loading
; + + const { title, content, modified, featured_image } = data.page; + + return ( + <> +

+ {title} +

+

Edited: {modified}

+ +
{parse(content)}
+ + ); +} diff --git a/pages/p/[page]/index.tsx b/pages/p/[page]/index.tsx new file mode 100644 index 00000000..ffaf17ba --- /dev/null +++ b/pages/p/[page]/index.tsx @@ -0,0 +1,57 @@ +import { GetServerSideProps } from 'next'; +import { initializeApollo } from '../../../lib/apolloClient'; +import Head from 'next/head'; +import Nav from '../../../components/home/Nav'; +import Page from '../../../components/static/Page'; +import gql from 'graphql-tag'; + +const QUERY = gql` + query page($slug: String) { + page(slug: $slug) + @rest(type: "Page", path: "{args.slug}", endpoint: "wordpress") { + title + content + excerpt + slug + date + modified + } + } +`; + +function PageItem({ variables }) { + return ( + <> + + Portal | {variables.slug} + + +