doc: (#287) using core types for pagination and posts (#288)

wpengine · Jun 18, 2021 · 1ffa386 · 1ffa386
1 parent 6d0a0ba
commit 1ffa386
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 31 deletions.
diff --git a/examples/next/getting-started/src/components/Pagination.tsx b/examples/next/getting-started/src/components/Pagination.tsx
@@ -1,4 +1,5 @@
 import Link from 'next/link';
+import { WPPageInfo } from '@wpengine/headless-core';
 
 interface NextPageNavigationProps {
   href: string;
@@ -25,7 +26,7 @@ function PreviousPageNavigation(props: PreviousPageNavigationProps) {
 }
 
 export interface PaginationProps {
-  pageInfo: any;
+  pageInfo: WPPageInfo;
   basePath: string;
 }
 

diff --git a/examples/next/getting-started/src/components/Posts.tsx b/examples/next/getting-started/src/components/Posts.tsx
@@ -1,15 +1,9 @@
 import React from 'react';
 import Link from 'next/link';
+import { Post } from '@wpengine/headless-core';
 import styles from 'scss/components/Posts.module.scss';
 import Heading, { HeadingProps } from './Heading';
 
-export interface Post {
-  id: string;
-  slug?: string;
-  title(): string;
-  excerpt(): string;
-}
-
 interface Props {
   posts: Post[] | undefined;
   intro?: string;
@@ -41,32 +35,29 @@ function Posts({
         {intro && <p className={styles.intro}>{intro}</p>}
         <div className="posts">
           {posts.map((post) => (
-              <div
-                className={styles.single}
-                key={post.id ?? ''}
-                id={`post-${post.id}`}>
-                <div>
-                  <Heading level={postTitleLevel} className={styles.title}>
-                    <Link href={`/posts/${post.slug}`}>
-                      <a>{post.title()}</a>
-                    </Link>
-                  </Heading>
-                  <div
-                    className={styles.excerpt}
-                    // eslint-disable-next-line react/no-danger
-                    dangerouslySetInnerHTML={{ __html: post.excerpt() ?? '' }}
-                  />
+            <div
+              className={styles.single}
+              key={post.id ?? ''}
+              id={`post-${post.id}`}>
+              <div>
+                <Heading level={postTitleLevel} className={styles.title}>
                   <Link href={`/posts/${post.slug}`}>
-                    <a
-                      aria-label={`Read more about ${
-                        post.title || 'the post'
-                      }`}>
-                      {readMoreText}
-                    </a>
+                    <a>{post.title()}</a>
                   </Link>
-                </div>
+                </Heading>
+                <div
+                  className={styles.excerpt}
+                  // eslint-disable-next-line react/no-danger
+                  dangerouslySetInnerHTML={{ __html: post.excerpt() ?? '' }}
+                />
+                <Link href={`/posts/${post.slug}`}>
+                  <a aria-label={`Read more about ${post.title || 'the post'}`}>
+                    {readMoreText}
+                  </a>
+                </Link>
               </div>
-            ))}
+            </div>
+          ))}
           {posts && posts?.length < 1 && <p>No posts found.</p>}
         </div>
       </div>