Add Link to awtis in Teks

components/teks/teks.js

@@ -7,6 +7,8 @@ import Grid from '@mui/material/Unstable_Grid2'
 import Typography from '@mui/material/Typography'
 import Tooltip from '@mui/material/Tooltip'
 import {useMediaQuery} from '@mui/material'
+import Link from 'next/link'
+import slugify from 'slugify'
 
 import {styled} from '@mui/material/styles'
 import ExplicitIcon from '@mui/icons-material/Explicit'
@@ -27,10 +29,15 @@ const classes = {
   grid: `${PREFIX}-grid`,
   koute: `${PREFIX}-koute`,
   vwe: `${PREFIX}-vwe`,
-  pataje: `${PREFIX}-pataje`
+  pataje: `${PREFIX}-pataje`,
+  separation: `${PREFIX}-separation`
 }
 
-const Root = styled('div')(() => ({
+const Root = styled('div')((
+  {
+    theme
+  }
+) => ({
   [`&.${classes.container}`]: {
     marginTop: '3em',
   },
@@ -47,6 +54,13 @@ const Root = styled('div')(() => ({
     zIndex: 9999
   },
 
+  [`& .${classes.separation}`]: {
+    color: 'black',
+    [theme.getColorSchemeSelector('dark')]: {
+      color: 'white'
+    }
+  },
+
   '@media (max-width: 600px)': {
     marginLeft: '0',
   },
@@ -109,7 +123,7 @@ const ExplicitTooltip = Tooltip
 export default function Teks({parole}) {
   const isMobile = useMediaQuery('(max-width:600px)')
   const langArray = langToArray(parole)
-  const aliases = getAlias(parole.artistes, parole.prioriteArtistes)
+  const enhancedAliases = getAlias(parole.artistes, parole.prioriteArtistes, true)
 
   useEffect(() => {
     const isBrowser = () => typeof window !== 'undefined'
@@ -124,8 +138,16 @@ export default function Teks({parole}) {
     <Root className={classes.container}>
       <Box sx={{textAlign: 'center', marginTop: 1}}>
         <Typography variant='h4' component='div' display='block' marginBottom={2}>
-          <Typography gutterBottom variant='h6' component='div'>
-            {aliases}
+          <Typography gutterBottom color='primary' variant='h6' component='div'>
+            {enhancedAliases.map(({type, value}) => {
+              if (type === 'element') {
+                return (
+                  <Link style={{textDecoration: 'none', color: 'inherit'}} href={`/awtis/${slugify(value, {lower: true, remove: /[*#+~.()'"!:@]/g})}`}>{value}</Link>
+                )
+              }
+
+              return <span key={value} className={classes.separation}>{value}</span>
+            })}
           </Typography>
           <Typography variant='h5' component='div'>
             {parole.titre} <small>({parole?.annee})</small>

lib/utils/format.js

@@ -1,11 +1,20 @@
+import slugify from 'slugify'
+
 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) => {
-  if (artistes.data.length === 1) {
+export const getAlias = (artistes, priorite = null, enhanced = false) => {
+  if (artistes.data.length === 1 && !enhanced) {
     return artistes.data[0].attributes.alias
   }
 
+  if (artistes.data.length === 1 && enhanced) {
+    return [{
+      type: 'element',
+      value: artistes.data[0].attributes.alias
+    }]
+  }
+
   const alias = []
   const splittedPriority = priorite ? priorite.split('-')
     .map(p => Number.parseInt(p, 10)) : null
@@ -21,5 +30,25 @@ export const getAlias = (artistes, priorite = null) => {
     }
   }
 
+  if (enhanced) {
+    const list = new Intl.ListFormat('fr').formatToParts(alias)
+    return list
+  }
+
   return new Intl.ListFormat('fr').format(alias)
 }
+
+function separateString(inputString) {
+  const regex = /\s*,\s*|\s+et\s+/
+  const strings = inputString.split(regex).map(element => element.trim())
+  return strings
+}
+
+export const getAliasObject = inputString => {
+  const awtis = separateString(inputString)
+
+  return awtis.map(alias => ({
+    alias,
+    slug: slugify(alias, {lower: true, remove: /[*#+~.()'"!:@]/g})
+  }))
+}