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}

components/awtis/awtis-kat.js

@@ -66,7 +66,7 @@ export default function AwtisKat({artiste}) {
               className={classes.media}
               component='img'
               alt={alias}
-              image={`${photo?.data?.attributes?.url ? `${IMAGE_URL}${photo?.data?.attributes?.url}` : noImageUrl}`}
+              image={`${photo?.url ? `${IMAGE_URL}${photo?.url}` : noImageUrl}`}
               title={alias}
             />
             <CardContent>
@@ -74,7 +74,7 @@ export default function AwtisKat({artiste}) {
                 {alias}
               </Typography>
               <Typography align='center' variant='body2' color='textSecondary' component='h5'>
-                {`${paroles.data.length === 0 ? 'Aucune parole pour le moment' : `${paroles.data.length} ${paroles.data.length > 1 ? 'paroles' : 'parole'}`}`}
+                {`${paroles.length === 0 ? 'Aucune parole pour le moment' : `${paroles.length} ${paroles.length > 1 ? 'paroles' : 'parole'}`}`}
               </Typography>
             </CardContent>
           </CardActionArea>
@@ -82,7 +82,7 @@ export default function AwtisKat({artiste}) {
         {esByografiOuve && (
           <AwtisBiyografi
             alias={alias}
-            paroles={paroles.data}
+            paroles={paroles}
             biographie={biographie}
             esByografiOuve={esByografiOuve}
             meteEsByografiOuve={meteEsByografiOuve}

components/awtis/cheche-awtis.js

@@ -27,12 +27,13 @@ export default function ChecheAwtis() {
 
     (async () => {
       try {
-        const data = await jwennToutAwtis()
+        const {data} = await jwennToutAwtis()
+        
         const filteredData = data.map(artiste => {
-          const firstLetter = artiste.attributes.alias[0].toUpperCase()
+          const firstLetter = artiste.alias[0].toUpperCase()
           return {
             firstLetter: /\d/.test(firstLetter) ? '0-9' : firstLetter,
-            ...artiste.attributes
+            ...artiste
           }
         })
         if (active) {

components/awtis/mizik-badj-meni.js

@@ -105,7 +105,7 @@ export default function MizikBadjMeni({paroles}) {
             <Paper>
               <ClickAwayListener onClickAway={handleClose}>
                 <MenuList autoFocusItem={open} id='menu-list-grow' onKeyDown={() => handleListKeyDown()}>
-                  {sortedTeks.map(({id, attributes}) => <MenuItem key={id} onClick={() => handleClick(attributes.slug)}>{attributes.titre}</MenuItem>)}
+                  {sortedTeks.map(({id, slug, titre}) => <MenuItem key={id} onClick={() => handleClick(slug)}>{titre}</MenuItem>)}
                 </MenuList>
               </ClickAwayListener>
             </Paper>

components/awtis/mizik-lis.js

@@ -13,8 +13,8 @@ import {formatKuveti} from '../../lib/kuveti'
 import MizikLyen from './mizik-lyen'
 
 function grupPawol(pawol) {
-  const pawolTrie = pawol.sort((a, b) => a.attributes.titre.localeCompare(b.attributes.titre, 'fr', {sensitivity: 'base'}))
-  const grupPawol = groupBy(pawol, anPawol => anPawol.attributes.titre[0].toUpperCase())
+  const pawolTrie = pawol.sort((a, b) => a.titre.localeCompare(b.titre, 'fr', {sensitivity: 'base'}))
+  const grupPawol = groupBy(pawol, anPawol => anPawol.titre[0].toUpperCase())
   const grupCounts = Object.values(grupPawol).map(anPawol => anPawol.length)
   const grup = Object.keys(grupPawol)
   grup.sort((a, b) => a[0].localeCompare(b[0], 'fr', {sensitivity: 'base'}))
@@ -33,7 +33,7 @@ export default function MizikLis({niAwtis, paroles, meteEsMobilOuve}) {
       groupContent={index => <div>{grup[index]}</div>}
       itemContent={index => {
         const anPawol = pawol[index]
-        const {couverture} = anPawol.attributes
+        const {couverture} = anPawol
         const kuvetiFormat = formatKuveti(couverture)
 
         return (

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>