Create Teks component and use it in TeksDraw

components/teks/teks-drawer.js

@@ -1,48 +1,31 @@
-import {useEffect, useState, forwardRef} from 'react'
+import {useEffect, useState} from 'react'
 import PropTypes from 'prop-types'
 import Link from 'next/link'
-import {useSession} from 'next-auth/client'
 
 import {
-  Grid,
   Toolbar,
   Typography,
   AppBar,
   CssBaseline,
   Drawer,
   Hidden,
-  IconButton,
+  IconButton
-  Box,
-  useMediaQuery,
-  Snackbar,
-  Tooltip,
-  Zoom
 } from '@mui/material'
 
 import KeyboardBackspaceIcon from '@mui/icons-material/KeyboardBackspace'
-import ExplicitIcon from '@mui/icons-material/Explicit'
 
 import MenuIcon from '@mui/icons-material/Menu'
 
 import {useTheme, styled} from '@mui/material/styles'
 
-import MuiAlert from '@mui/material/Alert'
-import {formatJsonString} from '../../lib/utils/format'
-
-import VweKomante from '../komante/vwe-komante'
-import Dekoneksyon from '../sesyon/dekoneksyon'
-
 import DrawerBar from './drawer-bar'
 import DenyeTeks from './denye-teks'
 import VweKouteAchte from './vwe-koute-achte'
-import OkiMizik from './oki-mizik'
+import Teks from './teks'
-import Pataje from './pataje'
-import EntegreMizik from './entegre-mizik'
 
 const PREFIX = 'teks-drawer'
 
 const classes = {
-  tooltip: `${PREFIX}-tooltip`,
   root: `${PREFIX}-root`,
   drawer: `${PREFIX}-drawer`,
   appBar: `${PREFIX}-appBar`,
@@ -52,12 +35,10 @@ const classes = {
   content: `${PREFIX}-content`,
   list: `${PREFIX}-list`,
   form: `${PREFIX}-form`,
-  text: `${PREFIX}-text`,
   gridText: `${PREFIX}-gridText`,
   grid: `${PREFIX}-grid`,
   koute: `${PREFIX}-koute`,
-  vwe: `${PREFIX}-vwe`,
+  vwe: `${PREFIX}-vwe`
-  pataje: `${PREFIX}-pataje`
 }
 
 const Root = styled('div')((
@@ -114,21 +95,6 @@ const Root = styled('div')((
     marginLeft: theme.spacing(1)
   },
 
-  [`& .${classes.text}`]: {
-    marginBottom: '0.5em'
-  },
-
-  [`& .${classes.gridText}`]: {
-    border: '2px solid grey',
-    borderRadius: '5px',
-    marginTop: '2em',
-    padding: '1em'
-  },
-
-  [`& .${classes.grid}`]: {
-    marginTop: '1em'
-  },
-
   [`& .${classes.koute}`]: {
     position: 'absolute',
     right: '40px',
@@ -145,74 +111,12 @@ const Root = styled('div')((
     [theme.breakpoints.up('sm')]: {
       top: '10px'
     }
-  },
-
-  [`& .${classes.pataje}`]: {
-    position: 'fixed',
-    top: '59px',
-    left: '110px',
-    zIndex: 2,
-    [theme.breakpoints.up('sm')]: {
-      top: '62px',
-      left: '340px'
-    }
   }
 }))
 
-const Alert = forwardRef(function Alert(props, ref) {
-  return <MuiAlert ref={ref} elevation={6} variant='filled' {...props} />
-})
-
 const drawerWidth = 240
 
-const langToArray = anTeks => {
-  const langArray = []
-
-  if (anTeks && anTeks.tradiksyon) {
-    const {francais, english, espagnol} = anTeks.tradiksyon
-
-    if (francais) {
-      langArray.push({title: 'Traduction', flag: 'fr', lang: francais})
-    }
-
-    if (english) {
-      langArray.push({title: 'Translation', flag: 'en', lang: english})
-    }
-
-    if (espagnol) {
-      langArray.push({title: 'Traducción', flag: 'es', lang: espagnol})
-    }
-  }
-
-  return langArray
-}
-
-const alignTeks = (langArray, isMobile) => {
-  if (langArray.length > 0 && !isMobile) {
-    return 'justify'
-  }
-
-  if (langArray.length > 0 && isMobile) {
-    return 'justify'
-  }
-
-  if (langArray.length === 0 && isMobile) {
-    return 'justify'
-  }
-
-  if (langArray.length === 0 && !isMobile) {
-    return 'center'
-  }
-}
-
-const ExplicitTooltip = Tooltip
-
 export default function TeksDrawer({teks, anTeks, komante}) {
-  const [session] = useSession()
-
-  const isMobile = useMediaQuery('(max-width:800px)')
-  const langArray = langToArray(anTeks)
-
   const theme = useTheme()
   const [esMobilOuve, meteEsMobilOuve] = useState(false)
   const [open, setOpen] = useState(false)
@@ -313,106 +217,16 @@ export default function TeksDrawer({teks, anTeks, komante}) {
       </nav>
       <main className={classes.content}>
         {anTeks ? (
-          <>
+          <Teks
-            <div className={classes.pataje}>
+            anTeks={anTeks}
-              <Pataje teks={anTeks} setError={setError} setSuccess={setSuccess} />
+            komante={komante}
-            </div>
+            open={open}
-            <Box sx={{textAlign: 'center', marginTop: 8}}>
+            success={success}
-              <Typography style={{marginTop: '0.8em'}} variant='h4' display='block'>
+            error={error}
-                <Typography gutterBottom variant='h6'>
+            setSuccess={setSuccess}
-                  {anTeks.awtis.map(a => a.alias).join(', ')}
+            setError={setError}
-                </Typography>
+            handleClose={handleClose}
-                <Typography variant='h5'>
+          />
-                  {anTeks.tit}
-                  {anTeks.eksplisit && (
-                    <ExplicitTooltip
-                      title='Explicit Lyrics'
-                      placement='bottom'
-                      TransitionComponent={Zoom}
-                      classes={{
-                        tooltip: classes.tooltip
-                      }}
-                    >
-                      <ExplicitIcon style={{marginLeft: 10}} color='secondary' />
-                    </ExplicitTooltip>
-                  )}
-                </Typography>
-                <Grid container alignItems='center' justifyContent='center'>
-                  {komante && (
-                    <VweKomante komante={komante} teks={anTeks} />
-                  )}
-                  {session && (
-                    <Dekoneksyon tooltipPlacement='bottom' />
-                  )}
-                </Grid>
-              </Typography>
-              {anTeks.user && (
-                <Typography style={{marginBottom: '1.5em'}} display='block' variant='caption'>
-                  <i>texte soumis par {anTeks.user.username}</i>
-                </Typography>
-              )}
-            </Box>
-            {(anTeks.okiMizikID || anTeks.kouteyAchtey.length > 0) && (
-              <Box sx={{textAlign: 'center'}}>
-                <EntegreMizik anTeks={anTeks} isMobile={isMobile} />
-              </Box>
-            )}
-            {anTeks.okiMizikID && (
-              <OkiMizik id={anTeks.okiMizikID} />
-            )}
-            <Grid container justifyContent='start' spacing={1}>
-              <Grid item xs={12} md={langArray.length > 0 ? 6 : null}>
-                <div className={classes.gridText}>
-                  <Typography align='center' className={classes.text} variant='h4'>
-                    Transcription
-                  </Typography>
-                  <Typography paragraph align={alignTeks(langArray, isMobile)} component='span'>
-                    {formatJsonString(anTeks.transkripsyon)}
-                  </Typography>
-                </div>
-              </Grid>
-              {langArray.map(({title, flag, lang}) => (
-                <Grid key={title} item xs={12} md={6}>
-                  <div className={classes.gridText}>
-                    <Typography align='center' className={classes.text} variant='h4'>
-                      {flag === 'fr' && (
-                        <span>
-                          🇫🇷
-                        </span>
-                      )}
-                      {flag === 'en' && (
-                        <span>
-                          🇬🇧
-                        </span>
-                      )}
-                      {flag === 'es' && (
-                        <span>
-                          🇪🇸
-                        </span>
-                      )} {title}
-                    </Typography>
-                    <Typography paragraph align='justify' component='span'>
-                      {formatJsonString(lang)}
-                    </Typography>
-                  </div>
-                </Grid>
-              ))}
-            </Grid>
-            {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>
-            )}
-          </>
         ) : (
           <DenyeTeks {...teks} />
         )}

components/teks/teks.js

@@ -0,0 +1,241 @@
+import {forwardRef} from 'react'
+import PropTypes from 'prop-types'
+import {
+  Box,
+  Grid,
+  Snackbar,
+  Typography,
+  Tooltip,
+  Zoom,
+  useMediaQuery
+} from '@mui/material'
+import {styled} from '@mui/material/styles'
+import MuiAlert from '@mui/material/Alert'
+import ExplicitIcon from '@mui/icons-material/Explicit'
+import {useSession} from 'next-auth/client'
+
+import {formatJsonString} from '../../lib/utils/format'
+
+import VweKomante from '../komante/vwe-komante'
+import Dekoneksyon from '../sesyon/dekoneksyon'
+
+import EntegreMizik from './entegre-mizik'
+import OkiMizik from './oki-mizik'
+import Pataje from './pataje'
+
+const PREFIX = 'teks'
+
+const classes = {
+  root: `${PREFIX}-root`,
+  tooltip: `${PREFIX}-tooltip`,
+  text: `${PREFIX}-text`,
+  gridText: `${PREFIX}-gridText`,
+  grid: `${PREFIX}-grid`,
+  koute: `${PREFIX}-koute`,
+  vwe: `${PREFIX}-vwe`,
+  pataje: `${PREFIX}-pataje`
+}
+
+const Root = styled('div')((
+  {
+    theme
+  }
+) => ({
+  [`& .${classes.text}`]: {
+    marginBottom: '0.5em'
+  },
+
+  [`& .${classes.gridText}`]: {
+    border: '2px solid grey',
+    borderRadius: '5px',
+    marginTop: '2em',
+    padding: '1em'
+  },
+
+  [`& .${classes.grid}`]: {
+    marginTop: '1em'
+  },
+
+  [`& .${classes.pataje}`]: {
+    position: 'fixed',
+    top: '59px',
+    left: '110px',
+    zIndex: 2,
+    [theme.breakpoints.up('sm')]: {
+      top: '62px',
+      left: '340px'
+    }
+  }
+}))
+
+const langToArray = anTeks => {
+  const langArray = []
+
+  if (anTeks && anTeks.tradiksyon) {
+    const {francais, english, espagnol} = anTeks.tradiksyon
+
+    if (francais) {
+      langArray.push({title: 'Traduction', flag: 'fr', lang: francais})
+    }
+
+    if (english) {
+      langArray.push({title: 'Translation', flag: 'en', lang: english})
+    }
+
+    if (espagnol) {
+      langArray.push({title: 'Traducción', flag: 'es', lang: espagnol})
+    }
+  }
+
+  return langArray
+}
+
+const alignTeks = (langArray, isMobile) => {
+  if (langArray.length > 0 && !isMobile) {
+    return 'justify'
+  }
+
+  if (langArray.length > 0 && isMobile) {
+    return 'justify'
+  }
+
+  if (langArray.length === 0 && isMobile) {
+    return 'justify'
+  }
+
+  if (langArray.length === 0 && !isMobile) {
+    return 'center'
+  }
+}
+
+const Alert = forwardRef(function Alert(props, ref) {
+  return <MuiAlert ref={ref} elevation={6} variant='filled' {...props} />
+})
+
+const ExplicitTooltip = Tooltip
+
+export default function Teks({anTeks, komante, open, success, error, setSuccess, setError, handleClose}) {
+  const isMobile = useMediaQuery('(max-width:800px)')
+  const [session] = useSession()
+  const langArray = langToArray(anTeks)
+
+  return (
+    <Root>
+      <div className={classes.pataje}>
+        <Pataje teks={anTeks} setError={setError} setSuccess={setSuccess} />
+      </div>
+      <Box sx={{textAlign: 'center', marginTop: 8}}>
+        <Typography style={{marginTop: '0.8em'}} variant='h4' display='block'>
+          <Typography gutterBottom variant='h6'>
+            {anTeks.awtis.map(a => a.alias).join(', ')}
+          </Typography>
+          <Typography variant='h5'>
+            {anTeks.tit}
+            {anTeks.eksplisit && (
+              <ExplicitTooltip
+                title='Explicit Lyrics'
+                placement='bottom'
+                TransitionComponent={Zoom}
+                classes={{
+                  tooltip: classes.tooltip
+                }}
+              >
+                <ExplicitIcon style={{marginLeft: 10}} color='secondary' />
+              </ExplicitTooltip>
+            )}
+          </Typography>
+          <Grid container alignItems='center' justifyContent='center'>
+            {komante && (
+              <VweKomante komante={komante} teks={anTeks} />
+            )}
+            {session && (
+              <Dekoneksyon tooltipPlacement='bottom' />
+            )}
+          </Grid>
+        </Typography>
+        {anTeks.user && (
+          <Typography style={{marginBottom: '1.5em'}} display='block' variant='caption'>
+            <i>texte soumis par {anTeks.user.username}</i>
+          </Typography>
+        )}
+      </Box>
+      {(anTeks.okiMizikID || anTeks.kouteyAchtey.length > 0) && (
+        <Box sx={{textAlign: 'center'}}>
+          <EntegreMizik anTeks={anTeks} isMobile={isMobile} />
+        </Box>
+      )}
+      {anTeks.okiMizikID && (
+        <OkiMizik id={anTeks.okiMizikID} />
+      )}
+      <Grid container justifyContent='start' spacing={1}>
+        <Grid item xs={12} md={langArray.length > 0 ? 6 : null}>
+          <div className={classes.gridText}>
+            <Typography align='center' className={classes.text} variant='h4'>
+              Transcription
+            </Typography>
+            <Typography paragraph align={alignTeks(langArray, isMobile)} component='span'>
+              {formatJsonString(anTeks.transkripsyon)}
+            </Typography>
+          </div>
+        </Grid>
+        {langArray.map(({title, flag, lang}) => (
+          <Grid key={title} item xs={12} md={6}>
+            <div className={classes.gridText}>
+              <Typography align='center' className={classes.text} variant='h4'>
+                {flag === 'fr' && (
+                  <span>
+                    🇫🇷
+                  </span>
+                )}
+                {flag === 'en' && (
+                  <span>
+                    🇬🇧
+                  </span>
+                )}
+                {flag === 'es' && (
+                  <span>
+                    🇪🇸
+                  </span>
+                )} {title}
+              </Typography>
+              <Typography paragraph align='justify' component='span'>
+                {formatJsonString(lang)}
+              </Typography>
+            </div>
+          </Grid>
+        ))}
+      </Grid>
+      {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>
+      )}
+    </Root>
+  )
+}
+
+Teks.propTypes = {
+  anTeks: PropTypes.object.isRequired,
+  komante: PropTypes.array,
+  open: PropTypes.bool.isRequired,
+  success: PropTypes.string,
+  error: PropTypes.string,
+  setSuccess: PropTypes.func.isRequired,
+  setError: PropTypes.func.isRequired,
+  handleClose: PropTypes.func.isRequired
+}
+
+Teks.defaultProps = {
+  komante: null,
+  success: '',
+  error: ''
+}