Replace join by Intl object

components/awtis/mizik-lis.js

@@ -58,7 +58,7 @@ export default function MizikLis({meteEsMobilOuve, niAwtis, teks, slugTeksChwazi
           selected={slugTeksChwazi === slug}
           onClick={() => handleClick(slug)}
         >
-          <ListItemText primary={tit} secondary={niAwtis ? awtis.map(a => a.alias).join(', ') : null} />
+          <ListItemText primary={tit} secondary={niAwtis ? new Intl.ListFormat('fr').format(awtis.map(({alias}) => alias)) : null} />
           {eksplisit && (
             <ExplicitIcon style={{marginRight: 5}} color='secondary' />
           )}

components/teks/lekte.js

@@ -58,6 +58,7 @@ export default function Lekte({audio, url, teks}) {
   const [position, setPosition] = useState(0)
   const [volume, setVolume] = useState(100)
   const [isPlaying, setIsPlaying] = useState(false)
+  const awtis = teks.awtis.map(({alias}) => alias)
 
   function formatDuration(value) {
     const minute = Math.floor(value / 60)
@@ -146,7 +147,7 @@ export default function Lekte({audio, url, teks}) {
           </CoverImage>
           <Box sx={{ml: 1.5, minWidth: 0}}>
             <Typography fontWeight={500}>
-              {teks.awtis.map(a => a.alias).join(', ')}
+              {new Intl.ListFormat('fr').format(awtis)}
             </Typography>
             <Typography>
               <Link underline='hover' sx={{cursor: 'pointer'}} target='_blank' rel='noreferrer' href={url}>

components/teks/pataje.js

@@ -37,7 +37,8 @@ export default function Pataje({teks, setError, setSuccess}) {
   const [open, setOpen] = useState(false)
 
   const patajeUrl = `${SITE_URL}/teks/${slug}#${slug}`
-  const renderAwtis = awtis.map(a => a.alias).join(', ')
+  const alias = awtis.map(({alias}) => alias)
+  const renderAwtis = new Intl.ListFormat('fr').format(alias)
 
   const text = teks.user ? `${renderAwtis} - ${tit} (Pawòl) - (texte soumis par ${teks.user.username})` : `${renderAwtis} - ${tit} (Pawòl)`
   const twitterUrl = 'https://twitter.com/intent/tweet'

components/teks/teks-kat.js

@@ -35,6 +35,7 @@ export default function TeksKat({teks}) {
   const noImageUrl = 'https://place-hold.it/140x140?text=Pa%20ni%20imaj'
   const {tit, awtis, lanne, kouveti, published_at, slug} = teks
   const datPiblikasyon = format(new Date(published_at), 'P', {locale: fr})
+  const alias = awtis.map(({alias}) => alias)
 
   const handleClick = slug => {
     router.push(`/teks/${slug}#${slug}`).then(() => window.scrollTo(0, 0))
@@ -66,7 +67,7 @@ export default function TeksKat({teks}) {
               )}
             </Typography>
             <Typography variant='body2' color='textSecondary' component='p'>
-              {awtis.map(a => a.alias).join(', ')}
+              {new Intl.ListFormat('fr').format(alias)}
             </Typography>
             <Typography variant='body2' color='textSecondary' component='p'>
               {lanne}

components/teks/teks.js

@@ -118,6 +118,7 @@ export default function Teks({anTeks, komante, open, success, error, setSuccess,
   const isMobile = useMediaQuery('(max-width:800px)')
   const {data: session} = useSession()
   const langArray = langToArray(anTeks)
+  const awtis = anTeks.awtis.map(({alias}) => alias)
 
   return (
     <Root>
@@ -127,7 +128,7 @@ export default function Teks({anTeks, komante, open, success, error, setSuccess,
       <Box sx={{textAlign: 'center', marginTop: 8}}>
         <Typography style={{marginTop: '0.8em'}} variant='h4' display='block'>
           <Typography gutterBottom variant='h6'>
-            {anTeks.awtis.map(a => a.alias).join(', ')}
+            {new Intl.ListFormat('fr').format(awtis)}
           </Typography>
           <Typography variant='h5'>
             {anTeks.tit}

pages/teks/[slug].js

@@ -5,7 +5,10 @@ import {jwennTeksEpiSlug, jwennTeks, jwennKomanteEpiTeksId} from '../../lib/oki-
 import TeksDrawer from '../../components/teks/teks-drawer'
 import HeadLayout from '../../components/head-layout'
 
-const jwennAwtis = awtis => awtis.map(a => a.alias).join(', ')
+const jwennAwtis = awtis => {
+  const alias = awtis.map(({alias}) => alias)
+  return new Intl.ListFormat('fr').format(alias)
+}
 
 export default function SlugTeks({teks, anTeks, slug, komante}) {
   const awtis = anTeks.awtis.length === 1 ? anTeks.awtis[0].alias : jwennAwtis(anTeks.awtis)