Replace CustomDraer by existing DrawerBar

components/teks/teks-drawer.js

@@ -1,28 +1,20 @@
 import {useEffect, useState, useContext} from 'react'
 import Link from 'next/link'
 import PropTypes from 'prop-types'
-import deburr from 'lodash.deburr'
-import union from 'lodash.union'
 import {styled} from '@mui/material/styles'
 import AppBar from '@mui/material/AppBar'
 import Box from '@mui/material/Box'
 import CssBaseline from '@mui/material/CssBaseline'
-import Divider from '@mui/material/Divider'
 import Drawer from '@mui/material/Drawer'
 import IconButton from '@mui/material/IconButton'
 import MenuIcon from '@mui/icons-material/Menu'
 import Toolbar from '@mui/material/Toolbar'
 import Typography from '@mui/material/Typography'
-import FormControl from '@mui/material/FormControl'
-import InputAdornment from '@mui/material/InputAdornment'
-import InputBase from '@mui/material/InputBase'
-import SearchIcon from '@mui/icons-material/Search'
 import LinearProgress from '@mui/material/LinearProgress'
 import CircularProgress from '@mui/material/CircularProgress'
 
 import KeyboardBackspaceIcon from '@mui/icons-material/KeyboardBackspace'
 
-import MizikLis from '../awtis/mizik-lis'
 import {jwennTeks} from '../../lib/oki-api'
 
 import ParolesListContext from '../../contexts/paroles-list'
@@ -30,25 +22,17 @@ import MontreTeks from './montre-teks'
 import DenyeTeks from './denye-teks'
 import Teks from './teks'
 import VweKouteAchte from './vwe-koute-achte'
+import DrawerBar from './drawer-bar'
 
 const drawerWidth = 240
 
 const PREFIX = 'drawer-bar'
 
 const classes = {
-  toolbar: `${PREFIX}-toolbar`,
   vwe: `${PREFIX}-vwe`,
   koute: `${PREFIX}-koute`
 }
 
-const Root = styled('div')((
-  {
-    theme
-  }
-) => ({
-  [`& .${classes.toolbar}`]: theme.mixins.toolbar,
-}))
-
 const Stream = styled('div')((
   {
     theme
@@ -73,22 +57,6 @@ const Stream = styled('div')((
   }
 }))
 
-const getMizikFiltered = (paroles, filter) => {
-  if (paroles) {
-    const filteredTitre = paroles.filter(({attributes}) => {
-      const deburredTit = deburr(attributes.titre)
-      return deburredTit.toLowerCase().includes(deburr(filter.toLowerCase()))
-    })
-
-    const filteredAlias = paroles.filter(({attributes}) => {
-      const aliasLis = attributes.artistes.data.map(({attributes}) => deburr(attributes.alias)).join(', ')
-      return aliasLis.toLowerCase().includes(deburr(filter.toLowerCase()))
-    })
-
-    return union(filteredTitre, filteredAlias)
-  }
-}
-
 export default function TeksDrawer({parole, paroleId, slug, denyeTeks}) {
   const [open, setOpen] = useState(false)
   const {paroles, setParoles} = useContext(ParolesListContext)
@@ -98,17 +66,6 @@ export default function TeksDrawer({parole, paroleId, slug, denyeTeks}) {
   const [error, setError] = useState('')
   const [success, setSuccess] = useState('')
 
-  const [search, setSearch] = useState('')
-  const [slugTeksChwazi, meteSlugTeksChwazi] = useState(slug)
-
-  const mizikFiltered = getMizikFiltered(paroles, search)
-
-  const handleSearch = event => {
-    event.preventDefault()
-    const value = event.target.value
-    setSearch(value)
-  }
-
   const handleOpenDrawer = async () => {
     setMobileOpen(true)
     if (paroles.length === 0) {
@@ -163,36 +120,6 @@ export default function TeksDrawer({parole, paroleId, slug, denyeTeks}) {
     setError('')
   }
 
-  function CustomDrawer() {
-    return (
-      <Root>
-        <FormControl sx={{marginLeft: 1}}>
-          <InputBase
-            className={classes.toolbar}
-            placeholder='Recherche...'
-            startAdornment={
-              <InputAdornment position='start'>
-                <SearchIcon />
-              </InputAdornment>
-            }
-            value={search}
-            onChange={handleSearch}
-          />
-        </FormControl>
-        <Divider />
-        <Box sx={{marginBottom: `${mobileOpen ? '' : '3em'}`}}>
-          <MizikLis
-            niAwtis
-            meteEsMobilOuve={setMobileOpen}
-            paroles={mizikFiltered}
-            slugTeksChwazi={slugTeksChwazi}
-            meteSlugTeksChwazi={meteSlugTeksChwazi}
-          />
-        </Box>
-      </Root>
-    )
-  }
-
   return (
     <Box sx={{display: 'flex'}}>
       <CssBaseline />
@@ -268,7 +195,7 @@ export default function TeksDrawer({parole, paroleId, slug, denyeTeks}) {
               <CircularProgress />
             </Box>
           ) : (
-            <CustomDrawer />
+            <DrawerBar meteEsMobilOuve={setMobileOpen} paroles={paroles} slug={slug} />
           )}
         </Drawer>
         <Drawer
@@ -289,7 +216,7 @@ export default function TeksDrawer({parole, paroleId, slug, denyeTeks}) {
               )}
             </>
           ) : (
-            <CustomDrawer />
+            <DrawerBar meteEsMobilOuve={setMobileOpen} paroles={paroles} slug={slug} />
           )}
         </Drawer>
       </Box>