Make '/teks' dymamic & add Drawer components

2020-12-13 23:20:07 +01:00
parent bdff3dae6a
commit 5b9a11a730
8 changed files with 422 additions and 34 deletions
@@ -0,0 +1,200 @@
+import {useState} from 'react'
+import PropTypes from 'prop-types'
+import Link from 'next/link'
+
+import {
+  Grid,
+  Toolbar,
+  Typography,
+  AppBar,
+  CssBaseline,
+  Drawer,
+  Hidden,
+  IconButton
+} from '@material-ui/core'
+
+import KeyboardBackspaceIcon from '@material-ui/icons/KeyboardBackspace'
+
+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'
+
+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: {
+    marginRight: theme.spacing(2),
+    [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'
+  },
+  button: {
+    marginRight: '0.5em'
+  },
+  gridText: {
+    border: '1px dashed grey',
+    borderRadius: '5px',
+    marginTop: '2em',
+    marginInline: '2px'
+  },
+  grid: {
+    marginTop: '1em'
+  }
+}))
+
+const formatJsonString = stringToFormat => {
+  return stringToFormat.split('\n').map((string, index) => <div key={index}>{`${string}`}<br /></div>) // eslint-disable-line react/no-array-index-key
+}
+
+export default function TeksDrawer({miziks, mizik}) {
+  const teks = mizik ? mizik[0] : null
+  const classes = useStyles()
+  const theme = useTheme()
+  const [mobileOpen, setMobileOpen] = useState(false)
+
+  const handleDrawerToggle = () => {
+    setMobileOpen(!mobileOpen)
+  }
+
+  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>
+          {teks ? (
+            <>
+              <Link href='/teks'>
+                <IconButton aria-label='return' className={classes.button} size='small'>
+                  <KeyboardBackspaceIcon />
+                </IconButton>
+              </Link>
+              <Typography noWrap variant='h6'>
+                {teks.titre}
+              </Typography>
+            </>
+          ) : (
+            <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={mobileOpen}
+            classes={{
+              paper: classes.drawerPaper
+            }}
+            ModalProps={{
+              keepMounted: true
+            }}
+            onClose={handleDrawerToggle}
+          >
+            <DrawerBar setMobileOpen={setMobileOpen} miziks={miziks} mizik={mizik} />
+          </Drawer>
+        </Hidden>
+        <Hidden xsDown implementation='css'>
+          <Drawer
+            open
+            classes={{
+              paper: classes.drawerPaper
+            }}
+            variant='permanent'
+          >
+            <DrawerBar miziks={miziks} mizik={mizik} />
+          </Drawer>
+        </Hidden>
+      </nav>
+      <main className={classes.content}>
+        {teks ? (
+          <Grid container className={classes.grid} spacing={3}>
+            <Grid item md className={classes.gridText}>
+              <Typography align='center' className={classes.text} variant='h4'>
+                Transcription
+              </Typography>
+              <Typography paragraph align='justify' component='span'>
+                {formatJsonString(teks.transcription)}
+              </Typography>
+            </Grid>
+            {teks.traductions && (
+              <Grid item md className={classes.gridText}>
+                <Typography align='center' className={classes.text} variant='h4'>
+                  Traduction
+                </Typography>
+                <Typography paragraph align='justify' component='span'>
+                  {formatJsonString(teks.traductions.francais)}
+                </Typography>
+              </Grid>
+            )}
+          </Grid>
+        ) : (
+          <DenyeTeks />
+        )}
+      </main>
+    </div>
+  )
+}
+
+TeksDrawer.propTypes = {
+  miziks: PropTypes.array.isRequired,
+  mizik: PropTypes.array
+}
+
+TeksDrawer.defaultProps = {
+  mizik: null
+}