Merge pull request #22 from WebDevStudios/feature/custom-fields

Custom Fields

Author: Greg Rickaby

components/custom-fields.js

@@ -0,0 +1,20 @@
+import PropTypes from 'prop-types'
+
+export default function CustomFields({customFields}) {
+  return (
+    <div className="max-w-2xl mx-auto">
+      <h3 className="mt-8 text-lg font-bold">What I&apos;m Into</h3>
+      {customFields.book && <p className="mt-3">Book: {customFields.book}</p>}
+      {customFields.music && (
+        <p className="mt-3">Music: {customFields.music}</p>
+      )}
+      {customFields.television && (
+        <p className="mt-3">Television: {customFields.television}</p>
+      )}
+    </div>
+  )
+}
+
+CustomFields.propTypes = {
+  customFields: PropTypes.object
+}

lib/api.js

@@ -149,6 +149,11 @@ export async function getPostAndMorePosts(slug, preview, previewData) {
           }
         }
       }
+      acf_whatiminto {
+        book
+        music
+        television
+      }
     }
     query PostBySlug($id: ID!, $idType: PostIdType!) {
       post(id: $id, idType: $idType) {
@@ -169,6 +174,11 @@ export async function getPostAndMorePosts(slug, preview, previewData) {
                   ...AuthorFields
                 }
               }
+              acf_whatiminto {
+                book
+                music
+                television
+              }
             }
           }
         }

pages/posts/[slug].js

@@ -13,6 +13,7 @@ import PostTitle from '@/components/post-title'
 import Head from 'next/head'
 import {CMS_NAME} from '@/lib/config'
 import Tags from '@/components/tags'
+import CustomFields from '@/components/custom-fields'
 
 export default function Post({post, posts, preview}) {
   const router = useRouter()
@@ -48,6 +49,9 @@ export default function Post({post, posts, preview}) {
                 categories={post.categories}
               />
               <PostBody content={post.content} />
+              <div>
+                <CustomFields customFields={post.acf_whatiminto} />
+              </div>
               <footer>
                 {post.tags.edges.length > 0 && <Tags tags={post.tags} />}
               </footer>