knight/datahub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[pages][m]: implementd pages from wordpress.

Browse Source
This commit is contained in:
anuveyatsu
2020-06-26 18:00:33 +06:00
parent 2cc9d1a628
commit 1f395227c4
2 changed files with 99 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
components/static/Page.tsx Normal file
View File

@@ -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 <ErrorMessage message="Error loading search results." />;
if (loading) return <div>Loading</div>;
const { title, content, modified, featured_image } = data.page;
return (
<>
<h1 className="text-3xl font-semibold text-primary my-6 inline-block">
{title}
</h1>
<p className="mb-6">Edited: {modified}</p>
<img src={featured_image} className="mb-6" />
<div>{parse(content)}</div>
</>
);
}

57
pages/p/[page]/index.tsx Normal file
View File

@@ -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 (
<>
<Head>
<title>Portal | {variables.slug}</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<Nav />
<main className="p-6">
<Page variables={variables} />
</main>
</>
);
}
export const getServerSideProps: GetServerSideProps = async (context) => {
const variables = {
slug: context.query.page,
};
const apolloClient = initializeApollo();
await apolloClient.query({
query: QUERY,
variables,
});
return {
props: {
initialApolloState: apolloClient.cache.extract(),
variables,
},
};
};
export default PageItem;