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 title = `OKI | ${anAwtis.alias} - Paroles et Traductions`
-  const description = `${anAwtis.attributes.alias}${anAwtis?.attributes?.biographie ? ` : ${anAwtis?.attributes?.biographie.slice(0, 100)}...` : ''}`
+  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,
+    '@id': anAwtis.musicBrainzUrl || undefined,
-    name: anAwtis.attributes.alias,
+    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 {data, meta} = await jwennAwtisPajinasyon(pajParsed)
-  const pajTotal = Math.ceil(awtisPouChakPaj.meta.pagination.total / awtisPouChakPaj.meta.pagination.limit)
+  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

@@ -26,12 +26,12 @@ export async function generateMetadata(props) {
 
   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 awtis = anTeks?.artistes?.length === 1 ? anTeks?.artistes[0].alias : getAlias(anTeks.artistes, anTeks.prioriteArtistes)
-  const title = `OKI | ${awtis} - ${anTeks.attributes.titre} | Paroles et Traductions`
+  const title = `OKI | ${awtis} - ${anTeks.titre} | Paroles et Traductions`
-  const description = `Paroles de « ${anTeks?.attributes?.titre} » : ${anTeks?.attributes?.transcription.slice(0, 100)}...`
+  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 {couverture} = anTeks
   const teksKuvetiFormat = formatKuveti(couverture)  
 
   const jsonLd = {
     '@context': 'http://schema.org',
     '@type': 'MusicRecording',
-    '@id': anTeks.attributes.musicBrainzUrl || undefined,
+    '@id': anTeks.musicBrainzUrl || undefined,
-    name: anTeks.attributes.titre,
+    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,
+    thumbnailUrl: couverture?.formats?.thumbnail?.url ? `${apiUrl}${couverture.formats.thumbnail.url}` : undefined,
-    byArtist: anTeks.attributes.artistes.data.map(({attributes}) => {
+    byArtist: anTeks.artistes.map(({photo, musicBrainzUrl, alias, slug}) => {
-      const {photo} = attributes
       const kuvetiFormat = formatKuveti(photo)
 
       return {
         '@type': 'Person',
-        '@id': attributes.musicBrainzUrl || undefined,
+        '@id': musicBrainzUrl || undefined,
-        name: attributes.alias,
+        name: alias,
-        url: `${siteUrl}/awtis/${attributes.slug}`,
+        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>

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 pawolTrie = pawol.sort((a, b) => a.titre.localeCompare(b.titre, 'fr', {sensitivity: 'base'}))
-  const grupPawol = groupBy(pawol, anPawol => anPawol.attributes.titre[0].toUpperCase())
+  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}
+        id={anPawol.slug}
-        selected={slug === anPawol.attributes.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>}
+          primary={<Typography sx={{fontWeight: 'bold', color: 'info.main'}} >{anPawol.titre}</Typography>}
-          secondary={niAwtis ? getAlias(anPawol.attributes.artistes, anPawol.attributes.prioriteArtistes) : null} />
+          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>

components/files/files-list.js

@@ -50,8 +50,8 @@ export default function FilesList({files}) {
   const theme = useTheme()
   const {mode} = useColorScheme()
 
-  const musicFiles = files.filter(file => file.attributes.mime.startsWith('audio'))
+  const musicFiles = files.filter(file => file.mime.startsWith('audio'))
-  const pdfFiles = files.filter(file => file.attributes.mime === 'application/pdf')
+  const pdfFiles = files.filter(file => file.mime === 'application/pdf')
 
   const sortedMusicFiles = musicFiles.sort((a, b) => {
     const extensionOrder = {
@@ -60,7 +60,7 @@ export default function FilesList({files}) {
       '.aac': 2,
       '.mp3': 3
     }
-    return extensionOrder[a.attributes.ext.toLowerCase()] - extensionOrder[b.attributes.ext.toLowerCase()]
+    return extensionOrder[a.ext.toLowerCase()] - extensionOrder[b.ext.toLowerCase()]
   })
 
   const handleClick = (e, url, fileName) => {
@@ -170,7 +170,7 @@ export default function FilesList({files}) {
                 {sortedMusicFiles.map(file => (
                   <StyledTableRow key={file.id}>
                     <StyledTableCell>
-                      {getQuality(file.attributes.ext.toLowerCase(), file?.attributes?.caption?.toUpperCase())}
+                      {getQuality(file.ext.toLowerCase(), file?.caption?.toUpperCase())}
                     </StyledTableCell>
                     <StyledTableCell align='left'>
                       <Link
@@ -178,11 +178,11 @@ export default function FilesList({files}) {
                         underline='hover'
                         sx={{fontWeight: 'bold'}}
                         aria-label='download'
-                        onClick={e => handleClick(e, `${apiUrl}${file.attributes.url}`, file.attributes.name)}
+                        onClick={e => handleClick(e, `${apiUrl}${file.url}`, file.name)}
                       >
-                        {file.attributes.name}
+                        {file.name}
                       </Link>
-                      <small style={{marginLeft: 3}}>({formatSize(file.attributes.size)})</small>
+                      <small style={{marginLeft: 3}}>({formatSize(file.size)})</small>
                     </StyledTableCell>
                   </StyledTableRow>
                 ))}
@@ -217,7 +217,7 @@ export default function FilesList({files}) {
                   <StyledTableRow key={file.id}>
                     <StyledTableCell>
                       <strong>
-                        {file.attributes.caption}
+                        {file.caption}
                       </strong>
                     </StyledTableCell>
                     <StyledTableCell align='left'>
@@ -226,11 +226,11 @@ export default function FilesList({files}) {
                         underline='hover'
                         sx={{fontWeight: 'bold'}}
                         aria-label='download'
-                        onClick={e => handleClick(e, `${apiUrl}${file.attributes.url}`, file.attributes.name)}
+                        onClick={e => handleClick(e, `${apiUrl}${file.url}`, file.name)}
                       >
-                        {file.attributes.name}
+                        {file.name}
                       </Link>
-                      <small style={{marginLeft: 3}}>({formatSize(file.attributes.size)})</small>
+                      <small style={{marginLeft: 3}}>({formatSize(file.size)})</small>
                     </StyledTableCell>
                   </StyledTableRow>
                 ))}

components/komante/komante-list.js

@@ -38,20 +38,20 @@ const StyledList = styled(List)((
 export default function KomanteList({commentaires}) {
   return (
     <StyledList className={classes.root}>
-      {commentaires.map(({id, attributes}) => (
+      {commentaires.map(({id, user, contenu, datePublication}) => (
         <div key={id}>
           <ListItemText
             primary={
               <Typography gutterBottom style={{textDecoration: 'underline'}} variant='body1'>
-                <small>{attributes.user.data.attributes.username}</small>
+                <small>{user.username}</small>
               </Typography>
             }
           />
           <ListItemText
-            primary={formatJsonString(attributes.contenu)}
+            primary={formatJsonString(contenu)}
             secondary={
               <Typography gutterBottom style={{marginBlock: 5, fontStyle: 'italic'}} variant='caption' display='block'>
-                {format(new Date(attributes.datePublication), 'Pp', {locale: fr})}
+                {format(new Date(datePublication), 'Pp', {locale: fr})}
               </Typography>
             }
           />

components/soumet/ekri-teks.js

@@ -191,7 +191,7 @@ function EkriTeks({canAutoTranslate, selectedTeks, setSelectedTeks}) {
               username: user.username,
               email: user.email
             },
-            artistes: [artiste.data.id],
+            artistes: [artiste.id],
             traductionAuto: tradiksyonOtomatik
           }
         }, {

components/teks/an-teks.js

@@ -8,7 +8,7 @@ export default function AnTeks({parole, paroleId}) {
     <Teks
       parole={parole}
       paroleId={paroleId}
-      commentaires={parole?.commentaires.data}
+      commentaires={parole?.commentaires}
     />
   )
 }

components/teks/diferans-dialog.js

@@ -49,7 +49,7 @@ export default function DiferansDialog({difference}) {
         <DialogTitle>Liste des modifications</DialogTitle>
         <List sx={{width: '100%', maxWidth: 360, bgcolor: 'background.paper'}}>
           {difference.map(({id, admin_user, date, jsonDiff}) => {
-            const {firstname} = admin_user.data.attributes
+            const {firstname} = admin_user
             const diferansDate = format(new Date(date), 'PPPppp', {locale: fr})
 
             return (

components/teks/drawer-bar.js

@@ -17,13 +17,13 @@ import MizikLis from '../awtis/mizik-lis'
 
 const getMizikFiltered = (paroles, filter) => {
   if (paroles) {
-    const filteredTitre = paroles.filter(({attributes}) => {
+    const filteredTitre = paroles.filter(({titre}) => {
-      const deburredTit = deburr(attributes.titre)
+      const deburredTit = deburr(titre)
       return deburredTit.toLowerCase().includes(deburr(filter.toLowerCase()))
     }) 
 
-    const filteredAlias = paroles.filter(({attributes}) => {
+    const filteredAlias = paroles.filter(({artistes}) => {
-      const aliasLis = attributes.artistes.data.map(({attributes}) => deburr(attributes.alias)).join(', ')
+      const aliasLis = artistes.map(({alias}) => deburr(alias)).join(', ')
       return aliasLis.toLowerCase().includes(deburr(filter.toLowerCase()))
     })
 

components/teks/lekte.js

@@ -137,9 +137,9 @@ export default function Lekte({audio, url, parole}) {
     audioRef.current.volume = value / 100
   }
 
-  const imagePath = parole?.couverture?.data?.attributes?.formats?.thumbnail?.url
+  const imagePath = parole?.couverture?.formats?.thumbnail?.url
-  const width = parole?.couverture?.data?.attributes?.formats?.thumbnail?.width || 192
+  const width = parole?.couverture?.formats?.thumbnail?.width || 192
-  const height = parole?.couverture?.data?.attributes?.formats?.thumbnail?.height || 192
+  const height = parole?.couverture?.formats?.thumbnail?.height || 192
 
   const imageSrc = imagePath
     ? new URL(imagePath, IMAGE_URL).toString()

components/teks/pataje.js

@@ -50,10 +50,10 @@ export default function Pataje({parole, setError, setSuccess}) {
   const [open, setOpen] = useState(false)
 
   const patajeUrl = `${SITE_URL}/paroles/${slug}`
-  const alias = artistes.data.map(({attributes}) => attributes.alias)
+  const alias = artistes.map(({alias}) => alias)
   const renderAwtis = new Intl.ListFormat('fr').format(alias)
 
-  const text = parole.user.data || parole.userAdmin.data ? `${renderAwtis} - ${titre} (Paroles et Traductions) - (parole soumise par ${parole?.user?.data?.attributes?.username || parole.userAdmin?.data?.attributes?.username || parole.userAdmin?.data?.attributes?.firstname})` : `${renderAwtis} - ${titre} (Paroles et Traductions)`
+  const text = parole.user || parole.userAdmin ? `${renderAwtis} - ${titre} (Paroles et Traductions) - (parole soumise par ${parole?.user?.username || parole.userAdmin?.username || parole.userAdmin?.firstname})` : `${renderAwtis} - ${titre} (Paroles et Traductions)`
 
   const handleClose = () => {
     setOpen(false)

components/teks/teks-drawer.js

@@ -32,7 +32,7 @@ export default function TeksDrawer({paroles}) {
   const [error, setError] = useState('')
   const [success, setSuccess] = useState('')
 
-  const parole = paroles.find(({attributes}) => attributes.slug === slug)
+  const parole = paroles.find((parole) => parole.slug === slug)  
 
   useEffect(() => {
     if (error || success) {
@@ -93,17 +93,17 @@ export default function TeksDrawer({paroles}) {
           {parole && (
             <Box sx={{display: 'flex', position: 'relative', top: '-20px'}}>
               <Box>
-                <Pataje parole={parole.attributes} setError={setError} setSuccess={setSuccess} />
+                <Pataje parole={parole} setError={setError} setSuccess={setSuccess} />
               </Box>
 
-              {parole.attributes.streamVideo && parole.attributes.streamVideo.length > 0 && (
+              {parole.streamVideo && parole.streamVideo.length > 0 && (
                 <Box>
-                  <VweKouteAchte niVideyo parole={parole.attributes} />
+                  <VweKouteAchte niVideyo parole={parole} />
                 </Box>
               )}
-              {parole.attributes.streamAudio && parole.attributes.streamAudio.length > 0 && (
+              {parole.streamAudio && parole.streamAudio.length > 0 && (
                 <Box>
-                  <VweKouteAchte niOdyo parole={parole.attributes} />
+                  <VweKouteAchte niOdyo parole={parole} />
                 </Box>
               )}
             </Box>

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} = parole
-  const {titre, artistes, annee, couverture, publishedAt, slug} = attributes
 
   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>

components/teks/teks.js

@@ -169,14 +169,14 @@ export default function Teks({parole}) {
           </Box>
         </Typography>
 
-        {parole?.user?.data && (
+        {parole?.user && (
           <Typography style={{marginBottom: '1.5em'}} display='block' variant='caption'>
-            <i>parole soumise par {parole.user.data.attributes.username}</i>
+            <i>parole soumise par {parole.user.username}</i>
           </Typography>
         )}
-        {parole?.userAdmin?.data && !parole.user.data && (
+        {parole?.userAdmin&& !parole.user && (
           <Typography style={{marginBottom: '1.5em'}} display='block' variant='caption'>
-            <i>parole soumise par {parole.userAdmin.data.attributes.firstname}</i>
+            <i>parole soumise par {parole.userAdmin.firstname}</i>
           </Typography>
         )}
         {parole.creativeCommons && (
@@ -184,8 +184,8 @@ export default function Teks({parole}) {
             <LicenseModal license={parole.creativeCommons.toLowerCase()} />
           </Box>
         )}
-        {parole?.files?.data && (
+        {parole?.files && (
-          <FilesDialog files={parole.files.data} />
+          <FilesDialog files={parole.files} />
         )}
         {(parole.okiMizikID || parole.streamAudio.length > 0 || parole.gadeEmbed) && (
           <Box sx={{textAlign: 'center'}}>

lib/kuveti.js

@@ -1,19 +1,19 @@
 export const formatKuveti = kuveti => {
-  if (!kuveti?.data?.attributes) {
+  if (!kuveti) {
     return null
   }
 
-  if (kuveti.data.attributes && kuveti.data.attributes.formats && kuveti.data.attributes.formats.large) {
+  if (kuveti && kuveti.formats && kuveti.formats.large) {
-    return kuveti.data.attributes.formats.large
+    return kuveti.formats.large
   }
 
-  if (kuveti.data.attributes && kuveti.data.attributes.formats && kuveti.data.attributes.formats.medium) {
+  if (kuveti && kuveti.formats && kuveti.formats.medium) {
-    return kuveti.data.attributes.formats.medium
+    return kuveti.formats.medium
   }
 
-  if (kuveti.data.attributes && kuveti.data.attributes.formats && kuveti.data.attributes.formats.small) {
+  if (kuveti && kuveti.formats && kuveti.formats.small) {
-    return kuveti.data.attributes.formats.small
+    return kuveti.formats.small
   }
 
-  return kuveti.data.attributes
+  return kuveti
 }

lib/utils/format.js

@@ -4,14 +4,14 @@ export const formatJsonString = stringToFormat =>
   stringToFormat.split('\n').map((string, index) => <div key={index}>{`${string}`}<br /></div>) // eslint-disable-line react/no-array-index-key
 
 export const getAlias = (artistes, priorite = null, enhanced = false) => {
-  if (artistes.data.length === 1 && !enhanced) {
+  if (artistes.length === 1 && !enhanced) {
-    return artistes.data[0].attributes.alias
+    return artistes[0].alias
   }
 
-  if (artistes.data.length === 1 && enhanced) {
+  if (artistes.length === 1 && enhanced) {
     return [{
       type: 'element',
-      value: artistes.data[0].attributes.alias
+      value: artistes[0].alias
     }]
   }
 
@@ -21,12 +21,12 @@ export const getAlias = (artistes, priorite = null, enhanced = false) => {
 
   if (splittedPriority) {
     for (const element of splittedPriority) {
-      const foundedArtistes = artistes.data.find(({id}) => id === element)
+      const foundedArtistes = artistes.find(({id}) => id === element)
-      alias.push(foundedArtistes.attributes.alias)
+      alias.push(foundedArtistes.alias)
     }
   } else {
-    for (const artiste of artistes.data) {
+    for (const artiste of artistes) {
-      alias.push(artiste.attributes.alias)
+      alias.push(artiste.alias)
     }
   }