diff --git a/components/awtis/mizik-badj-meni.js b/components/awtis/mizik-badj-meni.js index 8ac14f3..1bd61a3 100644 --- a/components/awtis/mizik-badj-meni.js +++ b/components/awtis/mizik-badj-meni.js @@ -1,4 +1,5 @@ -import React, {useRef, useEffect, useState} from 'react' +import {useRef, useEffect, useState} from 'react' +import {useRouter} from 'next/router' import PropTypes from 'prop-types' import { @@ -28,6 +29,7 @@ export default function MizikBadjMeni({miziks}) { const classes = useStyles() const [open, setOpen] = useState(false) const anchorRef = useRef(null) + const router = useRouter() const handleToggle = () => { setOpen(previousOpen_ => !previousOpen_) @@ -41,6 +43,10 @@ export default function MizikBadjMeni({miziks}) { setOpen(false) } + const handleClick = slug => { + router.push(`/teks/${slug}#${slug}`) + } + function handleListKeyDown(event) { if (event.key === 'Tab') { event.preventDefault() @@ -85,7 +91,7 @@ export default function MizikBadjMeni({miziks}) { - {miziks.map(m => {m.titre})} + {miziks.map(m => handleClick(m.slug)}>{m.titre})} diff --git a/components/awtis/mizik-lis.js b/components/awtis/mizik-lis.js index e572712..17f1418 100644 --- a/components/awtis/mizik-lis.js +++ b/components/awtis/mizik-lis.js @@ -1,10 +1,8 @@ -import React from 'react' import PropTypes from 'prop-types' +import {useRouter} from 'next/router' import {makeStyles} from '@material-ui/core/styles' -import List from '@material-ui/core/List' -import ListItem from '@material-ui/core/ListItem' -import ListItemText from '@material-ui/core/ListItemText' +import {List, ListItem, ListItemText} from '@material-ui/core' const useStyles = makeStyles(theme => ({ root: { @@ -14,14 +12,39 @@ const useStyles = makeStyles(theme => ({ } })) -export default function MizikLis({miziks}) { +export default function MizikLis({setMobileOpen, hasAwtis, miziks, selectedMizikSlug, setSelectedMizikSlug}) { const classes = useStyles() + const router = useRouter() + + const handleClick = slug => { + if (setSelectedMizikSlug) { + setSelectedMizikSlug(slug) + } + + if (slug !== selectedMizikSlug) { + if (hasAwtis) { + router.push(`/teks/${slug}`) + } else { + router.push(`/teks/${slug}#${slug}`) + } + } + + if (setMobileOpen) { + setMobileOpen(false) + } + } return ( - {miziks.map(m => ( - - + {miziks.map(({slug, titre, awtis}) => ( + handleClick(slug)} + > + a.alias).join() : null} /> ))} @@ -29,5 +52,16 @@ export default function MizikLis({miziks}) { } MizikLis.propTypes = { - miziks: PropTypes.array.isRequired + setMobileOpen: PropTypes.func, + hasAwtis: PropTypes.bool, + miziks: PropTypes.array.isRequired, + selectedMizikSlug: PropTypes.string, + setSelectedMizikSlug: PropTypes.func +} + +MizikLis.defaultProps = { + setMobileOpen: null, + hasAwtis: false, + selectedMizikSlug: null, + setSelectedMizikSlug: null } diff --git a/components/teks/denye-teks.js b/components/teks/denye-teks.js new file mode 100644 index 0000000..6296745 --- /dev/null +++ b/components/teks/denye-teks.js @@ -0,0 +1,17 @@ +import {makeStyles} from '@material-ui/core' + +const useStyles = makeStyles(() => ({ + container: { + marginTop: '2em' + } +})) + +export default function DenyeTeks() { + const classes = useStyles() + + return ( +
+ Dènyé Tèks +
+ ) +} diff --git a/components/teks/drawer-bar.js b/components/teks/drawer-bar.js new file mode 100644 index 0000000..b5c72ac --- /dev/null +++ b/components/teks/drawer-bar.js @@ -0,0 +1,88 @@ +import {useState} from 'react' +import PropTypes from 'prop-types' + +import { + Divider, + FormControl, + InputAdornment, + InputBase, + makeStyles +} from '@material-ui/core' + +import SearchIcon from '@material-ui/icons/Search' + +import MizikLis from '../awtis/mizik-lis' + +const useStyles = makeStyles(theme => ({ + toolbar: theme.mixins.toolbar, + list: { + marginBottom: '6em' + }, + form: { + marginLeft: theme.spacing(1) + }, + text: { + marginBottom: '0.5em' + } +})) + +const getMizikFiltered = (miziks, filter) => { + if (miziks) { + return miziks.filter(({titre}) => titre.toLowerCase().includes(filter.toLowerCase())) + } +} + +export default function DrawerBar({setMobileOpen, miziks, mizik}) { + const slug = mizik ? mizik[0].slug : null + const classes = useStyles() + + const [search, setSearch] = useState('') + const [selectedMizikSlug, setSelectedMizikSlug] = useState(slug) + + const mizikFiltered = getMizikFiltered(miziks, search) + + const handleSearch = event => { + event.preventDefault() + const value = event.target.value + setSearch(value) + } + + return ( +
+ + + + + } + value={search} + onChange={handleSearch} + /> + + +
+ +
+
+ ) +} + +DrawerBar.propTypes = { + setMobileOpen: PropTypes.func, + miziks: PropTypes.array.isRequired, + mizik: PropTypes.array +} + +DrawerBar.defaultProps = { + setMobileOpen: null, + mizik: null +} diff --git a/components/teks/teks-drawer.js b/components/teks/teks-drawer.js new file mode 100644 index 0000000..c43d74e --- /dev/null +++ b/components/teks/teks-drawer.js @@ -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) =>
{`${string}`}
) // 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 ( +
+ + + + + + + {teks ? ( + <> + + + + + + + {teks.titre} + + + ) : ( + + Dènyé Tèks + + )} + + + +
+ {teks ? ( + + + + Transcription + + + {formatJsonString(teks.transcription)} + + + {teks.traductions && ( + + + Traduction + + + {formatJsonString(teks.traductions.francais)} + + + )} + + ) : ( + + )} +
+
+ ) +} + +TeksDrawer.propTypes = { + miziks: PropTypes.array.isRequired, + mizik: PropTypes.array +} + +TeksDrawer.defaultProps = { + mizik: null +} diff --git a/pages/teks.js b/pages/teks.js deleted file mode 100644 index f5aa070..0000000 --- a/pages/teks.js +++ /dev/null @@ -1,23 +0,0 @@ -import Navigasyon from '../components/navigasyon' -import {jwennTeks} from '../lib/oki-api' - -export default function Teks() { - return ( - <> - -
- Teks -
- - ) -} - -export async function getServerSideProps() { - const mizik = await jwennTeks() - - return { - props: { - mizik - } - } -} diff --git a/pages/teks/[slug].js b/pages/teks/[slug].js new file mode 100644 index 0000000..0f73284 --- /dev/null +++ b/pages/teks/[slug].js @@ -0,0 +1,37 @@ +import PropTypes from 'prop-types' + +import {jwennMizikEpiSlug, jwennTeks} from '../../lib/oki-api' + +import Navigasyon from '../../components/navigasyon' +import TeksDrawer from '../../components/teks/teks-drawer' + +export default function Mizik({miziks, mizik}) { + return ( + <> + + + + ) +} + +export async function getServerSideProps({query}) { + const {slug} = query + const miziks = await jwennTeks() + const mizik = await jwennMizikEpiSlug(slug) + + if (mizik.length === 0) { + throw new Error('San répons') + } + + return { + props: { + miziks, + mizik + } + } +} + +Mizik.propTypes = { + miziks: PropTypes.array.isRequired, + mizik: PropTypes.array.isRequired +} diff --git a/pages/teks/index.js b/pages/teks/index.js new file mode 100644 index 0000000..2066dec --- /dev/null +++ b/pages/teks/index.js @@ -0,0 +1,29 @@ +import PropTypes from 'prop-types' + +import {jwennTeks} from '../../lib/oki-api' + +import Navigasyon from '../../components/navigasyon' +import TeksDrawer from '../../components/teks/teks-drawer' + +export default function Teks({miziks}) { + return ( + <> + + + + ) +} + +export async function getServerSideProps() { + const miziks = await jwennTeks() + + return { + props: { + miziks + } + } +} + +Teks.propTypes = { + miziks: PropTypes.array.isRequired +}