Split MizikList and add GroupedVirtuoso

components/awtis/awtis-detay.js

@@ -21,19 +21,19 @@ import {green} from '@mui/material/colors'
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
 import KeyboardBackspaceIcon from '@mui/icons-material/KeyboardBackspace'
 
+import {formatKuveti} from '../../lib/kuveti'
 import AwtisBiyografi from './awtis-biyografi'
-import MizikLis from './mizik-lis'
+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) => b.id - a.id)
+const sortTeks = paroles => paroles.sort((a, b) => a.attributes.titre.localeCompare(b.attributes.titre, 'fr', {sensitivity: 'base'}))
 
 export default function AwtisDetay({anAwtis}) {
-  const router = useRouter()
   const [esByografiOuve, meteEsByografiOuve] = useState(false)
   const {alias, biographie, paroles, photo} = anAwtis
-  const sortedTeks = sortTeks(paroles.data)
+  const sortedTeks = sortTeks(paroles?.data)
   const gwanBiyo = biographie && biographie.length > 100
 
   const biyo = gwanBiyo ? `${biographie.slice(0, 100)}...` : biographie
@@ -42,12 +42,6 @@ export default function AwtisDetay({anAwtis}) {
     meteEsByografiOuve(true)
   }
 
-  const handleBack = () => {
-    const href = '/awtis?paj&paj=1'
-    const as = '/awtis/paj/1'
-    router.push(href, as)
-  }
-
   return (
     <Container>
       <Box sx={{marginBlock: 2}}>
@@ -64,7 +58,7 @@ export default function AwtisDetay({anAwtis}) {
       </Box>
       <Grid container direction='column' justifyContent='center' alignItems='center' spacing={3}>
         {biyo && (
-          <Grid item xs={12} md={6}>
+          <Grid xs={12} md={6}>
             <Card sx={{minWidth: 300}}>
               <CardActionArea onClick={handleClick}>
                 <CardContent>
@@ -79,7 +73,7 @@ export default function AwtisDetay({anAwtis}) {
             </Card>
           </Grid>
         )}
-        <Grid item xs={12} md={6}>
+        <Grid xs={12} md={6}>
           <Box marginBottom={3}>
             {paroles.data.length > 1 ? (
               <Accordion>
@@ -91,29 +85,40 @@ export default function AwtisDetay({anAwtis}) {
                   <Typography marginRight={2} textAlign='center' variant='body1' component='h2'><strong>Liste des paroles</strong></Typography>
                   <Chip color='primary' label={paroles.data.length} size='small' variant='contained' />
                 </AccordionSummary>
-                <AccordionDetails>
-                  <MizikLis paroles={sortedTeks} />
+                <AccordionDetails sx={{paddingInline: 0}}>
+                  {sortedTeks.map(anPawol => {
+                    const {couverture} = anPawol.attributes
+                    const kuvetiFormat = formatKuveti(couverture)
+
+                    return (
+                      <Box key={anPawol.id} sx={{paddingBlock: 0.5}}>
+                        <MizikLyen anPawol={anPawol} kuveti={kuvetiFormat} />
+                      </Box>
+                    )
+                  })}
                 </AccordionDetails>
               </Accordion>
             ) : (
               paroles.data.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>
-                    <MizikLis paroles={paroles.data} />
+                  <Paper sx={{height: '100%', paddingBlock: 2}}>
+                    <MizikLyen anPawol={paroles.data[0]} kuveti={formatKuveti(paroles.data[0].attributes.couverture)} />
                   </Paper>
-                </>
+                </Box>
               )
             )}
           </Box>
         </Grid>
       </Grid>
-      <Box sx={{textAlign: 'center', marginBottom: 2}} >
-        <Button variant='outlined' startIcon={<KeyboardBackspaceIcon />} onClick={handleBack}>
-          Retour aux artistes
-        </Button>
+      <Box sx={{textAlign: 'center', marginBlock: 3}} >
+        <Link passHref href='/awtis'>
+          <Button variant='outlined' startIcon={<KeyboardBackspaceIcon />}>
+            Retour aux artistes
+          </Button>
+        </Link>
       </Box>
       {esByografiOuve && (
         <AwtisBiyografi