frontend: fixes preview and adds page support

frontend/components/PageWrapper.js

@@ -12,12 +12,12 @@ const PageWrapper = Comp =>
     static async getInitialProps(args) {
       const [headerMenu, childProps] = await Promise.all([
         wp.menus().id('header-menu'),
-        Comp.getInitialProps(args),
+        Comp.getInitialProps ? Comp.getInitialProps(args) : {},
       ]);
 
       return {
         headerMenu,
-        ...(Comp.getInitialProps ? childProps : null),
+        ...childProps,
       };
     }
 

frontend/pages/post.js

@@ -37,7 +37,9 @@ class Post extends Component {
 
   render() {
     const { post, headerMenu } = this.props;
-    if (!post.title) return <Error statusCode={404} />;
+    if (!post.title) {
+      return <Error statusCode={404} />;
+    }
 
     return (
       <Layout>

frontend/pages/preview.js

@@ -16,9 +16,9 @@ class Preview extends Component {
 
   componentDidMount() {
     const { url } = this.props;
-    const { id, wpnonce } = url.query;
+    const { id, rev, type, wpnonce } = url.query;
     fetch(
-      `${Config.apiUrl}/wp/v2/posts/${id}?_wpnonce=${wpnonce}`,
+      `${Config.apiUrl}/wp/v2/${type}s/${id}/revisions/${rev}?_wpnonce=${wpnonce}`,
       { credentials: 'include' }, // required for cookie nonce auth
     )
       .then(res => res.json())
@@ -32,8 +32,10 @@ class Preview extends Component {
   render() {
     const { headerMenu } = this.props;
     const { post } = this.state;
-    if (post && post.code && post.code === 'rest_cookie_invalid_nonce') {
-      return <Error statusCode={404} />;
+    const { data } = post || {};
+
+    if (data && data.status && data.status >= 400) {
+      return <Error statusCode={data.status} />;
     }
 
     return (

frontend/server.js

@@ -28,9 +28,10 @@ app
       app.render(req, res, actualPage, queryParams);
     });
 
-    server.get('/_preview/:id/:wpnonce', (req, res) => {
+    server.get('/_preview/:id/:rev/:type/:wpnonce', (req, res) => {
       const actualPage = '/preview';
-      const queryParams = { id: req.params.id, wpnonce: req.params.wpnonce };
+      const { id, rev, type, wpnonce } = req.params;
+      const queryParams = { id, rev, type, wpnonce };
       app.render(req, res, actualPage, queryParams);
     });
 

wordpress/wp-content/themes/postlight-headless-wp/inc/admin.php

@@ -28,10 +28,18 @@ function taxonomy_checklist_checked_ontop_filter( $args ) {
  * @return str The headless WordPress preview link.
  */
 function set_headless_preview_link( $link ) {
-    return get_frontend_origin() . '/'
-        . '_preview/'
-        . get_the_ID() . '/'
-        . wp_create_nonce( 'wp_rest' );
+    $post = get_post( $post );
+    if ( ! $post ) {
+        return $link;
+    }
+
+    $frontend = get_frontend_origin();
+    $parent_id = $post->post_parent;
+    $revision_id = $post->ID;
+    $type = get_post_type($parent_id);
+    $nonce = wp_create_nonce( 'wp_rest' );
+
+    return "$frontend/_preview/$parent_id/$revision_id/$type/$nonce";
 }
 
 add_filter( 'preview_post_link', 'set_headless_preview_link' );