Cédric FAMIBELLE-PRONZOLA
340 lines
9.0 KiB
JavaScript
340 lines
9.0 KiB
JavaScript
import {useEffect, useState} from 'react'
|
||
import PropTypes from 'prop-types'
|
||
import Link from 'next/link'
|
||
|
||
import {
|
||
Grid,
|
||
Toolbar,
|
||
Typography,
|
||
AppBar,
|
||
CssBaseline,
|
||
Drawer,
|
||
Hidden,
|
||
IconButton,
|
||
Box,
|
||
useMediaQuery,
|
||
Snackbar
|
||
} from '@material-ui/core'
|
||
|
||
import KeyboardBackspaceIcon from '@material-ui/icons/KeyboardBackspace'
|
||
import ExplicitIcon from '@material-ui/icons/Explicit'
|
||
|
||
import MenuIcon from '@material-ui/icons/Menu'
|
||
|
||
import {makeStyles, useTheme} from '@material-ui/core/styles'
|
||
|
||
import DrawerBar from './drawer-bar'
|
||
import DenyeTeks from './denye-teks'
|
||
import VweKouteAchte from './vwe-koute-achte'
|
||
import OkiMizik from './oki-mizik'
|
||
import Pataje from './pataje'
|
||
|
||
import MuiAlert from '@material-ui/lab/Alert'
|
||
|
||
function Alert(props) {
|
||
return <MuiAlert elevation={6} variant='filled' {...props} />
|
||
}
|
||
|
||
const drawerWidth = 240
|
||
|
||
const useStyles = makeStyles(theme => ({
|
||
root: {
|
||
display: 'flex'
|
||
},
|
||
drawer: {
|
||
marginTop: '10em',
|
||
[theme.breakpoints.up('sm')]: {
|
||
width: drawerWidth,
|
||
flexShrink: 0
|
||
}
|
||
},
|
||
appBar: {
|
||
borderTop: '2px solid #303030',
|
||
marginTop: '4.71rem',
|
||
[theme.breakpoints.up('sm')]: {
|
||
width: `calc(100% - ${drawerWidth}px)`,
|
||
marginLeft: drawerWidth
|
||
}
|
||
},
|
||
menuButton: {
|
||
[theme.breakpoints.up('sm')]: {
|
||
display: 'none'
|
||
}
|
||
},
|
||
toolbar: theme.mixins.toolbar,
|
||
drawerPaper: {
|
||
borderTop: '2px solid #303030',
|
||
marginTop: '4.71rem',
|
||
width: drawerWidth
|
||
},
|
||
content: {
|
||
flexGrow: 1,
|
||
padding: theme.spacing(3)
|
||
},
|
||
list: {
|
||
marginBottom: '6em'
|
||
},
|
||
form: {
|
||
marginLeft: theme.spacing(1)
|
||
},
|
||
text: {
|
||
marginBottom: '0.5em'
|
||
},
|
||
gridText: {
|
||
border: '2px solid grey',
|
||
borderRadius: '5px',
|
||
marginTop: '2em',
|
||
padding: '1em'
|
||
},
|
||
grid: {
|
||
marginTop: '1em'
|
||
},
|
||
koute: {
|
||
position: 'absolute',
|
||
right: '1px',
|
||
top: '8px',
|
||
[theme.breakpoints.up('sm')]: {
|
||
top: '10px'
|
||
}
|
||
},
|
||
vwe: {
|
||
position: 'absolute',
|
||
right: '60px',
|
||
top: '8px',
|
||
[theme.breakpoints.up('sm')]: {
|
||
top: '10px'
|
||
}
|
||
},
|
||
pataje: {
|
||
position: 'absolute',
|
||
top: '140px',
|
||
left: '10px',
|
||
[theme.breakpoints.up('sm')]: {
|
||
left: '275px'
|
||
}
|
||
}
|
||
}))
|
||
|
||
const formatJsonString = stringToFormat => {
|
||
return stringToFormat.split('\n').map((string, index) => <div key={index}>{`${string}`}<br /></div>) // eslint-disable-line react/no-array-index-key
|
||
}
|
||
|
||
const langToArray = anTeks => {
|
||
const langArray = []
|
||
|
||
if (anTeks && anTeks.tradiksyon) {
|
||
const {francais, english, espagnol} = anTeks.tradiksyon
|
||
|
||
if (francais) {
|
||
langArray.push({title: 'Traduction', emoji: '🇫🇷', lang: francais})
|
||
}
|
||
|
||
if (english) {
|
||
langArray.push({title: 'Translation', emoji: '🇬🇧', lang: english})
|
||
}
|
||
|
||
if (espagnol) {
|
||
langArray.push({title: 'Traducción', emoji: '🇪🇸', 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'
|
||
}
|
||
}
|
||
|
||
export default function TeksDrawer({teks, anTeks}) {
|
||
const isMobile = useMediaQuery('(max-width:800px)')
|
||
const langArray = langToArray(anTeks)
|
||
const classes = useStyles()
|
||
const theme = useTheme()
|
||
const [esMobilOuve, meteEsMobilOuve] = useState(false)
|
||
const [open, setOpen] = useState(false)
|
||
const [error, setError] = useState('')
|
||
const [success, setSuccess] = useState('')
|
||
|
||
const handleClose = (event, reason) => {
|
||
if (reason === 'clickaway') {
|
||
return
|
||
}
|
||
|
||
setOpen(false)
|
||
setSuccess('')
|
||
setError('')
|
||
}
|
||
|
||
const handleDrawerToggle = () => {
|
||
meteEsMobilOuve(!esMobilOuve)
|
||
}
|
||
|
||
const container = typeof window === 'undefined' ? undefined : () => window.document.body
|
||
|
||
useEffect(() => {
|
||
if (error || success) {
|
||
setOpen(true)
|
||
}
|
||
}, [error, success, setOpen])
|
||
|
||
return (
|
||
<div className={classes.root}>
|
||
<CssBaseline />
|
||
<AppBar position='fixed' className={classes.appBar}>
|
||
<Toolbar>
|
||
<IconButton
|
||
color='inherit'
|
||
aria-label='open drawer'
|
||
edge='start'
|
||
className={classes.menuButton}
|
||
onClick={handleDrawerToggle}
|
||
>
|
||
<MenuIcon />
|
||
</IconButton>
|
||
{anTeks ? (
|
||
<>
|
||
<Link href='/teks'>
|
||
<IconButton aria-label='return' size='medium'>
|
||
<KeyboardBackspaceIcon style={{fontSize: '1.5em'}} />
|
||
</IconButton>
|
||
</Link>
|
||
{anTeks.lyen && anTeks.lyen.length > 0 && (
|
||
<div className={classes.vwe}>
|
||
<VweKouteAchte niVideyo anTeks={anTeks} />
|
||
</div>
|
||
)}
|
||
{anTeks.kouteyAchtey && anTeks.kouteyAchtey.length > 0 && (
|
||
<div className={classes.koute}>
|
||
<VweKouteAchte niOdyo anTeks={anTeks} />
|
||
</div>
|
||
)}
|
||
</>
|
||
) : (
|
||
<Typography noWrap variant='h6'>
|
||
Dènyé Tèks
|
||
</Typography>
|
||
)}
|
||
</Toolbar>
|
||
</AppBar>
|
||
<nav className={classes.drawer} aria-label='mailbox folders'>
|
||
<Hidden smUp implementation='css'>
|
||
<Drawer
|
||
container={container}
|
||
variant='temporary'
|
||
anchor={theme.direction === 'rtl' ? 'right' : 'left'}
|
||
open={esMobilOuve}
|
||
classes={{
|
||
paper: classes.drawerPaper
|
||
}}
|
||
ModalProps={{
|
||
keepMounted: true
|
||
}}
|
||
onClose={handleDrawerToggle}
|
||
>
|
||
<DrawerBar meteEsMobilOuve={meteEsMobilOuve} teks={teks} anTeks={anTeks} />
|
||
</Drawer>
|
||
</Hidden>
|
||
<Hidden xsDown implementation='css'>
|
||
<Drawer
|
||
open
|
||
classes={{
|
||
paper: classes.drawerPaper
|
||
}}
|
||
variant='permanent'
|
||
>
|
||
<DrawerBar teks={teks} anTeks={anTeks} />
|
||
</Drawer>
|
||
</Hidden>
|
||
</nav>
|
||
<main className={classes.content}>
|
||
{anTeks ? (
|
||
<>
|
||
<Box align='center'>
|
||
<Typography noWrap style={{marginTop: '0.8em'}} variant='h4'>
|
||
{anTeks.tit}
|
||
{anTeks.eksplisit && (
|
||
<ExplicitIcon style={{marginLeft: 10}} color='secondary' />
|
||
)}
|
||
<div className={classes.pataje}>
|
||
<Pataje teks={anTeks} setError={setError} setSuccess={setSuccess} />
|
||
</div>
|
||
</Typography>
|
||
<Typography variant='caption'>
|
||
{anTeks.user && (
|
||
<i>texte soumis par {anTeks.user.username}</i>
|
||
)}
|
||
</Typography>
|
||
</Box>
|
||
{anTeks.okiMizikID && (
|
||
<OkiMizik id={anTeks.okiMizikID} />
|
||
)}
|
||
<Grid container justify='center' 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, emoji, lang}) => (
|
||
<Grid key={title} item xs={12} md={6}>
|
||
<div className={classes.gridText}>
|
||
<Typography align='center' className={classes.text} variant='h4'>
|
||
<span dangerouslySetInnerHTML={{__html: emoji}} /> {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} />
|
||
)}
|
||
</main>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
TeksDrawer.propTypes = {
|
||
teks: PropTypes.array.isRequired,
|
||
anTeks: PropTypes.object
|
||
}
|
||
|
||
TeksDrawer.defaultProps = {
|
||
anTeks: null
|
||
}
|