Improve TeksDrawer

components/teks/teks-drawer.js

@@ -1,45 +1,44 @@
-import {useEffect, useState} from 'react'
+import {useEffect, useState, useContext} from 'react'
-import PropTypes from 'prop-types'
 import Link from 'next/link'
-
+import PropTypes from 'prop-types'
-import {
+import deburr from 'lodash.deburr'
-  Toolbar,
+import union from 'lodash.union'
-  Typography,
+import {styled} from '@mui/material/styles'
-  AppBar,
+import AppBar from '@mui/material/AppBar'
-  CssBaseline,
+import Box from '@mui/material/Box'
-  Drawer,
+import CssBaseline from '@mui/material/CssBaseline'
-  Hidden,
+import Divider from '@mui/material/Divider'
-  IconButton,
+import Drawer from '@mui/material/Drawer'
-  Box
+import IconButton from '@mui/material/IconButton'
-} from '@mui/material'
+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 MenuIcon from '@mui/icons-material/Menu'
+import MizikLis from '../awtis/mizik-lis'
+import {jwennTeks} from '../../lib/oki-api'
 
-import {useTheme, styled} from '@mui/material/styles'
+import ParolesListContext from '../../contexts/paroles-list'
-
+import MontreTeks from './montre-teks'
-import DrawerBar from './drawer-bar'
 import DenyeTeks from './denye-teks'
-import VweKouteAchte from './vwe-koute-achte'
 import Teks from './teks'
+import VweKouteAchte from './vwe-koute-achte'
 
-const PREFIX = 'teks-drawer'
+const drawerWidth = 240
+
+const PREFIX = 'drawer-bar'
 
 const classes = {
-  root: `${PREFIX}-root`,
-  drawer: `${PREFIX}-drawer`,
-  appBar: `${PREFIX}-appBar`,
-  menuButton: `${PREFIX}-menuButton`,
   toolbar: `${PREFIX}-toolbar`,
-  drawerPaper: `${PREFIX}-drawerPaper`,
+  vwe: `${PREFIX}-vwe`,
-  content: `${PREFIX}-content`,
+  koute: `${PREFIX}-koute`
-  list: `${PREFIX}-list`,
-  form: `${PREFIX}-form`,
-  gridText: `${PREFIX}-gridText`,
-  grid: `${PREFIX}-grid`,
-  koute: `${PREFIX}-koute`,
-  vwe: `${PREFIX}-vwe`
 }
 
 const Root = styled('div')((
@@ -47,55 +46,14 @@ const Root = styled('div')((
     theme
   }
 ) => ({
-  [`&.${classes.root}`]: {
-    display: 'flex'
-  },
-
-  [`& .${classes.drawer}`]: {
-    marginTop: '10em',
-    [theme.breakpoints.up('sm')]: {
-      width: drawerWidth,
-      flexShrink: 0
-    }
-  },
-
-  [`& .${classes.appBar}`]: {
-    borderTop: '2px solid #303030',
-    marginTop: '3rem',
-    [theme.breakpoints.up('sm')]: {
-      width: `calc(100% - ${drawerWidth}px)`,
-      marginLeft: drawerWidth
-    },
-    zIndex: 1
-  },
-
-  [`& .${classes.menuButton}`]: {
-    [theme.breakpoints.up('sm')]: {
-      display: 'none'
-    }
-  },
-
   [`& .${classes.toolbar}`]: theme.mixins.toolbar,
+}))
 
-  [`& .${classes.drawerPaper}`]: {
+const Stream = styled('div')((
-    borderTop: '2px solid #303030',
+  {
-    marginTop: '3rem',
+    theme
-    width: drawerWidth
+  }
-  },
+) => ({
-
-  [`& .${classes.content}`]: {
-    flexGrow: 1,
-    padding: theme.spacing(1)
-  },
-
-  [`& .${classes.list}`]: {
-    marginBottom: '6em'
-  },
-
-  [`& .${classes.form}`]: {
-    marginLeft: theme.spacing(1)
-  },
-
   [`& .${classes.koute}`]: {
     position: 'absolute',
     right: '40px',
@@ -115,15 +73,86 @@ const Root = styled('div')((
   }
 }))
 
-const drawerWidth = 240
+const getMizikFiltered = (paroles, filter) => {
+  if (paroles) {
+    const filteredTitre = paroles.filter(({attributes}) => {
+      const deburredTit = deburr(attributes.titre)
+      return deburredTit.toLowerCase().includes(deburr(filter.toLowerCase()))
+    })
 
-export default function TeksDrawer({paroles, parole, paroleId, commentaires, denyeTeks}) {
+    const filteredAlias = paroles.filter(({attributes}) => {
-  const theme = useTheme()
+      const aliasLis = attributes.artistes.data.map(({attributes}) => deburr(attributes.alias)).join(', ')
-  const [esMobilOuve, meteEsMobilOuve] = useState(false)
+      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)
+  const [mobileOpen, setMobileOpen] = useState(false)
+  const [isLoading, setIsLoading] = useState(false)
+  const [isParolesHidden, setIsParolesHidden] = useState(true)
   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) {
+      setIsLoading(true)
+      try {
+        const teks = await jwennTeks()
+        setParoles(teks)
+      } catch (error) {
+        console.log('⚠️ error', error.message)
+      }
+
+      setIsLoading(false)
+    }
+  }
+
+  const handleCloseDrawer = () => {
+    setMobileOpen(false)
+  }
+
+  const handleClick = async () => {
+    setIsLoading(true)
+    try {
+      const teks = await jwennTeks()
+      setParoles(teks)
+    } catch (error) {
+      console.log('⚠️ error', error.message)
+    }
+
+    setIsLoading(false)
+    setIsParolesHidden(false)
+  }
+
+  useEffect(() => {
+    if (paroles.length > 0) {
+      setIsParolesHidden(false)
+    }
+  }, [paroles.length])
+
+  useEffect(() => {
+    if (error || success) {
+      setOpen(true)
+    }
+  }, [error, success, setOpen])
+
   const handleClose = (event, reason) => {
     if (reason === 'clickaway') {
       return
@@ -134,35 +163,61 @@ export default function TeksDrawer({paroles, parole, paroleId, commentaires, den
     setError('')
   }
 
-  const handleDrawerToggle = () => {
+  function CustomDrawer() {
-    meteEsMobilOuve(!esMobilOuve)
+    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>
+    )
   }
 
-  const container = typeof window === 'undefined' ? undefined : () => window.document.body
-
-  useEffect(() => {
-    if (error || success) {
-      setOpen(true)
-    }
-  }, [error, success, setOpen])
-
   return (
-    <Root className={classes.root}>
+    <Box sx={{display: 'flex'}}>
       <CssBaseline />
-      <AppBar position='fixed' className={classes.appBar}>
+      <AppBar
+        position='fixed'
+        sx={{
+          width: {sm: `calc(100% - ${drawerWidth}px)`},
+          ml: {sm: `${drawerWidth}px`},
+          borderTop: '2px solid #303030',
+          marginTop: '3rem',
+          zIndex: 1
+        }}
+      >
         <Toolbar>
           <IconButton
             color='inherit'
             aria-label='open drawer'
             edge='start'
-            className={classes.menuButton}
+            sx={{mr: 2, display: {sm: 'none'}}}
-            size='large'
+            onClick={handleOpenDrawer}
-            onClick={handleDrawerToggle}
           >
             <MenuIcon />
           </IconButton>
           {parole ? (
-            <>
+            <Stream>
               <Link passHref href='/paroles'>
                 <IconButton aria-label='return' size='medium'>
                   <KeyboardBackspaceIcon style={{fontSize: '1.5em'}} />
@@ -178,7 +233,7 @@ export default function TeksDrawer({paroles, parole, paroleId, commentaires, den
                   <VweKouteAchte niOdyo parole={parole} />
                 </div>
               )}
-            </>
+            </Stream>
           ) : (
             <Typography noWrap variant='h6'>
               Derniers textes
@@ -186,42 +241,68 @@ export default function TeksDrawer({paroles, parole, paroleId, commentaires, den
           )}
         </Toolbar>
       </AppBar>
-      <nav className={classes.drawer} aria-label='mailbox folders'>
+      <Box
-        <Hidden smUp implementation='css'>
+        component='nav'
-          <Drawer
+        sx={{width: {sm: drawerWidth}, flexShrink: {sm: 0}, padding: 0}}
-            container={container}
+        aria-label='mailbox folders'
-            variant='temporary'
+      >
-            anchor={theme.direction === 'rtl' ? 'right' : 'left'}
+        <Drawer
-            open={esMobilOuve}
+          variant='temporary'
-            classes={{
+          open={mobileOpen}
-              paper: classes.drawerPaper
+          ModalProps={{
+            keepMounted: true
+          }}
+          sx={{
+            display: {xs: 'block', sm: 'none'},
+            '& .MuiDrawer-paper': {boxSizing: 'border-box', width: drawerWidth}
+          }}
+          onClose={handleCloseDrawer}
+        >
+          {isLoading ? (
+            <Box sx={{
+              position: 'absolute',
+              right: 100,
+              top: 200,
             }}
-            ModalProps={{
+            >
-              keepMounted: true
+              <CircularProgress />
-            }}
+            </Box>
-            onClose={handleDrawerToggle}
+          ) : (
-          >
+            <CustomDrawer />
-            <DrawerBar meteEsMobilOuve={meteEsMobilOuve} paroles={paroles} parole={parole} />
+          )}
-          </Drawer>
+        </Drawer>
-        </Hidden>
+        <Drawer
-        <Hidden smDown implementation='css'>
+          open
-          <Drawer
+          variant='permanent'
-            open
+          sx={{
-            classes={{
+            display: {xs: 'none', sm: 'block'},
-              paper: classes.drawerPaper
+            '& .MuiDrawer-paper': {boxSizing: 'border-box', width: drawerWidth, marginTop: '3em', borderTop: '2px solid #303030'},
-            }}
+          }}
-            variant='permanent'
+        >
-          >
+          {isLoading || isParolesHidden ? (
-            <DrawerBar paroles={paroles} parole={parole} />
+            <>
-          </Drawer>
+              <MontreTeks handleClick={handleClick} />
-        </Hidden>
+              {isLoading && (
-      </nav>
+                <Box sx={{width: '100%'}}>
-      <main className={classes.content}>
+                  <LinearProgress />
+                </Box>
+              )}
+            </>
+          ) : (
+            <CustomDrawer />
+          )}
+        </Drawer>
+      </Box>
+      <Box
+        component='main'
+        sx={{flexGrow: 1, p: 2, width: {sm: `calc(100% - ${drawerWidth}px)`}}}
+      >
+        <Toolbar />
         {parole ? (
           <Teks
             parole={parole}
             paroleId={paroleId}
-            commentaires={commentaires}
+            commentaires={parole?.commentaires.data}
             open={open}
             success={success}
             error={error}
@@ -230,26 +311,23 @@ export default function TeksDrawer({paroles, parole, paroleId, commentaires, den
             handleClose={handleClose}
           />
         ) : (
-          <Box sx={{marginTop: '5em'}}>
+          <DenyeTeks denyeTeks={denyeTeks} />
-            <DenyeTeks denyeTeks={denyeTeks} />
-          </Box>
         )}
-      </main>
+      </Box>
-    </Root>
+    </Box>
   )
 }
 
-TeksDrawer.propTypes = {
-  paroles: PropTypes.array.isRequired,
-  parole: PropTypes.object,
-  paroleId: PropTypes.number,
-  commentaires: PropTypes.array,
-  denyeTeks: PropTypes.array
-}
-
 TeksDrawer.defaultProps = {
   parole: null,
   paroleId: null,
-  commentaires: null,
+  slug: null,
   denyeTeks: null
 }
+
+TeksDrawer.propTypes = {
+  parole: PropTypes.object,
+  paroleId: PropTypes.number,
+  slug: PropTypes.string,
+  denyeTeks: PropTypes.array
+}