Split MizikList and add GroupedVirtuoso

components/awtis/mizik-lis.js

@@ -1,95 +1,94 @@
+'use client'
+
+import React from 'react'
 import PropTypes from 'prop-types'
-import {useRouter} from 'next/router'
+import {useParams} from 'next/navigation'
+import {GroupedVirtuoso} from 'react-virtuoso'
+import List from '@mui/material/List'
+import ListItem from '@mui/material/ListItem'
+import ListSubheader from '@mui/material/ListSubheader'
 
-import {styled} from '@mui/material/styles'
-import {List, ListItem, ListItemText} from '@mui/material'
-import FiberNewOutlinedIcon from '@mui/icons-material/FiberNewOutlined'
-import LibraryMusicIcon from '@mui/icons-material/LibraryMusic'
-import ExplicitIcon from '@mui/icons-material/Explicit'
-import {Peertube} from '@icons-pack/react-simple-icons'
+import {groupBy} from 'lodash'
+import {formatKuveti} from '../../lib/kuveti'
+import MizikLyen from './mizik-lyen'
 
-import {esBrandNew} from '../../lib/date'
-import {getAlias} from '../../lib/utils/format'
+function grupPawol(pawol) {
+  const pawolTrie = pawol.sort((a, b) => a.attributes.titre.localeCompare(b.attributes.titre, 'fr', {sensitivity: 'base'}))
+  const grupPawol = groupBy(pawol, anPawol => anPawol.attributes.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'}))
 
-const PREFIX = 'mizik-lis'
-
-const classes = {
-  root: `${PREFIX}-root`
+  return {pawol: pawolTrie, grupCounts, grup}
 }
 
-const StyledList = styled(List)((
-  {
-    theme
-  }
-) => ({
-  [`&.${classes.root}`]: {
-    width: '100%',
-    maxWidth: 360,
-    backgroundColor: theme.palette.background.paper
-  }
-}))
-
-export default function MizikLis({meteEsMobilOuve, niAwtis, paroles, slugTeksChwazi, meteSlugTeksChwazi}) {
-  const router = useRouter()
-
-  const handleClick = slug => {
-    if (meteSlugTeksChwazi) {
-      meteSlugTeksChwazi(slug)
-    }
-
-    if (slug !== slugTeksChwazi) {
-      if (niAwtis) {
-        router.push(`/paroles/${slug}`).then(() => window.scrollTo(0, 0))
-      } else {
-        router.push(`/paroles/${slug}#${slug}`).then(() => window.scrollTo(0, 0))
-      }
-    }
-
-    if (meteEsMobilOuve) {
-      meteEsMobilOuve(false)
-    }
-  }
+export default function MizikLis({niAwtis, paroles}) {
+  const params = useParams()
+  const {pawol, grupCounts, grup} = grupPawol(paroles)
 
   return (
-    <StyledList component='nav' className={classes.root} aria-label='mizik'>
-      {paroles.map(({id, attributes}) => (
-        <ListItem
-          key={id}
-          button
-          id={attributes.slug}
-          selected={slugTeksChwazi === attributes.slug}
-          onClick={() => handleClick(attributes.slug)}
-        >
-          <ListItemText primary={<strong>{attributes.titre}</strong>} secondary={niAwtis ? getAlias(attributes.artistes, attributes.prioriteArtistes) : null} />
-          {attributes.gadeEmbed && !attributes.okiMizikID && (
-            <Peertube style={{marginRight: 5}} />
-          )}
-          {attributes.explicitLyrics && (
-            <ExplicitIcon style={{marginRight: 5}} color='secondary' />
-          )}
-          {attributes.okiMizikID && (
-            <LibraryMusicIcon style={{fontSize: 40}} color='primary' />
-          )}
-          {esBrandNew(attributes.publishedAt) && (
-            <FiberNewOutlinedIcon style={{fontSize: 40}} color='primary' />
-          )}
-        </ListItem>
-      ))}
-    </StyledList>
+    <GroupedVirtuoso
+      groupCounts={grupCounts}
+      components={MUIComponents}
+      groupContent={index => <div>{grup[index]}</div>}
+      itemContent={index => {
+        const anPawol = pawol[index]
+        const {couverture} = anPawol.attributes
+        const kuvetiFormat = formatKuveti(couverture)
+
+        return (
+          <MizikLyen niAwtis={niAwtis} anPawol={anPawol} kuveti={kuvetiFormat} slug={params.slug} />
+        )
+      }}
+    />
+  )
+}
+
+const MUIComponents = {
+  List: React.forwardRef(({style, children}, listRef) => (
+    <List ref={listRef} style={{padding: 0, ...style, margin: 0}} component='div'>
+      {children}
+    </List>
+  )),
+
+  Item: ({children, ...props}) => (
+    <ListItem component='div' {...props} style={{margin: 0, paddingInline: 0}}>
+      {children}
+    </ListItem>
+  ),
+
+  Group: ({children, style, ...props}) => (
+    <ListSubheader
+      component='div'
+      {...props}
+      style={{
+        ...style,
+        backgroundColor: 'transparent',
+        margin: 0,
+        paddingLeft: 5,
+        fontWeight: 'bold'
+      }}
+    >
+      {children}
+    </ListSubheader>
   )
 }
 
 MizikLis.propTypes = {
-  meteEsMobilOuve: PropTypes.func,
   niAwtis: PropTypes.bool,
-  paroles: PropTypes.array.isRequired,
-  slugTeksChwazi: PropTypes.string,
-  meteSlugTeksChwazi: PropTypes.func
+  paroles: PropTypes.array.isRequired
 }
 
-MizikLis.defaultProps = {
-  meteEsMobilOuve: null,
-  niAwtis: false,
-  slugTeksChwazi: null,
-  meteSlugTeksChwazi: null
+MUIComponents.List.propTypes = {
+  style: PropTypes.object,
+  children: PropTypes.node.isRequired,
+}
+
+MUIComponents.Item.propTypes = {
+  children: PropTypes.node.isRequired,
+}
+
+MUIComponents.Group.propTypes = {
+  children: PropTypes.node.isRequired,
+  style: PropTypes.object,
 }