Convert portfolio blueprint to work with ACF (#118) (#119)

* MERL-894: Convert portfolio blueprint to work with ACF (#118) * chore: regenerate possibleTypes.json * chore: update Projects * chore: update Testimonials * chore: add atlas-blueprint-portfolio.zip * use optional chaining and empty array fallback. props @josephfusco
wpengine · Sep 7, 2023 · ceca19e · ceca19e · headless-platform-by-wp-engine · Sep 7, 2023
1 parent c1a7335
commit ceca19e
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 20 deletions.
diff --git a/atlas-blueprint-portfolio.zip b/atlas-blueprint-portfolio.zip
diff --git a/components/Projects/Projects.js b/components/Projects/Projects.js
@@ -24,7 +24,7 @@ function Projects({ projects, id, emptyText = 'No projects found.' }) {
   return (
     // eslint-disable-next-line react/jsx-props-no-spreading
     <section {...(id && { id })}>
-      {projects?.map((project, i) => {
+      {projects.map((project, i) => {
         const isFirstNewResult = i === firstNewResultIndex;
 
         return (
@@ -43,11 +43,11 @@ function Projects({ projects, id, emptyText = 'No projects found.' }) {
                 <Heading level="h3">
                   <Link href={project?.uri ?? '#'}>
                     <a ref={isFirstNewResult ? firstNewResultRef : null}>
-                      {project.title}
+                      {project.projectFields.title}
                     </a>
                   </Link>
                 </Heading>
-                <div>{project.summary}</div>
+                <div>{project.projectFields.summary}</div>
               </div>
             </div>
           </div>
@@ -62,9 +62,12 @@ Projects.fragments = {
   entry: gql`
     fragment ProjectsFragment on Project {
       id
-      title
-      summary
       uri
+      projectFields {
+        title: projectTitle
+        summary
+        contentArea
+      }
       ...FeaturedImageFragment
     }
   `,

diff --git a/components/Testimonials/Testimonials.js b/components/Testimonials/Testimonials.js
@@ -46,13 +46,13 @@ export default function Testimonials({ testimonials }) {
         >
           {testimonials.map((testimonial, index) => (
             <TestimonialItem
-              author={testimonial?.testimonialAuthor}
+              author={testimonial?.testimonialFields?.testimonialAuthor}
               key={index}
             >
               <div
                 className={cx('slide-content')}
                 dangerouslySetInnerHTML={{
-                  __html: testimonial?.testimonialContent,
+                  __html: testimonial?.testimonialFields?.testimonialContent,
                 }}
               />
             </TestimonialItem>
@@ -66,8 +66,10 @@ export default function Testimonials({ testimonials }) {
 Testimonials.fragments = {
   entry: gql`
     fragment TestimonialsFragment on Testimonial {
-      testimonialContent
-      testimonialAuthor
+      testimonialFields {
+        testimonialContent
+        testimonialAuthor
+      }
     }
   `,
 };
diff --git a/pages/projects/index.js b/pages/projects/index.js
@@ -30,8 +30,7 @@ export default function Page() {
   const { title: siteTitle } = data?.generalSettings;
   const primaryMenu = data?.headerMenuItems?.nodes ?? [];
   const footerMenu = data?.footerMenuItems?.nodes ?? [];
-  const projectList = data.projects.edges.map((el) => el.node);
-
+  const projectList = data?.projects?.nodes ?? [];
   return (
     <>
       <SEO title={pageTitle(data?.generalSettings, 'Projects')} />
@@ -69,10 +68,8 @@ Page.query = gql`
     $footerLocation: MenuLocationEnum
   ) {
     projects(first: $first, after: $after) {
-      edges {
-        node {
-          ...ProjectsFragment
-        }
+      nodes {
+        ...ProjectsFragment
       }
       pageInfo {
         hasNextPage

diff --git a/possibleTypes.json b/possibleTypes.json
diff --git a/wp-templates/project.js b/wp-templates/project.js
@@ -22,7 +22,8 @@ export default function Component(props) {
   const { title: siteTitle } = props?.data?.generalSettings;
   const primaryMenu = props?.data?.headerMenuItems?.nodes ?? [];
   const footerMenu = props?.data?.footerMenuItems?.nodes ?? [];
-  const { title, summary, featuredImage, contentArea } = props.data.project;
+  const { featuredImage } = props.data.project;
+  const { title, summary, contentArea } = props.data.project.projectFields;
   return (
     <>
       <SEO
@@ -60,9 +61,11 @@ Component.query = gql`
     $asPreview: Boolean = false
   ) {
     project(id: $databaseId, idType: DATABASE_ID, asPreview: $asPreview) {
-      title: projectTitle
-      summary
-      contentArea
+      projectFields {
+        title: projectTitle
+        summary
+        contentArea
+      }
       ...FeaturedImageFragment
     }
     generalSettings {