Add single page

thrijith · thrijith · commit 3a2eb05456c7 · 2019-03-11T22:55:30.000+05:30
Add metadata fields
diff --git a/components/Navigation.js b/components/Navigation.js
@@ -3,7 +3,7 @@ import Link from 'next/link'
 export default () => (
 	<div id="navigation">
 		<Link href="/"><a href="/">Home</a></Link>
-		<Link href="/posts"><a href="/posts">Posts</a></Link>
+		<Link href="/posts"><a href="/posts">Blog</a></Link>
 		<style jsx>{`
 #navigation {
   overflow: hidden;
diff --git a/pages/index.js b/pages/index.js
@@ -1,9 +1,16 @@
+import Head from 'next/head'
 import Navigation from '../components/Navigation'
 import { Fragment } from 'react'
 
 export default () => (
 	<Fragment>
 		<Navigation/>
+		<Head>
+			<title>Home Page</title>
+			<meta name="description" content="Headless WP Home Page" />
+			<meta charSet="utf-8" />
+			<meta name="viewport" content="initial-scale=1.0, width=device-width" />
+		</Head>
 		<h1>Your new server-side rendered React.js app!</h1>
 	</Fragment>
 )
diff --git a/pages/posts.js b/pages/posts.js
@@ -1,9 +1,52 @@
 import Navigation from '../components/Navigation'
-import { Fragment } from 'react'
-
-export default () => (
-	<Fragment>
-		<Navigation/>
-		<h1>Our Posts Page!</h1>
-	</Fragment>
-)
+import React, { Component, Fragment } from 'react'
+import axios from 'axios'
+import Link from 'next/link'
+import Head from 'next/head'
+
+export default class extends Component {
+
+	// Resolve promise and set initial props.
+	static async getInitialProps () {
+
+		const siteurl = 'pmcsk.test';
+
+		// Make request for posts.
+		const response = await axios.get( 'http://' + siteurl + '/wp-json/wp/v2/posts');
+
+		// Return response to posts object in props.
+		return {
+			posts: response.data
+		}
+	}
+
+	render() {
+		return (
+			<Fragment>
+				<Navigation/>
+				<Head>
+					<title>Blog Page</title>
+					<meta name="description" content="Headless WP Blog Page" />
+					<meta charSet="utf-8" />
+					<meta name="viewport" content="initial-scale=1.0, width=device-width" />
+				</Head>
+				<h1>Our Posts Page!</h1>
+				<ul>
+					{
+						this.props.posts.map( post => {
+							return (
+								<li key={ post.id }>
+									<Link href={ `/posts/${ post.slug }` }>
+										<a href={ `/posts/${ post.slug }` } dangerouslySetInnerHTML={ {
+											__html: post.title.rendered
+										} } />
+									</Link>
+								</li>
+							)
+						})
+					}
+				</ul>
+			</Fragment>
+		)
+	}
+}
diff --git a/pages/single.js b/pages/single.js
@@ -0,0 +1,44 @@
+import Navigation from '../components/Navigation'
+import React, { Component } from 'react'
+import axios from 'axios';
+import { Fragment } from 'react'
+import Head from 'next/head'
+
+export default class extends Component {
+
+	// Resolve promise and set initial props.
+	static async getInitialProps( context ) {
+
+		const siteurl = 'pmcsk.test';
+
+		const slug = context.query.slug
+
+		// Make request for posts.
+		const response = await axios.get( 'http://' + siteurl + `/wp-json/wp/v2/posts?slug=${ slug }` )
+
+		// Return our only item in array from response to posts object in props.
+		return {
+			post: response.data[0]
+		}
+	}
+
+	render() {
+		return (
+			<Fragment>
+				<Navigation/>
+				<Head>
+					<title dangerouslySetInnerHTML={ { __html: this.props.post.title.rendered } } />
+					<meta name="description" content={ this.props.post.title.rendered } />
+					<meta charSet="utf-8" />
+					<meta name="viewport" content="initial-scale=1.0, width=device-width" />
+				</Head>
+				<h1 dangerouslySetInnerHTML={ { __html: this.props.post.title.rendered } } />
+				<article
+					className="entry-content"
+					dangerouslySetInnerHTML={ {
+						__html: this.props.post.content.rendered
+					} } />
+			</Fragment>
+		)
+	}
+}
