diff --git a/components/teks/teks-drawer.js b/components/teks/teks-drawer.js
index 8f1f0ac..21d2401 100644
--- a/components/teks/teks-drawer.js
+++ b/components/teks/teks-drawer.js
@@ -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 (
+
+
+
+
+
+ }
+ value={search}
+ onChange={handleSearch}
+ />
+
+
+
+
+
+
+ )
}
- const container = typeof window === 'undefined' ? undefined : () => window.document.body
-
- useEffect(() => {
- if (error || success) {
- setOpen(true)
- }
- }, [error, success, setOpen])
-
return (
-
+
-
+
{parole ? (
- <>
+
@@ -178,7 +233,7 @@ export default function TeksDrawer({paroles, parole, paroleId, commentaires, den
)}
-
+
) : (
Derniers textes
@@ -186,42 +241,68 @@ export default function TeksDrawer({paroles, parole, paroleId, commentaires, den
)}
-
-
+ >
+
+
+ ) : (
+
+ )}
+
+
+ {isLoading || isParolesHidden ? (
+ <>
+
+ {isLoading && (
+
+
+
+ )}
+
+ ) : (
+
+ )}
+
+
+
+
{parole ? (
) : (
-
-
-
+
)}
-
-
+
+
)
}
-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
+}