Adapt components with API response

components/awtis/mizik-lyen.js

@@ -20,23 +20,23 @@ export default function MizikLyen({niAwtis, anPawol, kuveti, slug, meteEsMobilOu
   return (
     <Link
       passHref
-      href={`/paroles/${anPawol.attributes.slug}#${anPawol.attributes.slug}`}
+      href={`/paroles/${anPawol.slug}#${anPawol.slug}`}
       style={{textDecoration: 'none', width: '100%', display: 'flex', alignItems: 'center'}}
       onClick={() => meteEsMobilOuve(false)}
     >
       <ListItemButton
         sx={{padding: 0}}
-        id={anPawol.attributes.slug}
-        selected={slug === anPawol.attributes.slug}
+        id={anPawol.slug}
+        selected={slug === anPawol.slug}
       >
         <ListItemAvatar sx={{ml: 2.5}}>
-          <Avatar alt={anPawol.attributes.titre} src={`${apiUrl}${kuveti?.url}`} />
+          <Avatar alt={anPawol.titre} src={`${apiUrl}${kuveti?.url}`} />
         </ListItemAvatar>
         <ListItemText
-          primary={<Typography sx={{fontWeight: 'bold'}} color='info.main'>{anPawol.attributes.titre}</Typography>}
-          secondary={niAwtis ? getAlias(anPawol.attributes.artistes, anPawol.attributes.prioriteArtistes) : null} />
+          primary={<Typography sx={{fontWeight: 'bold', color: 'info.main'}} >{anPawol.titre}</Typography>}
+          secondary={niAwtis ? getAlias(anPawol.artistes, anPawol.prioriteArtistes) : null} />
 
-        {anPawol.attributes.creativeCommons && (
+        {anPawol.creativeCommons && (
           <Box marginInline={1}>
             <Image
               width={24}
@@ -48,14 +48,14 @@ export default function MizikLyen({niAwtis, anPawol, kuveti, slug, meteEsMobilOu
           </Box>
         )}
 
-        {esBrandNew(anPawol.attributes.publishedAt) && (
+        {esBrandNew(anPawol.publishedAt) && (
           <FiberNewOutlinedIcon style={{fontSize: 30, marginRight: 5}} color='primary' />
         )}
 
-        {anPawol.attributes.explicitLyrics && (
+        {anPawol.explicitLyrics && (
           <ExplicitIcon style={{marginRight: 5}} color='error' />
         )}
-        {anPawol.attributes.okiMizikID && (
+        {anPawol.okiMizikID && (
           <LibraryMusicIcon style={{fontSize: 30, marginRight: 5}} color='primary' />
         )}
       </ListItemButton>