Improve TeksDrawer

2022-05-22 22:18:43 +04:00
parent c1138b648a
commit 1308507b7d
1 changed files with 222 additions and 144 deletions
@@ -1,45 +1,44 @@
-import {useEffect, useState} from 'react'
-import PropTypes from 'prop-types'
+import {useEffect, useState, useContext} from 'react'
 import Link from 'next/link'
-
-import {
-  Toolbar,
-  Typography,
-  AppBar,
-  CssBaseline,
-  Drawer,
-  Hidden,
-  IconButton,
-  Box
-} from '@mui/material'
+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 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 DrawerBar from './drawer-bar'
+import ParolesListContext from '../../contexts/paroles-list'
+import MontreTeks from './montre-teks'
 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`,
-  content: `${PREFIX}-content`,
-  list: `${PREFIX}-list`,
-  form: `${PREFIX}-form`,
-  gridText: `${PREFIX}-gridText`,
-  grid: `${PREFIX}-grid`,
-  koute: `${PREFIX}-koute`,
-  vwe: `${PREFIX}-vwe`
+  vwe: `${PREFIX}-vwe`,
+  koute: `${PREFIX}-koute`
 }

 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}`]: {
-    borderTop: '2px solid #303030',
-    marginTop: '3rem',
-    width: drawerWidth
-  },
-
-  [`& .${classes.content}`]: {
-    flexGrow: 1,
-    padding: theme.spacing(1)
-  },
-
-  [`& .${classes.list}`]: {
-    marginBottom: '6em'
-  },
-
-  [`& .${classes.form}`]: {
-    marginLeft: theme.spacing(1)
-  },
-
+const Stream = styled('div')((
+  {
+    theme
+  }
+) => ({
  [`& .${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 theme = useTheme()
-  const [esMobilOuve, meteEsMobilOuve] = useState(false)
+    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)
+  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 = () => {
-    meteEsMobilOuve(!esMobilOuve)
+  function CustomDrawer() {
+    return (
+      <Root>
+        <FormControl sx={{marginLeft: 1}}>
+          <InputBase
+            className={classes.toolbar}
+            placeholder='Recherche...'
+            startAdornment={
+              <InputAdornment position='start'>
+                <SearchIcon />
+              </InputAdornment>
            }
-
-  const container = typeof window === 'undefined' ? undefined : () => window.document.body
-
-  useEffect(() => {
-    if (error || success) {
-      setOpen(true)
+            value={search}
+            onChange={handleSearch}
+          />
+        </FormControl>
+        <Divider />
+        <Box sx={{marginBottom: `${mobileOpen ? '' : '3em'}`}}>
+          <MizikLis
+            niAwtis
+            meteEsMobilOuve={setMobileOpen}
+            paroles={mizikFiltered}
+            slugTeksChwazi={slugTeksChwazi}
+            meteSlugTeksChwazi={meteSlugTeksChwazi}
+          />
+        </Box>
+      </Root>
+    )
  }
-  }, [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}
-            size='large'
-            onClick={handleDrawerToggle}
+            sx={{mr: 2, display: {sm: 'none'}}}
+            onClick={handleOpenDrawer}
          >
            <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'>
-        <Hidden smUp implementation='css'>
+      <Box
+        component='nav'
+        sx={{width: {sm: drawerWidth}, flexShrink: {sm: 0}, padding: 0}}
+        aria-label='mailbox folders'
+      >
        <Drawer
-            container={container}
          variant='temporary'
-            anchor={theme.direction === 'rtl' ? 'right' : 'left'}
-            open={esMobilOuve}
-            classes={{
-              paper: classes.drawerPaper
-            }}
+          open={mobileOpen}
          ModalProps={{
            keepMounted: true
          }}
-            onClose={handleDrawerToggle}
+          sx={{
+            display: {xs: 'block', sm: 'none'},
+            '& .MuiDrawer-paper': {boxSizing: 'border-box', width: drawerWidth}
+          }}
+          onClose={handleCloseDrawer}
        >
-            <DrawerBar meteEsMobilOuve={meteEsMobilOuve} paroles={paroles} parole={parole} />
+          {isLoading ? (
+            <Box sx={{
+              position: 'absolute',
+              right: 100,
+              top: 200,
+            }}
+            >
+              <CircularProgress />
+            </Box>
+          ) : (
+            <CustomDrawer />
+          )}
        </Drawer>
-        </Hidden>
-        <Hidden smDown implementation='css'>
        <Drawer
          open
-            classes={{
-              paper: classes.drawerPaper
-            }}
          variant='permanent'
+          sx={{
+            display: {xs: 'none', sm: 'block'},
+            '& .MuiDrawer-paper': {boxSizing: 'border-box', width: drawerWidth, marginTop: '3em', borderTop: '2px solid #303030'},
+          }}
        >
-            <DrawerBar paroles={paroles} parole={parole} />
+          {isLoading || isParolesHidden ? (
+            <>
+              <MontreTeks handleClick={handleClick} />
+              {isLoading && (
+                <Box sx={{width: '100%'}}>
+                  <LinearProgress />
+                </Box>
+              )}
+            </>
+          ) : (
+            <CustomDrawer />
+          )}
        </Drawer>
-        </Hidden>
-      </nav>
-      <main className={classes.content}>
+      </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} />
-          </Box>
        )}
-      </main>
-    </Root>
+      </Box>
+    </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
+}