Adapt components with API response

components/teks/teks-kat.js

@@ -40,11 +40,10 @@ const noImageUrl = 'https://place-hold.it/140x140?text=Indisponible'
 
 export default function TeksKat({parole}) {
   const router = useRouter()
-  const {attributes} = parole
-  const {titre, artistes, annee, couverture, publishedAt, slug} = attributes
+  const {titre, artistes, annee, couverture, publishedAt, slug} = parole
 
   const datPiblikasyon = format(new Date(publishedAt), 'P', {locale: fr})
-  const aliases = getAlias(artistes, attributes.prioriteArtistes)
+  const aliases = getAlias(artistes, parole.prioriteArtistes)
 
   const handleClick = slug => {
     router.push(`/paroles/${slug}`)?.then(() => window.scrollTo(0, 0))
@@ -58,7 +57,7 @@ export default function TeksKat({parole}) {
             className={classes.media}
             component='img'
             alt={titre}
-            image={couverture?.data?.attributes?.url ? `${IMAGE_URL}${couverture.data.attributes.url}` : noImageUrl}
+            image={couverture?.url ? `${IMAGE_URL}${couverture.url}` : noImageUrl}
             title={titre}
           />
           <CardContent>
@@ -66,7 +65,7 @@ export default function TeksKat({parole}) {
               <Typography display='inline' style={{marginRight: 5}} variant='h6' component='h2'>
                 {titre}
               </Typography>
-              {attributes.creativeCommons && (
+              {parole.creativeCommons && (
                 <Box marginInline={1}>
                   <Image
                     width={24}
@@ -78,7 +77,7 @@ export default function TeksKat({parole}) {
                 </Box>
               )}
 
-              {attributes.explicitLyrics && (
+              {parole.explicitLyrics && (
                 <ExplicitIcon style={{marginRight: 5}} color='error' fontSize='small' />
               )}
             </Box>
@@ -90,14 +89,14 @@ export default function TeksKat({parole}) {
                 {annee}
               </Typography>
               <Typography sx={{fontStyle: 'italic'}} variant='caption'>
-                {attributes.user && (
+                {parole.user && (
                   <>
-                    (<i>parole soumise par {attributes.user.username}</i>)
+                    (<i>parole soumise par {parole.user.username}</i>)
                   </>
                 )}
-                {attributes.userAdmin && !attributes.user && (
+                {parole.userAdmin && !parole.user && (
                   <>
-                    (<i>parole soumise par {attributes.userAdmin}</i>)
+                    (<i>parole soumise par {parole.userAdmin}</i>)
                   </>
                 )}
               </Typography>