Accomodate to Strapi v5 changes

Teknologforeningen · Dec 8, 2024 · 07dce14 · 07dce14
1 parent 2ad7567
commit 07dce14
Show file tree

Hide file tree

Showing 22 changed files with 125 additions and 169 deletions.
diff --git a/app/[category]/[contentPage]/page.tsx b/app/[category]/[contentPage]/page.tsx
@@ -9,7 +9,7 @@ export const generateStaticParams = async () => {
   return contentPages
     .filter((category) => category)
     .map((contentPage) => ({
-      category: contentPage.category?.data?.attributes?.slug,
+      category: contentPage.category?.slug,
       contentPage: contentPage.slug,
     }))
 }

diff --git a/app/api/revalidate/route.ts b/app/api/revalidate/route.ts
@@ -7,16 +7,20 @@ import type { NextRequest } from 'next/server'
 import { NextResponse } from 'next/server'
 import { revalidatePath, revalidateTag } from 'next/cache'
 
-const API_KEY = process.env.API_KEY
+const apiKeyBuf = Buffer.from(process.env.API_KEY ?? '')
 
 export async function POST(request: NextRequest) {
   const bearer = request.headers
     .get('authorization')
     ?.split('Bearer:')[1]
     ?.trim()
+  const bearerBuf = Buffer.from(bearer ?? '')
+
   if (
-    bearer &&
-    API_KEY &&
+    bearerBuf.length > 0 &&
+    apiKeyBuf.length > 0 &&
+    apiKeyBuf.length === bearerBuf.length && // timingSafeEqual throws if the lengths aren't the same.
+    // @ts-expect-error the types are wrong on this function: a `Buffer` is accepted.
     crypto.timingSafeEqual(Buffer.from(bearer), Buffer.from(API_KEY))
   ) {
     return NextResponse.json({ error: 'Invalid token' }, { status: 401 })
@@ -55,19 +59,19 @@ export async function POST(request: NextRequest) {
         case 'content-section': {
           const page = body?.entry?.content_page?.slug
           const pageData = await fetchContentPage(page)
-          const category = pageData?.category?.data?.attributes?.slug
+          const category = pageData?.category?.slug
           revalidatePath(`/${category}/${page}`)
           break
         }
         case 'file-folder': {
           const section = await fetchSection(body?.entry?.content_section?.id)
 
-          const pageData = section?.attributes?.content_page?.data as
+          const pageData = section?.content_page as
             | SingleResponse<PageType>
             | undefined
 
-          const page = pageData?.attributes.slug
-          const category = pageData?.attributes.category?.data?.attributes?.slug
+          const page = pageData?.slug
+          const category = pageData?.category?.slug
           revalidatePath(`/${category}/${page}`)
           break
         }

diff --git a/app/page.tsx b/app/page.tsx
@@ -3,15 +3,14 @@ import Column from '@components/Column'
 import Item from '@components/Item'
 import Calendar from '@components/calendar/Calendar'
 import { PostType } from '@models/post'
-import MainBanner, { BannerImage } from '@components/banner/Banner'
+import MainBanner from '@components/banner/Banner'
 import TFInfo from '@components/TFInfo'
 import Posts from '@components/posts'
+import { StrapiImage } from '@models/image'
 
 export type Homepage = {
   banner?: {
-    bannerImages?: {
-      data: BannerImage[]
-    }
+    bannerImages?: StrapiImage[]
   }
 }
 

diff --git a/components/Banner.tsx b/components/Banner.tsx
diff --git a/components/Page.tsx b/components/Page.tsx
@@ -31,14 +31,14 @@ const Page = async ({ page, isPrivate = false }: PageProps) => {
         />
       )}
       {page?.showTableOfContents && (
-        <TableOfContents sections={page.sections.data} />
+        <TableOfContents sections={page.sections} />
       )}
-      {page?.sections?.data.map((section, i) => (
+      {page?.sections?.map((section, i) => (
         <PageSection
           key={i}
-          title={section.attributes.title}
-          content={section.attributes.content}
-          fileFolders={section.attributes.file_folders.data}
+          title={section.title}
+          content={section.content}
+          fileFolders={section.file_folders}
           isPrivate={isPrivate}
         />
       ))}

diff --git a/components/PageSection.tsx b/components/PageSection.tsx
@@ -28,11 +28,11 @@ const PageSection = ({
         __html: marked.parse(content ?? ''),
       }}
     />
-    {fileFolders.map(({ attributes }) => (
-      <div key={attributes.title}>
-        <h3>{attributes.title}</h3>
-        <p>{attributes.description}</p>
-        <DriveExplorer folderId={attributes.folderId} isPrivate={isPrivate} />
+    {fileFolders.map(({ title, description, folderId }) => (
+      <div key={title}>
+        <h3>{title}</h3>
+        <p>{description}</p>
+        <DriveExplorer folderId={folderId} isPrivate={isPrivate} />
       </div>
     ))}
   </div>

diff --git a/components/TableOfContents.tsx b/components/TableOfContents.tsx
@@ -8,13 +8,13 @@ const TableOfContents = ({ sections }: { sections: Section[] }) => {
       <h2>Innehållsförteckning</h2>
       {sections.map(
         (section) =>
-          section.attributes.title && (
+          section.title && (
             <Link
-              key={section.attributes.title}
+              key={section.title}
               className="no-underline hover:underline"
-              href={`#${titleToAnchor(section.attributes.title)}`}
+              href={`#${titleToAnchor(section.title)}`}
             >
-              {section.attributes.title}
+              {section.title}
             </Link>
           )
       )}

diff --git a/components/banner/Banner.tsx b/components/banner/Banner.tsx
@@ -1,17 +1,12 @@
 import React from 'react'
-import { StrapiImage } from '@models/image'
 import { fetchHomepage } from '@lib/strapi/homepage'
 import { Carousel, SingleBannerImage } from '@components/banner/BannerImages'
 import InfoBlock from '@components/banner/InfoBlock'
 import Column from '@components/Column'
 
-export type BannerImage = StrapiImage['data']
-
 const MainBanner = async () => {
   const homepage = await fetchHomepage()
-  const urls = homepage?.banner?.bannerImages?.data?.map(
-    (img) => img.attributes.url
-  )
+  const urls = homepage?.banner?.bannerImages?.map((img) => img.url)
   return (
     <>
       <div className="relative h-[500px] w-full overflow-x-hidden bg-black">

diff --git a/components/footer/Logos.tsx b/components/footer/Logos.tsx
@@ -18,7 +18,7 @@ const NationImage = ({ logo }: NationImageProps) => (
   <div className="relative h-[50px] w-[100px]">
     <Link href={logo.url} passHref>
       <Image
-        src={`${process.env.NEXT_PUBLIC_BASE_URL}${logo.image.data.attributes.url}`}
+        src={`${process.env.NEXT_PUBLIC_BASE_URL}${logo.image.url}`}
         alt={logo.name}
         className="object-contain"
         fill

diff --git a/components/header/navbar/searchpage/index.tsx b/components/header/navbar/searchpage/index.tsx
@@ -239,49 +239,49 @@ const SearchOverlay = ({
             <>
               {results.pageData.map((page) => (
                 <ListCard
-                  key={page.attributes.title}
-                  title={page.attributes.title}
+                  key={page.title}
+                  title={page.title}
                   setSideMenuOpen={setSideMenuOpen}
-                  path={`/${page.attributes.category?.data.attributes.slug}/${page.attributes.slug}`}
+                  path={`/${page.category?.slug}/${page.slug}`}
                   onClick={onClose}
-                  content={page.attributes.content}
+                  content={page.content}
                 />
               ))}
               {results.sectionData.map(
                 (section) =>
-                  section.attributes?.title &&
-                  section.attributes?.content_page?.data && (
+                  section.title &&
+                  section.content_page && (
                     <ListCard
-                      key={section.id}
-                      title={section.attributes.title}
+                      key={section.documentId}
+                      title={section.title}
                       setSideMenuOpen={setSideMenuOpen}
                       onClick={onClose}
-                      path={`/${section.attributes.content_page?.data?.attributes.category?.data.attributes.slug}/${section.attributes.content_page?.data.attributes.slug}#${titleToAnchor(section.attributes.title ?? '')}`}
-                      content={section.attributes.content}
+                      path={`/${section.content_page?.category?.slug}/${section.content_page?.slug}#${titleToAnchor(section.title ?? '')}`}
+                      content={section.content}
                     />
                   )
               )}
               {results.privatePageData.map((page) => (
                 <ListCard
-                  key={page.attributes.title}
-                  title={page.attributes.title}
+                  key={page.title}
+                  title={page.title}
                   setSideMenuOpen={setSideMenuOpen}
-                  path={`/medlem/${page.attributes.slug}`}
+                  path={`/medlem/${page.slug}`}
                   onClick={onClose}
-                  content={page.attributes.content}
+                  content={page.content}
                 />
               ))}
               {results.privateSectionData.map(
                 (section) =>
-                  section.attributes.title &&
-                  section.attributes?.private_page?.data && (
+                  section.title &&
+                  section.private_page && (
                     <ListCard
-                      key={section.id}
-                      title={section.attributes.title}
+                      key={section.documentId}
+                      title={section.title}
                       setSideMenuOpen={setSideMenuOpen}
                       onClick={onClose}
-                      path={`/medlem/${section.attributes.private_page?.data.attributes.slug}#${titleToAnchor(section.attributes.title ?? '')}`}
-                      content={section.attributes.content}
+                      path={`/medlem/${section.private_page?.slug}#${titleToAnchor(section.title ?? '')}`}
+                      content={section.content}
                     />
                   )
               )}

diff --git a/lib/strapi/category.ts b/lib/strapi/category.ts
@@ -4,10 +4,10 @@ import { fetchCollection, fetchCollectionSingle } from '@lib/strapi/index'
 export async function fetchCategory(slug?: string): Promise<Category | null> {
   if (slug === undefined) return null
   const res = await fetchCollectionSingle<Category>('/categories', slug)
-  return res?.data?.attributes ?? null
+  return res?.data ?? null
 }
 
 export async function fetchCategories(): Promise<Category[]> {
   const res = await fetchCollection<Category>('/categories')
-  return res?.data?.map((e) => e.attributes) ?? []
+  return res?.data ?? []
 }
diff --git a/lib/strapi/contentSection.ts b/lib/strapi/contentSection.ts
@@ -3,11 +3,7 @@ import { PageType, Section } from '@models/page'
 import { fetchSingle } from '@lib/strapi/index'
 
 type PopulatedSection = Section & {
-  attributes: {
-    content_page: {
-      data: PageType
-    }
-  }
+  content_page: PageType
 }
 
 export async function fetchSection(
@@ -21,14 +17,8 @@ export async function fetchSection(
     },
   })
 
-  const res = await fetchSingle<Section>(`/content-sections/${id}`, {
+  const res = await fetchSingle<PopulatedSection>(`/content-sections/${id}`, {
     query,
   })
-  if (!res?.data?.id || !res?.data?.attributes) return null
-  return (
-    ({
-      id: res.data.id,
-      attributes: res.data.attributes,
-    } as unknown as PopulatedSection) ?? null
-  )
+  return !res?.data?.documentId || !res?.data ? null : res.data
 }
diff --git a/lib/strapi/contentpage.ts b/lib/strapi/contentpage.ts
@@ -9,34 +9,33 @@ export async function fetchContentPage(
   const query = qs.stringify({
     populate: {
       sections: {
-        populate: ['title', 'content', 'file_folders'],
+        fields: ['title', 'content'],
+        populate: ['file_folders'],
       },
       category: {
-        populate: ['slug'],
+        fields: ['slug'],
       },
     },
   })
 
   const res = await fetchCollectionSingle<PageType>('/content-pages', slug, {
     query,
   })
-  return res?.data?.attributes ?? null
+  return res?.data ?? null
 }
 
 export async function fetchContentPages(): Promise<PageType[]> {
   const query = qs.stringify(
     {
       populate: {
         category: {
-          populate: ['slug'],
+          fields: ['slug'],
         },
       },
     },
     { encodeValuesOnly: true }
   )
 
-  const res = await fetchCollection<PageType>('/content-pages', {
-    query,
-  })
-  return res?.data?.map((c) => c.attributes) ?? []
+  const res = await fetchCollection<PageType>('/content-pages', { query })
+  return res?.data ?? []
 }
diff --git a/lib/strapi/footer.ts b/lib/strapi/footer.ts
@@ -13,5 +13,5 @@ export async function fetchFooter(): Promise<FooterType | null> {
     query,
     tags: ['footer'],
   })
-  return res?.data?.attributes ?? null
+  return res?.data ?? null
 }
diff --git a/lib/strapi/homepage.ts b/lib/strapi/homepage.ts
@@ -10,5 +10,5 @@ export async function fetchHomepage(): Promise<Homepage | null> {
     { encodeValuesOnly: true }
   )
   const res = await fetchSingle<Homepage>('/homepage', { query })
-  return res?.data?.attributes ?? null
+  return res?.data ?? null
 }
diff --git a/lib/strapi/index.ts b/lib/strapi/index.ts
@@ -11,10 +11,7 @@ export type StrapiFetchOptions = {
   tags?: string[]
 }
 
-export type SingleResponse<T> = {
-  id: number
-  attributes: Omit<T, 'id'>
-}
+export type SingleResponse<T> = { documentId: string } & T
 
 export type CollectionResponse<T> = SingleResponse<T>[]