[DEV-3238] Update frontend in order for it to work with Strapi 5

.changeset/great-tools-rescue.md

@@ -0,0 +1,5 @@
+---
+"nextjs-website": major
+---
+
+Update front-end to work with Strapi 5

.changeset/mighty-kings-obey.md

@@ -0,0 +1,5 @@
+---
+"nextjs-website": major
+---
+
+Update populates and makes in order to fetch from strapi 5 (with v4 header)

apps/nextjs-website/src/__tests__/helpers/webinars.helpers.test.ts

@@ -22,7 +22,7 @@ const testWebinar: Webinar = {
     },
     {
       type: 'image',
-      image: mediaRasterJson.data.attributes,
+      image: mediaRasterJson.data,
       children: [
         {
           type: 'text',

apps/nextjs-website/src/components/molecules/DesktopFilterSelector/DesktopFilterSelector.tsx

@@ -8,11 +8,7 @@ type DesktopFilterSelectorProps = {
   setSelectedFilter: (selectedFilter: number) => void;
   selectorFilters: readonly {
     name: string;
-    icon: {
-      data: {
-        attributes: Media;
-      };
-    };
+    icon: Media;
   }[];
 };
 
@@ -47,7 +43,7 @@ const DesktopFilterSelector = ({
           }}
           isSelected={index === selectedFilter}
           label={category.name}
-          icon={category.icon.data.attributes}
+          icon={category.icon}
         ></FilterButton>
       ))}
     </Stack>

apps/nextjs-website/src/components/molecules/MobileFilterSelector/MobileFilterSelector.tsx

@@ -21,11 +21,7 @@ type MobileFilterSelectorProps = {
   setSelectedFilter: (selectedFilter: number) => void;
   selectorFilters: readonly {
     name: string;
-    icon: {
-      data: {
-        attributes: Media;
-      };
-    };
+    icon: Media;
   }[];
 };
 
@@ -96,7 +92,7 @@ const MobileFilterSelector = ({
               }}
               isHeader={true}
               label={selectorFilters[selectedFilter].name}
-              icon={selectorFilters[selectedFilter].icon.data.attributes}
+              icon={selectorFilters[selectedFilter].icon}
             />
           )}
         </AccordionSummary>
@@ -115,7 +111,7 @@ const MobileFilterSelector = ({
                   return;
                 }}
                 label={category.name}
-                icon={category.icon.data.attributes}
+                icon={category.icon}
                 isLast={index == selectorFilters.length - 1}
               />
             ))}

apps/nextjs-website/src/components/organisms/FilteredGridLayout/FilteredGridLayout.tsx

@@ -36,19 +36,15 @@ export const FilteredGridLayout = ({
     {
       name: t('overview.all'),
       icon: {
-        data: {
-          attributes: {
-            name: 'all.svg',
-            alternativeText: '',
-            caption: '',
-            width: 32,
-            height: 32,
-            size: 32,
-            ext: '.svg',
-            mime: 'image/svg',
-            url: '/icons/all.svg',
-          },
-        },
+        name: 'all.svg',
+        alternativeText: '',
+        caption: '',
+        width: 32,
+        height: 32,
+        size: 32,
+        ext: '.svg',
+        mime: 'image/svg',
+        url: '/icons/all.svg',
       },
     },
     ...tags,

apps/nextjs-website/src/components/templates/ApiDataListTemplate/ApiDataListTemplate.tsx

@@ -8,9 +8,9 @@ import BannerLinks from '@/components/molecules/BannerLinks/BannerLinks';
 import { useTranslations } from 'next-intl';
 import { SEO } from '@/lib/types/seo';
 import { Product } from '@/lib/types/product';
-import { StrapiBaseApiDataList } from '@/lib/strapi/types/apiDataList';
 import { Tag } from '@/lib/types/tag';
 import { CardProps } from '@/components/molecules/CardsGrid/CardsGrid';
+import { StrapiApiDataList } from '@/lib/strapi/types/apiDataList';
 
 export type ApiDataListPageTemplateProps = {
   readonly hero: {
@@ -29,7 +29,7 @@ export type ApiDataListPageTemplateProps = {
   readonly updatedAt: string;
   readonly bannerLinks: BannerLinkProps[];
   readonly theme?: Theme;
-  readonly apiData: StrapiBaseApiDataList;
+  readonly apiData: StrapiApiDataList;
   readonly seo?: SEO;
 };
 

apps/nextjs-website/src/helpers/generateStructuredDataScripts.helpers.tsx

@@ -20,7 +20,7 @@ export function generateStructuredDataScripts(props: {
     name: seo?.metaTitle,
     description: seo?.metaDescription,
     url: seo?.canonicalURL,
-    media: seo?.metaImage?.data?.attributes,
+    media: seo?.metaImage,
   };
   const allThings: Thing[] = [
     makeBreadcrumbList(allBreadcrumbsItems) as Thing,

apps/nextjs-website/src/helpers/metadata.helpers.ts

@@ -72,7 +72,7 @@ export const makeMetadataFromStrapi = (seo: SEO): Metadata => {
     title: seo.metaTitle,
     description: seo.metaDescription,
     url: seo.canonicalURL,
-    image: seo.metaImage?.data?.attributes?.url,
+    image: seo.metaImage?.url,
   });
 
   const metadata: Metadata = {

apps/nextjs-website/src/helpers/structuredData.helpers.ts

@@ -166,8 +166,7 @@ export function quickStartToStructuredDataHowTo(
     name: quickStart.seo?.metaTitle,
     description: quickStart.abstract?.description,
     image:
-      quickStart.seo?.metaImage?.data?.attributes &&
-      mediaToImageObject(quickStart.seo.metaImage.data.attributes),
+      quickStart.seo?.metaImage && mediaToImageObject(quickStart.seo.metaImage),
     step: steps,
   });
 }
@@ -255,9 +254,7 @@ export function convertSeoToStructuredDataArticle(
         url: seo?.canonicalURL,
         author: organization,
         about: seo?.keywords,
-        image:
-          seo?.metaImage?.data?.attributes &&
-          mediaToImageObject(seo.metaImage.data.attributes),
+        image: seo?.metaImage && mediaToImageObject(seo.metaImage),
       }),
     }
   );

apps/nextjs-website/src/lib/cmsApi.ts

@@ -101,11 +101,11 @@ export const getTagsProps = async () => {
 export const getTutorialsProps = async () => {
   const strapiTutorials = await fetchTutorials(buildEnv);
   const tutorialsWithMarkdown = strapiTutorials.data.filter((tutorial) => {
-    const parts = tutorial?.attributes?.parts ?? [];
+    const parts = tutorial?.parts ?? [];
     return parts.some((part) => part?.__component === 'parts.markdown');
   });
   const allMarkdownParts = tutorialsWithMarkdown.flatMap((tutorial) =>
-    (tutorial?.attributes?.parts ?? []).filter(
+    (tutorial?.parts ?? []).filter(
       (part) => part?.__component === 'parts.markdown'
     )
   );
@@ -132,8 +132,7 @@ export const getQuickStartGuidesProps = async () => {
 
 export const getUrlReplaceMapProps = async () => {
   const strapiUrlReplaceMap = await fetchUrlReplaceMap(buildEnv);
-  const processed = makeUrlReplaceMap(strapiUrlReplaceMap);
-  return processed;
+  return makeUrlReplaceMap(strapiUrlReplaceMap);
 };
 
 export const getApiDataListPagesProps = async () => {
@@ -249,7 +248,7 @@ export const getReleaseNoteProps = async (
 export const getUseCasesProps = async () => {
   const strapiUseCases = await fetchUseCases(buildEnv);
   const allMarkdownParts = strapiUseCases.data.flatMap((useCase) =>
-    (useCase?.attributes?.parts ?? []).filter(isMarkDownPart)
+    (useCase?.parts ?? []).filter(isMarkDownPart)
   );
   const contentPromises = allMarkdownParts.map(async (part) => {
     const { dirName, pathToFile } = part;