From 2cc9d1a6285fde1b42f5a08775531a0f864655b0 Mon Sep 17 00:00:00 2001 From: anuveyatsu Date: Fri, 26 Jun 2020 17:58:53 +0600 Subject: [PATCH] [blog][m]: implemented blog home and individual post pages. --- components/static/List.tsx | 46 ++++++++++++++++++++ components/static/Post.tsx | 42 ++++++++++++++++++ package.json | 1 + pages/blog/[post]/index.tsx | 57 ++++++++++++++++++++++++ pages/blog/index.tsx | 47 ++++++++++++++++++++ yarn.lock | 87 +++++++++++++++++++++++++++++++++++-- 6 files changed, 277 insertions(+), 3 deletions(-) create mode 100644 components/static/List.tsx create mode 100644 components/static/Post.tsx create mode 100644 pages/blog/[post]/index.tsx create mode 100644 pages/blog/index.tsx diff --git a/components/static/List.tsx b/components/static/List.tsx new file mode 100644 index 00000000..32fa3787 --- /dev/null +++ b/components/static/List.tsx @@ -0,0 +1,46 @@ +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 posts { + posts @rest(type: "Posts", path: "", endpoint: "wordpress-posts") { + found + posts + } + } +`; + +export default function List() { + const { loading, error, data } = useQuery(QUERY, { + // 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 { posts, found } = data.posts; + + return ( + <> +

+ {found} posts found +

+ {posts.map((post, index) => ( +
+ + {parse(post.title)} + +

{parse(post.excerpt)}

+
+ ))} + + ); +} diff --git a/components/static/Post.tsx b/components/static/Post.tsx new file mode 100644 index 00000000..ea1e934d --- /dev/null +++ b/components/static/Post.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 Post({ 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/package.json b/package.json index f602ed84..aea62961 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "graphql": "^15.1.0", "graphql-anywhere": "^4.2.7", "graphql-tag": "^2.10.3", + "html-react-parser": "^0.13.0", "markdown-it": "^11.0.0", "next": "9.4.2", "qs": "^6.9.4", diff --git a/pages/blog/[post]/index.tsx b/pages/blog/[post]/index.tsx new file mode 100644 index 00000000..a71cd5c2 --- /dev/null +++ b/pages/blog/[post]/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 Post from '../../../components/static/Post'; +import gql from 'graphql-tag'; + +const QUERY = gql` + query post($slug: String) { + post(slug: $slug) + @rest(type: "Post", path: "{args.slug}", endpoint: "wordpress") { + title + content + excerpt + slug + date + modified + } + } +`; + +function PostItem({ variables }) { + return ( + <> + + Portal | {variables.slug} + + +