Adapt components with API response

app/awtis/[slug]/page.js

@@ -10,13 +10,13 @@ const apiUrl = process.env.NEXT_PUBLIC_API_URL_ROOT || 'http://localhost:1337'
 const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3000'
 
 async function jwennAwtis(slug) {
-  const awtis = await jwennAwtisEpiSlug(slug)
+  const {data} = await jwennAwtisEpiSlug(slug)
 
-  if (!awtis) {
+  if (!data) {
     notFound()
   }
 
-  return awtis
+  return data
 }
 
 export async function generateMetadata(props) {
@@ -24,11 +24,11 @@ export async function generateMetadata(props) {
   const {slug} = params
   const anAwtis = await jwennAwtis(slug)
 
-  const title = `OKI | ${anAwtis.attributes.alias} - Paroles et Traductions`
-  const description = `${anAwtis.attributes.alias}${anAwtis?.attributes?.biographie ? ` : ${anAwtis?.attributes?.biographie.slice(0, 100)}...` : ''}`
+  const title = `OKI | ${anAwtis.alias} - Paroles et Traductions`
+  const description = `${anAwtis.alias}${anAwtis?.biographie ? ` : ${anAwtis?.biographie.slice(0, 100)}...` : ''}`
   const url = `${siteUrl}/awtis/${slug}`
 
-  const {photo} = anAwtis.attributes
+  const {photo} = anAwtis
   const kuvetiFormat = formatKuveti(photo)
 
   return {
@@ -57,7 +57,7 @@ export async function generateMetadata(props) {
       creator: '@OrganisationKA',
       images: {
         url: `${apiUrl}${kuvetiFormat?.url}`,
-        alt: `Photo de ${anAwtis.attributes.alias}`,
+        alt: `Photo de ${anAwtis.alias}`,
       }
     }
   }
@@ -68,14 +68,14 @@ export default async function AwtisPajSlug(props) {
   const {slug} = params
   const anAwtis = await jwennAwtis(slug)
 
-  const {photo} = anAwtis.attributes
+  const {photo} = anAwtis
   const kuvetiFormat = formatKuveti(photo)
 
   const jsonLd = {
     '@context': 'http://schema.org',
     '@type': 'Person',
-    '@id': anAwtis.attributes.musicBrainzUrl || undefined,
-    name: anAwtis.attributes.alias,
+    '@id': anAwtis.musicBrainzUrl || undefined,
+    name: anAwtis.alias,
     url: `${siteUrl}/awtis/${slug}`,
     image: kuvetiFormat?.url ? `${apiUrl}${kuvetiFormat.url}` : undefined
   }
@@ -84,7 +84,7 @@ export default async function AwtisPajSlug(props) {
     <>
       <Box sx={{display: 'flex', flexDirection: 'column', minHeight: '100vh'}}>
         <Box sx={{flexGrow: 1}}>
-          <AwtisDetay anAwtis={anAwtis.attributes} />
+          <AwtisDetay anAwtis={anAwtis} />
         </Box>
         <Footer />
       </Box>

app/awtis/page.js

@@ -48,14 +48,14 @@ async function jwennDone(paj) {
     notFound()
   }
 
-  const awtisPouChakPaj = await jwennAwtisPajinasyon(pajParsed)
-  const pajTotal = Math.ceil(awtisPouChakPaj.meta.pagination.total / awtisPouChakPaj.meta.pagination.limit)
+  const {data, meta} = await jwennAwtisPajinasyon(pajParsed)
+  const pajTotal = Math.ceil(meta.pagination.total / meta.pagination.limit)
 
   if (pajParsed > pajTotal || pajParsed < 1) {
     notFound()
   }
 
-  return {pajTotal, awtisPouChakPaj, pajParsed}
+  return {pajTotal, awtisPouChakPaj: data, pajParsed}
 }
 
 export default async function AwitsPaj(props) {
@@ -69,7 +69,7 @@ export default async function AwitsPaj(props) {
       <ChecheAwtis />
       <Container sx={{marginBottom: 5, flexGrow: 100}}>
         <Grid container spacing={{xs: 2, md: 3}}>
-          {awtisPouChakPaj.data.map(artiste => <AwtisKat key={artiste.id} artiste={artiste.attributes} />)}
+          {awtisPouChakPaj.map(artiste => <AwtisKat key={artiste.id} artiste={artiste} />)}
         </Grid>
       </Container>
       <Footer />

app/paroles/[slug]/page.js

@@ -24,14 +24,14 @@ export async function generateMetadata(props) {
   const params = await props.params;
   const {slug} = params
 
-  const anTeks = await jwennAnTeks(slug)
+  const anTeks = await jwennAnTeks(slug)  
 
-  const awtis = anTeks.attributes.artistes.length === 1 ? anTeks.attributes.artistes[0].data.attributes.alias : getAlias(anTeks.attributes.artistes, anTeks.attributes.prioriteArtistes)
-  const title = `OKI | ${awtis} - ${anTeks.attributes.titre} | Paroles et Traductions`
-  const description = `Paroles de « ${anTeks?.attributes?.titre} » : ${anTeks?.attributes?.transcription.slice(0, 100)}...`
+  const awtis = anTeks?.artistes?.length === 1 ? anTeks?.artistes[0].alias : getAlias(anTeks.artistes, anTeks.prioriteArtistes)
+  const title = `OKI | ${awtis} - ${anTeks.titre} | Paroles et Traductions`
+  const description = `Paroles de « ${anTeks?.titre} » : ${anTeks?.transcription.slice(0, 100)}...`
   const url = `${siteUrl}/paroles/${slug}`
 
-  const {couverture} = anTeks.attributes
+  const {couverture} = anTeks
   const kuvetiFormat = formatKuveti(couverture)
 
   return {
@@ -71,30 +71,29 @@ export default async function AnPawolPaj(props) {
   const {slug} = params
 
   const anTeks = await jwennAnTeks(slug)
-  const {couverture} = anTeks.attributes
-  const teksKuvetiFormat = formatKuveti(couverture)
+  const {couverture} = anTeks
+  const teksKuvetiFormat = formatKuveti(couverture)  
 
   const jsonLd = {
     '@context': 'http://schema.org',
     '@type': 'MusicRecording',
-    '@id': anTeks.attributes.musicBrainzUrl || undefined,
-    name: anTeks.attributes.titre,
+    '@id': anTeks.musicBrainzUrl || undefined,
+    name: anTeks.titre,
     url: `${siteUrl}/paroles/${slug}`,
     image: teksKuvetiFormat?.url ? `${apiUrl}${teksKuvetiFormat?.url}` : undefined,
-    thumbnailUrl: couverture?.data?.attributes?.formats?.thumbnail?.url ? `${apiUrl}${couverture.data.attributes.formats.thumbnail.url}` : undefined,
-    byArtist: anTeks.attributes.artistes.data.map(({attributes}) => {
-      const {photo} = attributes
+    thumbnailUrl: couverture?.formats?.thumbnail?.url ? `${apiUrl}${couverture.formats.thumbnail.url}` : undefined,
+    byArtist: anTeks.artistes.map(({photo, musicBrainzUrl, alias, slug}) => {
       const kuvetiFormat = formatKuveti(photo)
 
       return {
         '@type': 'Person',
-        '@id': attributes.musicBrainzUrl || undefined,
-        name: attributes.alias,
-        url: `${siteUrl}/awtis/${attributes.slug}`,
+        '@id': musicBrainzUrl || undefined,
+        name: alias,
+        url: `${siteUrl}/awtis/${slug}`,
         image: kuvetiFormat?.url ? `${apiUrl}${kuvetiFormat?.url}` : undefined
       }
     }),
-    datePublished: anTeks.attributes?.annee
+    datePublished: anTeks?.annee
   }
 
   return (
@@ -104,7 +103,7 @@ export default async function AnPawolPaj(props) {
           component='main'
           sx={{flexGrow: 1, p: 2, mt: 2}}
         >
-          <AnTeks parole={anTeks.attributes} paroleId={anTeks.id} />
+          <AnTeks parole={anTeks} paroleId={anTeks.id} />
         </Box>
         <Footer />
       </Box>