@treely/strapi-slices 3.2.0 → 3.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@treely/strapi-slices",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "license": "MIT",
   "author": "Tree.ly GmbH",
   "description": "@treely/strapi-slices is a open source library maintained by Tree.ly.",

package/src/slices/TextWithCard/TextWithCard.tsx

@@ -15,7 +15,7 @@ import strapiMediaUrl from '../../utils/strapiMediaUrl';
 import StrapiLink from '../../models/strapi/StrapiLink';
 import StrapiProjectCard from '../../models/strapi/StrapiProjectCard';
 import StrapiLinkButton from '../../components/StrapiLinkButton';
-import { IStrapi, IStrapiData, PortfolioProject, StrapiProject } from '../..';
+import { IStrapiData, PortfolioProject, StrapiProject } from '../..';
 import PortfolioProjectCard from '../../components/portfolio/PortfolioProjectCard';
 
 interface TextWithCardSlice {
@@ -28,7 +28,7 @@ interface TextWithCardSlice {
   }[];
   button?: StrapiLink;
   card?: StrapiProjectCard;
-  project?: IStrapi<IStrapiData<StrapiProject>>;
+  project?: { data?: IStrapiData<StrapiProject> };
   cardPosition: 'left' | 'right';
 }
 export interface TextWithCardProps {
@@ -42,8 +42,8 @@ export const TextWithCard: React.FC<TextWithCardProps> = ({
 }: TextWithCardProps) => {
   const portfolioProject = projects.find(
     (p) =>
-      slice.project?.data.attributes.fpmProjectId &&
-      p.id === slice.project?.data.attributes.fpmProjectId
+      slice.project?.data?.attributes.fpmProjectId &&
+      p.id === slice.project.data.attributes.fpmProjectId
   );
 
   const card = (

package/src/utils/mergeGlobalAndStrapiBlogPostData.test.ts

@@ -3,6 +3,7 @@ import { strapiBlogPostMock } from '../test/strapiMocks/strapiBlogPost';
 import minimalGlobalData from '../test/strapiMocks/minimalGlobalData';
 import getStaticPropsContextMock from '../test/mocks/getStaticPropsContext';
 import { strapiMetadataMock } from '../test/strapiMocks/strapiMetadata';
+import portfolioProjectMock from '../test/integrationMocks/portfolioProjectMock';
 
 describe('The mergeGlobalAndStrapiBlogPostData util', () => {
   it('returns the global metadata if there is no page metadata', () => {
@@ -151,4 +152,50 @@ describe('The mergeGlobalAndStrapiBlogPostData util', () => {
       { id: Infinity, title: 'Title', links: [] },
     ]);
   });
+
+  it('returns the blog posts if the page includes slices which need blog posts', () => {
+    const result = mergeGlobalAndStrapiBlogPostData(
+      getStaticPropsContextMock,
+      minimalGlobalData,
+      {
+        ...strapiBlogPostMock,
+        attributes: {
+          ...strapiBlogPostMock.attributes,
+          slices: [
+            {
+              __component: 'sections.blog',
+            },
+          ],
+        },
+      },
+      [strapiBlogPostMock],
+      []
+    );
+
+    expect(result.blogPosts).toStrictEqual([strapiBlogPostMock]);
+    expect(result.projects).toStrictEqual([]);
+  });
+
+  it('returns the projects if the page includes slices which need projects', () => {
+    const result = mergeGlobalAndStrapiBlogPostData(
+      getStaticPropsContextMock,
+      minimalGlobalData,
+      {
+        ...strapiBlogPostMock,
+        attributes: {
+          ...strapiBlogPostMock.attributes,
+          slices: [
+            {
+              __component: 'sections.projects-grid',
+            },
+          ],
+        },
+      },
+      [],
+      [portfolioProjectMock]
+    );
+
+    expect(result.blogPosts).toStrictEqual([]);
+    expect(result.projects).toStrictEqual([portfolioProjectMock]);
+  });
 });

package/src/utils/mergeGlobalAndStrapiBlogPostData.ts

@@ -2,6 +2,8 @@ import { GetStaticPropsContext } from 'next';
 import strapiMediaUrl from './strapiMediaUrl';
 import {
   IStrapiData,
+  SECTIONS_WITH_BLOG_POSTS,
+  SECTIONS_WITH_PROJECTS,
   StrapiBlogPost,
   StrapiBlogPostProps,
   StrapiGlobal,
@@ -24,10 +26,17 @@ const mergeGlobalAndStrapiBlogPostData = (
       )
     : DEFAULT_SHARE_IMAGE;
 
+  const returnBlog = post.attributes.slices.some((slice) =>
+    SECTIONS_WITH_BLOG_POSTS.includes(slice.__component)
+  );
+  const returnProjects = post.attributes.slices.some((slice) =>
+    SECTIONS_WITH_PROJECTS.includes(slice.__component)
+  );
+
   return {
     ...post,
     // Portfolio Projects
-    projects,
+    projects: returnProjects ? projects : [],
     // StrapiBlogPost
     attributes: {
       ...post?.attributes,
@@ -58,7 +67,7 @@ const mergeGlobalAndStrapiBlogPostData = (
       favicon: strapiMediaUrl(global.attributes.favicon, 'thumbnail'),
     },
     slices: post?.attributes.slices,
-    blogPosts: blog,
+    blogPosts: returnBlog ? blog : [],
     banner: global.attributes.banner,
     topBanner: post?.attributes.topBanner || global.attributes.topBanner,
     customerStories: [],

package/src/utils/mergeGlobalAndStrapiCustomerStoryData.test.ts

@@ -146,4 +146,25 @@ describe('The mergeGlobalAndStrapiCustomerStoryData util', () => {
       { id: Infinity, title: 'Title', links: [] },
     ]);
   });
+
+  it('returns the customer stories if the page includes slices which need customer stories', () => {
+    const result = mergeGlobalAndStrapiCustomerStoryData(
+      getStaticPropsContextMock,
+      minimalGlobalData,
+      {
+        ...strapiCustomerStoryMock,
+        attributes: {
+          ...strapiCustomerStoryMock.attributes,
+          slices: [
+            {
+              __component: 'sections.customer-stories',
+            },
+          ],
+        },
+      },
+      [strapiCustomerStoryMock]
+    );
+
+    expect(result.customerStories).toStrictEqual([strapiCustomerStoryMock]);
+  });
 });

package/src/utils/mergeGlobalAndStrapiCustomerStoryData.ts

@@ -2,6 +2,7 @@ import { GetStaticPropsContext } from 'next';
 import strapiMediaUrl from './strapiMediaUrl';
 import {
   IStrapiData,
+  SECTIONS_WITH_CUSTOMER_STORIES,
   StrapiCustomerStory,
   StrapiCustomerStoryProps,
   StrapiGlobal,
@@ -22,6 +23,10 @@ const mergeGlobalAndStrapiCustomerStoryData = (
       )
     : DEFAULT_SHARE_IMAGE;
 
+  const returnCustomerStories = customerStory.attributes.slices.some((slice) =>
+    SECTIONS_WITH_CUSTOMER_STORIES.includes(slice.__component)
+  );
+
   return {
     ...customerStory,
     // Portfolio Projects
@@ -57,7 +62,7 @@ const mergeGlobalAndStrapiCustomerStoryData = (
       favicon: strapiMediaUrl(global.attributes.favicon, 'thumbnail'),
     },
     slices: customerStory?.attributes.slices,
-    customerStories,
+    customerStories: returnCustomerStories ? customerStories : [],
     banner: global.attributes.banner,
     topBanner:
       customerStory?.attributes.topBanner || global.attributes.topBanner,

package/src/utils/mergeGlobalAndStrapiPageData.test.ts

@@ -3,6 +3,9 @@ import mergeGlobalAndStrapiPageData from './mergeGlobalAndStrapiPageData';
 import { strapiPageMock } from '../test/strapiMocks/strapiPage';
 import getStaticPropsContextMock from '../test/mocks/getStaticPropsContext';
 import { strapiMetadataMock } from '../test/strapiMocks/strapiMetadata';
+import { strapiBlogPostMock } from '../test/strapiMocks/strapiBlogPost';
+import { strapiCustomerStoryMock } from '../test/strapiMocks/strapiCustomerStory';
+import portfolioProjectMock from '../test/integrationMocks/portfolioProjectMock';
 
 describe('The mergeGlobalAndStrapiPageData util', () => {
   it('returns the global metadata if there is no page metadata', () => {
@@ -251,4 +254,67 @@ describe('The mergeGlobalAndStrapiPageData util', () => {
       { id: Infinity, title: 'Text', links: [] },
     ]);
   });
+
+  it('returns the blog posts if the page includes slices which need blog posts', () => {
+    const result = mergeGlobalAndStrapiPageData(
+      getStaticPropsContextMock,
+      minimalGlobalData,
+      {
+        ...strapiPageMock,
+        attributes: {
+          ...strapiPageMock.attributes,
+          slices: [{ __component: 'sections.blog-cards' }],
+        },
+      },
+      [strapiBlogPostMock],
+      [],
+      []
+    );
+
+    expect(result.blogPosts).toStrictEqual([strapiBlogPostMock]);
+    expect(result.customerStories).toStrictEqual([]);
+    expect(result.projects).toStrictEqual([]);
+  });
+
+  it('returns the customer stories if the page includes slices which need customer stories', () => {
+    const result = mergeGlobalAndStrapiPageData(
+      getStaticPropsContextMock,
+      minimalGlobalData,
+      {
+        ...strapiPageMock,
+        attributes: {
+          ...strapiPageMock.attributes,
+          slices: [{ __component: 'sections.customer-stories' }],
+        },
+      },
+      [],
+      [strapiCustomerStoryMock],
+      []
+    );
+
+    expect(result.customerStories).toStrictEqual([strapiCustomerStoryMock]);
+    expect(result.blogPosts).toStrictEqual([]);
+    expect(result.projects).toStrictEqual([]);
+  });
+
+  it('returns the projects if the page includes slices which need projects', () => {
+    const result = mergeGlobalAndStrapiPageData(
+      getStaticPropsContextMock,
+      minimalGlobalData,
+      {
+        ...strapiPageMock,
+        attributes: {
+          ...strapiPageMock.attributes,
+          slices: [{ __component: 'sections.projects-grid' }],
+        },
+      },
+      [],
+      [],
+      [portfolioProjectMock]
+    );
+
+    expect(result.projects).toStrictEqual([portfolioProjectMock]);
+    expect(result.blogPosts).toStrictEqual([]);
+    expect(result.customerStories).toStrictEqual([]);
+  });
 });

package/src/utils/mergeGlobalAndStrapiPageData.ts

@@ -12,6 +12,9 @@ import PortfolioProject from '../models/PortfolioProject';
 import {
   DARK_THEME_HEADER_SECTIONS,
   EXTENDABLE_HEADER_SECTIONS,
+  SECTIONS_WITH_BLOG_POSTS,
+  SECTIONS_WITH_CUSTOMER_STORIES,
+  SECTIONS_WITH_PROJECTS,
 } from '../constants/sectionsConfig';
 import { DEFAULT_SHARE_ALT, DEFAULT_SHARE_IMAGE } from '../constants/metadata';
 
@@ -31,10 +34,20 @@ const mergeGlobalAndStrapiPageData = (
       )
     : DEFAULT_SHARE_IMAGE;
 
+  const returnBlogPosts = page.attributes.slices.some((slice) =>
+    SECTIONS_WITH_BLOG_POSTS.includes(slice.__component)
+  );
+  const returnCustomerStories = page.attributes.slices.some((slice) =>
+    SECTIONS_WITH_CUSTOMER_STORIES.includes(slice.__component)
+  );
+  const returnProjects = page.attributes.slices.some((slice) =>
+    SECTIONS_WITH_PROJECTS.includes(slice.__component)
+  );
+
   return {
     ...page,
     // Portfolio Projects
-    projects,
+    projects: returnProjects ? projects : [],
     // StrapiPage
     attributes: {
       ...page?.attributes,
@@ -71,10 +84,10 @@ const mergeGlobalAndStrapiPageData = (
       favicon: strapiMediaUrl(global.attributes.favicon, 'thumbnail'),
     },
     slices: page?.attributes.slices,
-    blogPosts,
+    blogPosts: returnBlogPosts ? blogPosts : [],
     banner: global.attributes.banner,
     topBanner: page?.attributes.topBanner || global.attributes.topBanner,
-    customerStories,
+    customerStories: returnCustomerStories ? customerStories : [],
   };
 };
 

package/src/utils/mergeGlobalAndStrapiProjectData.test.ts

@@ -1,5 +1,7 @@
+import portfolioProjectMock from '../test/integrationMocks/portfolioProjectMock';
 import getStaticPropsContextMock from '../test/mocks/getStaticPropsContext';
 import minimalGlobalData from '../test/strapiMocks/minimalGlobalData';
+import { strapiBlogPostMock } from '../test/strapiMocks/strapiBlogPost';
 import { strapiMetadataMock } from '../test/strapiMocks/strapiMetadata';
 import { strapiProjectMock } from '../test/strapiMocks/strapiProject';
 import mergeGlobalAndStrapiProjectData from './mergeGlobalAndStrapiProjectData';
@@ -240,4 +242,42 @@ describe('The mergeGlobalAndStrapiProjectData util', () => {
 
     expect(result.headerType?.extendable).toBe(true);
   });
+
+  it('returns the blog posts if the page includes slices which need blog posts', () => {
+    const result = mergeGlobalAndStrapiProjectData(
+      getStaticPropsContextMock,
+      minimalGlobalData,
+      {
+        ...strapiProjectMock,
+        attributes: {
+          ...strapiProjectMock.attributes,
+          slices: [{ __component: 'sections.blog-cards' }],
+        },
+      },
+      [strapiBlogPostMock],
+      []
+    );
+
+    expect(result.blogPosts).toStrictEqual([strapiBlogPostMock]);
+    expect(result.projects).toStrictEqual([]);
+  });
+
+  it('returns the projects if the page includes slices which need projects', () => {
+    const result = mergeGlobalAndStrapiProjectData(
+      getStaticPropsContextMock,
+      minimalGlobalData,
+      {
+        ...strapiProjectMock,
+        attributes: {
+          ...strapiProjectMock.attributes,
+          slices: [{ __component: 'sections.projects-grid' }],
+        },
+      },
+      [],
+      [portfolioProjectMock]
+    );
+
+    expect(result.blogPosts).toStrictEqual([]);
+    expect(result.projects).toStrictEqual([portfolioProjectMock]);
+  });
 });

package/src/utils/mergeGlobalAndStrapiProjectData.ts

@@ -11,6 +11,8 @@ import PortfolioProject from '../models/PortfolioProject';
 import {
   DARK_THEME_HEADER_SECTIONS,
   EXTENDABLE_HEADER_SECTIONS,
+  SECTIONS_WITH_BLOG_POSTS,
+  SECTIONS_WITH_PROJECTS,
 } from '../constants/sectionsConfig';
 import { DEFAULT_SHARE_ALT, DEFAULT_SHARE_IMAGE } from '../constants/metadata';
 
@@ -29,10 +31,17 @@ const mergeGlobalAndStrapiProject = (
       )
     : DEFAULT_SHARE_IMAGE;
 
+  const returnBlogPosts = project.attributes.slices.some((slice) =>
+    SECTIONS_WITH_BLOG_POSTS.includes(slice.__component)
+  );
+  const returnProjects = project.attributes.slices.some((slice) =>
+    SECTIONS_WITH_PROJECTS.includes(slice.__component)
+  );
+
   return {
     ...project,
     // Portfolio Projects
-    projects,
+    projects: returnProjects ? projects : [],
     // StrapiProject
     attributes: {
       ...project.attributes,
@@ -69,7 +78,7 @@ const mergeGlobalAndStrapiProject = (
       favicon: strapiMediaUrl(global.attributes.favicon, 'thumbnail'),
     },
     slices: project.attributes.slices,
-    blogPosts,
+    blogPosts: returnBlogPosts ? blogPosts : [],
     banner: global.attributes.banner,
     topBanner: project?.attributes.topBanner || global.attributes.topBanner,
     customerStories: [],