@treely/strapi-slices 3.0.0 → 3.1.0

package/package.json

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

package/src/components/SliceRenderer/SliceRenderer.tsx

@@ -195,6 +195,7 @@ export const SliceRenderer = ({
           return (
             <ProjectsGrid
               key={`${slice.__component}-${slice.id}`}
+              slice={slice}
               projects={projects}
             />
           );

package/src/constants/sectionsConfig.ts

@@ -15,6 +15,7 @@ export const SECTIONS_WITH_BLOG_POSTS = [
 ];
 export const SECTIONS_WITH_CUSTOMER_STORIES = ['sections.customer-stories'];
 export const SECTIONS_WITH_PROJECTS = [
+  'sections.projects-grid',
   'sections.projects-map',
   'sections.project-facts',
 ];

package/src/slices/ProjectsGrid/ProjectsGrid.test.tsx

@@ -5,8 +5,12 @@ import { ProjectsGridProps } from './ProjectsGrid';
 import fpmProjectMock from '../../test/integrationMocks/fpmProjectMock';
 import { strapiMediaMock } from '../../test/strapiMocks/strapiMedia';
 import CreditsAvailableState from '../../models/CreditsAvailableState';
+import { strapiProjectMock } from '../../test/strapiMocks/strapiProject';
 
 const defaultProps: ProjectsGridProps = {
+  slice: {
+    projects: { data: [strapiProjectMock] },
+  },
   projects: [
     {
       ...fpmProjectMock,

package/src/slices/ProjectsGrid/ProjectsGrid.tsx

@@ -4,8 +4,12 @@ import Link from 'next/link';
 import { MEDIUM_TRANSITION_DURATION } from '../../constants/animations';
 import PortfolioProject from '../../models/PortfolioProject';
 import PortfolioProjectCard from '../../components/portfolio/PortfolioProjectCard';
+import { IStrapi, IStrapiData, StrapiProject } from '../..';
 
 export interface ProjectsGridProps {
+  slice: {
+    projects: IStrapi<IStrapiData<StrapiProject>[]>;
+  };
   projects: PortfolioProject[];
 }
 
@@ -21,9 +25,15 @@ const ConditionalWrapper = ({
 
 export const ProjectsGrid: React.FC<ProjectsGridProps> = ({
   projects,
+  slice,
 }: ProjectsGridProps) => {
   const filteredProjects = projects.filter(
-    (p) => p.thumbnail && p.slug && p.isPublic
+    (fpmProject) =>
+      fpmProject.thumbnail &&
+      slice.projects.data.some(
+        (strapiProject) =>
+          strapiProject.attributes.fpmProjectId === fpmProject.id
+      )
   );
 
   return (