pawol.nu/components/teks/teks-drawer.js

import {useState} from 'react'
import PropTypes from 'prop-types'
import Link from 'next/link'

import {
  Grid,
  Toolbar,
  Typography,
  AppBar,
  CssBaseline,
  Drawer,
  Hidden,
  IconButton,
  Box,
  useMediaQuery
} 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'

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'
    }
  }
}))

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: '&#127467;&#127479;', lang: francais})
    }

    if (english) {
      langArray.push({title: 'Translation', emoji: '&#127468;&#127463;', lang: english})
    }

    if (espagnol) {
      langArray.push({title: 'Traducción', emoji: '&#127466;&#127480;', lang: espagnol})
    }
  }

  return langArray
}

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 handleDrawerToggle = () => {
    meteEsMobilOuve(!esMobilOuve)
  }

  const container = typeof window === 'undefined' ? undefined : () => window.document.body

  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' />
                )}
              </Typography>
              <Typography variant='caption'>
                {anTeks.user && (
                  <i>retranscrit 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={langArray.length === 0 && isMobile ? 'justify' : 'center'} 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>
          </>
        ) : (
          <DenyeTeks {...teks} />
        )}
      </main>
    </div>
  )
}

TeksDrawer.propTypes = {
  teks: PropTypes.array.isRequired,
  anTeks: PropTypes.object
}

TeksDrawer.defaultProps = {
  anTeks: null
}