Makes TeksDrawer permanent

components/teks/drawer-bar.js

@@ -1,49 +1,20 @@
+'use client'
+
 import {useState} from 'react'
-import {styled} from '@mui/material/styles'
+import Box from '@mui/material/Box'
 import PropTypes from 'prop-types'
 import {union, deburr} from 'lodash'
 import useMediaQuery from '@mui/material/useMediaQuery'
 
-import {
-  Divider,
-  FormControl,
-  InputAdornment,
-  InputBase
-} from '@mui/material'
+import Divider from '@mui/material/Divider'
+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 MizikLis from '../awtis/mizik-lis'
 
-const PREFIX = 'drawer-bar'
-
-const classes = {
-  toolbar: `${PREFIX}-toolbar`,
-  list: `${PREFIX}-list`,
-  form: `${PREFIX}-form`,
-  text: `${PREFIX}-text`
-}
-
-const Root = styled('div')((
-  {
-    theme
-  }
-) => ({
-  [`& .${classes.toolbar}`]: theme.mixins.toolbar,
-
-  [`& .${classes.list}`]: {
-    marginBottom: '3em'
-  },
-
-  [`& .${classes.form}`]: {
-    marginLeft: theme.spacing(1)
-  },
-
-  [`& .${classes.text}`]: {
-    marginBottom: '0.5em'
-  }
-}))
-
 const getMizikFiltered = (paroles, filter) => {
   if (paroles) {
     const filteredTitre = paroles.filter(({attributes}) => {
@@ -60,10 +31,9 @@ const getMizikFiltered = (paroles, filter) => {
   }
 }
 
-export default function DrawerBar({meteEsMobilOuve, paroles, slug}) {
+export default function DrawerBar({paroles}) {
   const isMobile = useMediaQuery('(max-width:600px)')
   const [search, setSearch] = useState('')
-  const [slugTeksChwazi, meteSlugTeksChwazi] = useState(slug)
 
   const mizikFiltered = getMizikFiltered(paroles, search)
 
@@ -74,10 +44,10 @@ export default function DrawerBar({meteEsMobilOuve, paroles, slug}) {
   }
 
   return (
-    <Root className='search'>
-      <FormControl style={{marginTop: `${isMobile ? '3em' : 0}`}} className={classes.form}>
+    <Box sx={{height: '100%'}}>
+      <FormControl>
         <InputBase
-          className={classes.toolbar}
+          sx={{paddingBlock: 2}}
           placeholder='Recherche...'
           startAdornment={
             <InputAdornment position='start'>
@@ -89,26 +59,16 @@ export default function DrawerBar({meteEsMobilOuve, paroles, slug}) {
         />
       </FormControl>
       <Divider />
-      <div style={{marginBottom: `${isMobile ? 0 : '3em'}`}} className={classes.list}>
+      <Box style={{marginBottom: `${isMobile ? 0 : '3em'}`, height: `calc(100% - ${isMobile ? '65px' : '115px'})`}}>
         <MizikLis
           niAwtis
-          meteEsMobilOuve={meteEsMobilOuve}
           paroles={mizikFiltered}
-          slugTeksChwazi={slugTeksChwazi}
-          meteSlugTeksChwazi={meteSlugTeksChwazi}
         />
-      </div>
-    </Root>
+      </Box>
+    </Box>
   )
 }
 
 DrawerBar.propTypes = {
-  meteEsMobilOuve: PropTypes.func,
-  paroles: PropTypes.array.isRequired,
-  slug: PropTypes.string
-}
-
-DrawerBar.defaultProps = {
-  meteEsMobilOuve: null,
-  slug: null
+  paroles: PropTypes.array.isRequired
 }

components/teks/teks-drawer.js

@@ -1,8 +1,9 @@
-import {useEffect, useState, useContext} from 'react'
+'use client'
+
+import {useState, useEffect, forwardRef} from 'react'
 import Link from 'next/link'
 import {useParams} from 'next/navigation'
 import PropTypes from 'prop-types'
-import {styled} from '@mui/material/styles'
 import AppBar from '@mui/material/AppBar'
 import Box from '@mui/material/Box'
 import CssBaseline from '@mui/material/CssBaseline'
@@ -10,100 +11,28 @@ 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 LinearProgress from '@mui/material/LinearProgress'
-import CircularProgress from '@mui/material/CircularProgress'
-
+import MuiAlert from '@mui/material/Alert'
+import Snackbar from '@mui/material/Snackbar'
 import KeyboardBackspaceIcon from '@mui/icons-material/KeyboardBackspace'
-
-import {jwennTeks} from '../../lib/oki-api'
-
-import ParolesListContext from '../../contexts/paroles-list'
-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'
+import Pataje from './pataje'
 
 const drawerWidth = 240
 
-const PREFIX = 'drawer-bar'
+const Alert = forwardRef(function Alert(props, ref) {
+  return <MuiAlert ref={ref} elevation={6} variant='filled' {...props} />
+})
 
-const classes = {
-  vwe: `${PREFIX}-vwe`,
-  koute: `${PREFIX}-koute`
-}
-
-const Stream = styled('div')((
-  {
-    theme
-  }
-) => ({
-  [`& .${classes.koute}`]: {
-    position: 'absolute',
-    right: '40px',
-    top: '8px',
-    [theme.breakpoints.up('sm')]: {
-      top: '10px'
-    }
-  },
-
-  [`& .${classes.vwe}`]: {
-    position: 'absolute',
-    right: '90px',
-    top: '8px',
-    [theme.breakpoints.up('sm')]: {
-      top: '10px'
-    }
-  }
-}))
-
-export default function TeksDrawer({parole, paroleId, slug, denyeTeks}) {
-  const [open, setOpen] = useState(false)
-  const {paroles, setParoles} = useContext(ParolesListContext)
+export default function TeksDrawer({paroles}) {
+  const {slug} = useParams()
   const [mobileOpen, setMobileOpen] = useState(false)
-  const [isLoading, setIsLoading] = useState(false)
-  const [isParolesHidden, setIsParolesHidden] = useState(true)
+  const [open, setOpen] = useState(false)
   const [error, setError] = useState('')
   const [success, setSuccess] = useState('')
 
-  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])
+  const parole = paroles.find(({attributes}) => attributes.slug === slug)
 
   useEffect(() => {
     if (error || success) {
@@ -121,6 +50,14 @@ export default function TeksDrawer({parole, paroleId, slug, denyeTeks}) {
     setError('')
   }
 
+  const handleOpenDrawer = async () => {
+    setMobileOpen(true)
+  }
+
+  const handleCloseDrawer = () => {
+    setMobileOpen(false)
+  }
+
   return (
     <Box sx={{display: 'flex'}}>
       <CssBaseline />
@@ -135,37 +72,41 @@ export default function TeksDrawer({parole, paroleId, slug, denyeTeks}) {
         }}
       >
         <Toolbar>
-          <IconButton
-            color='inherit'
-            aria-label='open drawer'
-            edge='start'
-            sx={{mr: 2, display: {sm: 'none'}}}
-            onClick={handleOpenDrawer}
-          >
-            <MenuIcon />
-          </IconButton>
-          {parole ? (
-            <Stream>
+          <Box sx={{display: 'flex', alignContent: 'center'}}>
+            <IconButton
+              color='inherit'
+              aria-label='open drawer'
+              edge='start'
+              sx={{display: {sm: 'none'}}}
+              onClick={handleOpenDrawer}
+            >
+              <MenuIcon />
+            </IconButton>
+            {parole && (
               <Link passHref href='/paroles'>
                 <IconButton aria-label='return' size='medium'>
                   <KeyboardBackspaceIcon style={{fontSize: '1.5em'}} />
                 </IconButton>
               </Link>
-              {parole.streamVideo && parole.streamVideo.length > 0 && (
-                <div className={classes.vwe}>
-                  <VweKouteAchte niVideyo parole={parole} />
-                </div>
+            )}
+          </Box>
+          {parole && (
+            <Box sx={{display: 'flex', position: 'relative', top: '-20px'}}>
+              <Box>
+                <Pataje parole={parole.attributes} setError={setError} setSuccess={setSuccess} />
+              </Box>
+
+              {parole.attributes.streamVideo && parole.attributes.streamVideo.length > 0 && (
+                <Box>
+                  <VweKouteAchte niVideyo parole={parole.attributes} />
+                </Box>
               )}
-              {parole.streamAudio && parole.streamAudio.length > 0 && (
-                <div className={classes.koute}>
-                  <VweKouteAchte niOdyo parole={parole} />
-                </div>
+              {parole.attributes.streamAudio && parole.attributes.streamAudio.length > 0 && (
+                <Box>
+                  <VweKouteAchte niOdyo parole={parole.attributes} />
+                </Box>
               )}
-            </Stream>
-          ) : (
-            <Typography noWrap variant='h6'>
-              Dernières paroles
-            </Typography>
+            </Box>
           )}
         </Toolbar>
       </AppBar>
@@ -186,18 +127,7 @@ export default function TeksDrawer({parole, paroleId, slug, denyeTeks}) {
           }}
           onClose={handleCloseDrawer}
         >
-          {isLoading ? (
-            <Box sx={{
-              position: 'absolute',
-              right: 100,
-              top: 200,
-            }}
-            >
-              <CircularProgress />
-            </Box>
-          ) : (
-            <DrawerBar meteEsMobilOuve={setMobileOpen} paroles={paroles} slug={slug} />
-          )}
+          <DrawerBar meteEsMobilOuve={setMobileOpen} paroles={paroles} />
         </Drawer>
         <Drawer
           open
@@ -207,55 +137,27 @@ export default function TeksDrawer({parole, paroleId, slug, denyeTeks}) {
             '& .MuiDrawer-paper': {boxSizing: 'border-box', width: drawerWidth, marginTop: '3em', borderTop: '2px solid #303030'},
           }}
         >
-          {isLoading || isParolesHidden ? (
-            <>
-              <MontreTeks handleClick={handleClick} />
-              {isLoading && (
-                <Box sx={{width: '100%'}}>
-                  <LinearProgress />
-                </Box>
-              )}
-            </>
-          ) : (
-            <DrawerBar meteEsMobilOuve={setMobileOpen} paroles={paroles} slug={slug} />
-          )}
+          <DrawerBar meteEsMobilOuve={setMobileOpen} paroles={paroles} />
         </Drawer>
       </Box>
-      <Box
-        component='main'
-        sx={{flexGrow: 1, p: 2, width: {sm: `calc(100% - ${drawerWidth}px)`}}}
-      >
-        <Toolbar />
-        {parole ? (
-          <Teks
-            parole={parole}
-            paroleId={paroleId}
-            commentaires={parole?.commentaires.data}
-            open={open}
-            success={success}
-            error={error}
-            setSuccess={setSuccess}
-            setError={setError}
-            handleClose={handleClose}
-          />
-        ) : (
-          <DenyeTeks denyeTeks={denyeTeks} />
-        )}
-      </Box>
+      {success && (
+        <Snackbar open={open} autoHideDuration={3000} onClose={handleClose}>
+          <Alert severity='success' onClose={handleClose}>
+            <strong>{success}</strong>
+          </Alert>
+        </Snackbar>
+      )}
+      {error && (
+        <Snackbar open={open} autoHideDuration={3000} onClose={handleClose}>
+          <Alert severity='error' onClose={handleClose}>
+            <strong>Une erreur s’est produite</strong> : <i>{error.message}</i>
+          </Alert>
+        </Snackbar>
+      )}
     </Box>
   )
 }
 
-TeksDrawer.defaultProps = {
-  parole: null,
-  paroleId: null,
-  slug: null,
-  denyeTeks: null
-}
-
 TeksDrawer.propTypes = {
-  parole: PropTypes.object,
-  paroleId: PropTypes.number,
-  slug: PropTypes.string,
-  denyeTeks: PropTypes.array
+  paroles: PropTypes.array,
 }