Fix aliases error when featuring

components/awtis/mizik-lis.js

@@ -8,6 +8,7 @@ import LibraryMusicIcon from '@mui/icons-material/LibraryMusic'
 import ExplicitIcon from '@mui/icons-material/Explicit'
 
 import {esBrandNew} from '../../lib/date'
+import {getAlias} from '../../lib/utils/format'
 
 const PREFIX = 'mizik-lis'
 
@@ -58,7 +59,7 @@ export default function MizikLis({meteEsMobilOuve, niAwtis, paroles, slugTeksChw
           selected={slugTeksChwazi === attributes.slug}
           onClick={() => handleClick(attributes.slug)}
         >
-          <ListItemText primary={attributes.titre} secondary={niAwtis ? new Intl.ListFormat('fr').format(attributes.artistes.data.map(({attributes}) => attributes.alias)) : null} />
+          <ListItemText primary={attributes.titre} secondary={niAwtis ? getAlias(attributes.artistes, attributes.prioriteArtistes) : null} />
           {attributes.explicite && (
             <ExplicitIcon style={{marginRight: 5}} color='secondary' />
           )}

components/teks/lekte.js

@@ -14,6 +14,8 @@ import Image from 'next/image'
 import {grey} from '@mui/material/colors'
 import {Link} from '@mui/material'
 
+import {getAlias} from '../../lib/utils/format'
+
 const IMAGE_URL = process.env.NEXT_PUBLIC_API_URL_ROOT || 'http://localhost:1337'
 
 const Widget = styled('div')(({theme}) => ({
@@ -58,7 +60,7 @@ export default function Lekte({audio, url, parole}) {
   const [position, setPosition] = useState(0)
   const [volume, setVolume] = useState(100)
   const [isPlaying, setIsPlaying] = useState(false)
-  const awtis = parole.artistes.data.map(({attributes}) => attributes.alias)
+  const alias = getAlias(parole.artistes, parole.prioriteArtistes)
 
   function formatDuration(value) {
     const minute = Math.floor(value / 60)
@@ -147,7 +149,7 @@ export default function Lekte({audio, url, parole}) {
           </CoverImage>
           <Box sx={{ml: 1.5, minWidth: 0}}>
             <Typography fontWeight={500}>
-              {new Intl.ListFormat('fr').format(awtis)}
+              {alias}
             </Typography>
             <Typography>
               <Link underline='hover' sx={{cursor: 'pointer'}} target='_blank' rel='noreferrer' href={url}>

components/teks/teks-kat.js

@@ -13,6 +13,8 @@ import {
 import ExplicitIcon from '@mui/icons-material/Explicit'
 import {styled} from '@mui/material/styles'
 
+import {getAlias} from '../../lib/utils/format'
+
 const PREFIX = 'teks-kat'
 const IMAGE_URL = process.env.NEXT_PUBLIC_API_URL_ROOT || 'http://localhost:1337'
 
@@ -39,7 +41,7 @@ export default function TeksKat({parole}) {
   const {titre, artistes, annee, couverture, publishedAt, slug} = attributes
 
   const datPiblikasyon = format(new Date(publishedAt), 'P', {locale: fr})
-  const alias = artistes.data.map(({attributes}) => attributes.alias)
+  const aliases = getAlias(artistes, attributes.prioriteArtistes)
 
   const handleClick = slug => {
     router.push(`/paroles/${slug}#${slug}`).then(() => window.scrollTo(0, 0))
@@ -76,7 +78,7 @@ export default function TeksKat({parole}) {
               )}
             </Typography>
             <Typography variant='body2' color='textSecondary' component='p'>
-              {new Intl.ListFormat('fr').format(alias)}
+              {aliases}
             </Typography>
             <Typography variant='body2' color='textSecondary' component='p'>
               {annee}

components/teks/teks.js

@@ -13,7 +13,7 @@ import {styled} from '@mui/material/styles'
 import MuiAlert from '@mui/material/Alert'
 import ExplicitIcon from '@mui/icons-material/Explicit'
 
-import {formatJsonString} from '../../lib/utils/format'
+import {formatJsonString, getAlias} from '../../lib/utils/format'
 
 import VweKomante from '../komante/vwe-komante'
 
@@ -123,7 +123,7 @@ const ExplicitTooltip = Tooltip
 export default function Teks({parole, paroleId, commentaires, open, success, error, setSuccess, setError, handleClose}) {
   const isMobile = useMediaQuery('(max-width:800px)')
   const langArray = langToArray(parole)
-  const awtis = parole.artistes.data.map(({attributes}) => attributes.alias)
+  const aliases = getAlias(parole.artistes, parole.prioriteArtistes)
 
   return (
     <Root>
@@ -133,7 +133,7 @@ export default function Teks({parole, paroleId, commentaires, open, success, err
       <Box sx={{textAlign: 'center', marginTop: 9}}>
         <Typography style={{marginTop: '0.8em'}} variant='h4' component='div' display='block'>
           <Typography gutterBottom variant='h6' component='div'>
-            {new Intl.ListFormat('fr').format(awtis)}
+            {aliases}
           </Typography>
           <Typography variant='h5' component='div'>
             {parole.titre} <small>({parole?.annee})</small>

pages/paroles/[slug].js

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types'
 
+import {getAlias} from '../../lib/utils/format'
 import {jwennTeks, jwennKomanteEpiTeksId} from '../../lib/oki-api'
 
 import TeksDrawer from '../../components/teks/teks-drawer'
@@ -8,11 +9,6 @@ import HeadLayout from '../../components/head-layout'
 import Custom500 from '../500'
 import Custom404 from '../404'
 
-const jwennAwtis = artiste => {
-  const alias = artiste.data.map(({attributes}) => attributes.alias)
-  return new Intl.ListFormat('fr').format(alias)
-}
-
 export default function SlugTeks({hasError, errorMessage, paroles, parole, slug, commentaires}) {
   if (hasError) {
     console.log('⚠️ error :', errorMessage)
@@ -23,7 +19,7 @@ export default function SlugTeks({hasError, errorMessage, paroles, parole, slug,
     return <Custom404 />
   }
 
-  const artistes = parole.attributes.artistes.length === 1 ? parole.attributes.artistes[0].data.attributes.alias : jwennAwtis(parole.attributes.artistes)
+  const artistes = parole.attributes.artistes.length === 1 ? parole.attributes.artistes[0].data.attributes.alias : getAlias(parole.attributes.artistes, parole.attributes.prioriteArtistes)
   const {couverture} = parole.attributes
   const formatKouveti = () => {
     if (!couverture?.data?.attributes) {