Adapt components with API response

components/awtis/awtis-detay.js

@@ -28,12 +28,12 @@ import MizikLyen from './mizik-lyen'
 const IMAGE_URL = process.env.NEXT_PUBLIC_API_URL_ROOT || 'http://localhost:1337'
 const noImageUrl = 'https://place-hold.it/140x140?text=Indisponible'
 
-const sortTeks = paroles => paroles.sort((a, b) => a.attributes.titre.localeCompare(b.attributes.titre, 'fr', {sensitivity: 'base'}))
+const sortTeks = paroles => paroles.sort((a, b) => a.titre.localeCompare(b.titre, 'fr', {sensitivity: 'base'}))
 
 export default function AwtisDetay({anAwtis}) {
   const [esByografiOuve, meteEsByografiOuve] = useState(false)
   const {alias, biographie, paroles, photo} = anAwtis
-  const sortedTeks = sortTeks(paroles?.data)
+  const sortedTeks = sortTeks(paroles)
   const gwanBiyo = biographie && biographie.length > 100
 
   const biyo = gwanBiyo ? `${biographie.slice(0, 100)}...` : biographie
@@ -51,7 +51,7 @@ export default function AwtisDetay({anAwtis}) {
       </Box>
       <Box sx={{justifyContent: 'center', display: 'flex', marginBottom: 2}}>
         <Avatar
-          src={`${photo?.data?.attributes?.url ? `${IMAGE_URL}${photo?.data?.attributes?.url}` : noImageUrl}`}
+          src={`${photo?.url ? `${IMAGE_URL}${photo?.url}` : noImageUrl}`}
           alt={`Photo ${alias}`}
           sx={{width: 200, height: 200, border: `2px solid ${green[500]}`}}
         />
@@ -99,13 +99,13 @@ export default function AwtisDetay({anAwtis}) {
                 </AccordionDetails>
               </Accordion>
             ) : (
-              paroles.data.length === 0 ? (
+              paroles.length === 0 ? (
                 <Typography gutterBottom textAlign='center' variant='body1' component='h2'><strong>Aucune parole pour le moment</strong></Typography>
               ) : (
                 <Box>
                   <Typography gutterBottom textAlign='center' variant='body1' component='h2'><strong>Parole</strong></Typography>
                   <Paper sx={{height: '100%', paddingBlock: 2}}>
-                    <MizikLyen anPawol={paroles.data[0]} kuveti={formatKuveti(paroles.data[0].attributes.couverture)} />
+                    <MizikLyen anPawol={paroles[0]} kuveti={formatKuveti(paroles[0].couverture)} />
                   </Paper>
                 </Box>
               )
@@ -123,7 +123,7 @@ export default function AwtisDetay({anAwtis}) {
       {esByografiOuve && (
         <AwtisBiyografi
           alias={alias}
-          paroles={paroles.data}
+          paroles={paroles}
           biographie={biographie}
           esByografiOuve={esByografiOuve}
           meteEsByografiOuve={meteEsByografiOuve}