ORGANISATION-KA-INTERNATIONALE/pawol.nu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adapt all Teks components to new api

Browse Source
This commit is contained in:
Cédric Famibelle-Pronzola
2020-12-18 22:08:34 +01:00
parent 94cc53410d
commit 81a5ed4ce0
6 changed files with 60 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/teks/denye-teks.js
+3 -3
View File
@@ -8,9 +8,9 @@ const useStyles = makeStyles(() => ({
}
}))
export default function DenyeTeks(miziks) {
export default function DenyeTeks(teks) {
const classes = useStyles()
const sortedMiziksByPublishedAt = Object.values(miziks).sort((a, b) => {
const teksKlasePaPibilikasyon = Object.values(teks).sort((a, b) => {
const aDate = new Date(a.published_at)
const bDate = new Date(b.published_at)
return bDate.getTime() - aDate.getTime()
@@ -20,7 +20,7 @@ export default function DenyeTeks(miziks) {
<div className={classes.container}>
<Container>
<Grid container spacing={3}>
{sortedMiziksByPublishedAt.map(m => <TeksKat key={m._id} teks={m} />)}
{teksKlasePaPibilikasyon.map(t => <TeksKat key={t._id} teks={t} />)}
</Grid>
</Container>
</div>
components/teks/drawer-bar.js
+16 -16
View File
@@ -27,13 +27,13 @@ const useStyles = makeStyles(theme => ({
}
}))
const getMizikFiltered = (miziks, filter) => {
if (miziks) {
const filteredTitre = miziks.filter(({titre}) => {
return titre.toLowerCase().includes(filter.toLowerCase())
const getMizikFiltered = (teks, filter) => {
if (teks) {
const filteredTitre = teks.filter(({tit}) => {
return tit.toLowerCase().includes(filter.toLowerCase())
})
const filteredAlias = miziks.filter(({awtis}) => {
const filteredAlias = teks.filter(({awtis}) => {
const aliasLis = awtis.map(({alias}) => alias).join()
return aliasLis.toLowerCase().includes(filter.toLowerCase())
})
@@ -42,14 +42,14 @@ const getMizikFiltered = (miziks, filter) => {
}
}
export default function DrawerBar({setMobileOpen, miziks, mizik}) {
const slug = mizik ? mizik[0].slug : null
export default function DrawerBar({setMobileOpen, teks, anTeks}) {
const slug = anTeks ? anTeks.slug : null
const classes = useStyles()
const [search, setSearch] = useState('')
const [selectedMizikSlug, setSelectedMizikSlug] = useState(slug)
const [slugTeksChwazi, meteSlugTeksChwazi] = useState(slug)
const mizikFiltered = getMizikFiltered(miziks, search)
const mizikFiltered = getMizikFiltered(teks, search)
const handleSearch = event => {
event.preventDefault()
@@ -75,11 +75,11 @@ export default function DrawerBar({setMobileOpen, miziks, mizik}) {
<Divider />
<div className={classes.list}>
<MizikLis
hasAwtis
niAwtis
setMobileOpen={setMobileOpen}
miziks={mizikFiltered}
selectedMizikSlug={selectedMizikSlug}
setSelectedMizikSlug={setSelectedMizikSlug}
teks={mizikFiltered}
slugTeksChwazi={slugTeksChwazi}
meteSlugTeksChwazi={meteSlugTeksChwazi}
/>
</div>
</div>
@@ -88,11 +88,11 @@ export default function DrawerBar({setMobileOpen, miziks, mizik}) {
DrawerBar.propTypes = {
setMobileOpen: PropTypes.func,
miziks: PropTypes.array.isRequired,
mizik: PropTypes.array
teks: PropTypes.array.isRequired,
anTeks: PropTypes.object
}
DrawerBar.defaultProps = {
setMobileOpen: null,
mizik: null
anTeks: null
}
components/teks/teks-drawer.js
+18 -19
View File
@@ -99,8 +99,7 @@ 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
export default function TeksDrawer({teks, anTeks}) {
const classes = useStyles()
const theme = useTheme()
const [mobileOpen, setMobileOpen] = useState(false)
@@ -125,21 +124,21 @@ export default function TeksDrawer({miziks, mizik}) {
>
<MenuIcon />
</IconButton>
{teks ? (
{anTeks ? (
<>
<Link href='/teks'>
<IconButton aria-label='return' size='medium'>
<KeyboardBackspaceIcon style={{fontSize: '1.5em'}} />
</IconButton>
</Link>
{teks.liens && teks.liens.length > 0 && (
{anTeks.lyen && anTeks.lyen.length > 0 && (
<div className={classes.vwe}>
<VweKouteAchte isVideo teks={teks} />
<VweKouteAchte niVideyo anTeks={anTeks} />
</div>
)}
{teks.kouteyAchtey && teks.kouteyAchtey.length > 0 && (
{anTeks.kouteyAchtey && anTeks.kouteyAchtey.length > 0 && (
<div className={classes.koute}>
<VweKouteAchte isAudio teks={teks} />
<VweKouteAchte niOdyo anTeks={anTeks} />
</div>
)}
</>
@@ -165,7 +164,7 @@ export default function TeksDrawer({miziks, mizik}) {
}}
onClose={handleDrawerToggle}
>
<DrawerBar setMobileOpen={setMobileOpen} miziks={miziks} mizik={mizik} />
<DrawerBar setMobileOpen={setMobileOpen} teks={teks} anTeks={anTeks} />
</Drawer>
</Hidden>
<Hidden xsDown implementation='css'>
@@ -176,15 +175,15 @@ export default function TeksDrawer({miziks, mizik}) {
}}
variant='permanent'
>
<DrawerBar miziks={miziks} mizik={mizik} />
<DrawerBar teks={teks} anTeks={anTeks} />
</Drawer>
</Hidden>
</nav>
<main className={classes.content}>
{teks ? (
{anTeks ? (
<>
<Typography noWrap align='center' style={{marginTop: '1em'}} variant='h6'>
{teks.titre}
<Typography noWrap align='center' style={{marginTop: '2em'}} variant='h6'>
{anTeks.tit}
</Typography>
<Grid container className={classes.grid} spacing={3}>
<Grid item md className={classes.gridText}>
@@ -192,23 +191,23 @@ export default function TeksDrawer({miziks, mizik}) {
Transcription
</Typography>
<Typography paragraph align='justify' component='span'>
{formatJsonString(teks.transcription)}
{formatJsonString(anTeks.transkripsyon)}
</Typography>
</Grid>
{teks.traductions && (
{anTeks.tradiksyon && (
<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)}
{formatJsonString(anTeks.tradiksyon.francais)}
</Typography>
</Grid>
)}
</Grid>
</>
) : (
<DenyeTeks {...miziks} />
<DenyeTeks {...teks} />
)}
</main>
</div>
@@ -216,10 +215,10 @@ export default function TeksDrawer({miziks, mizik}) {
}
TeksDrawer.propTypes = {
miziks: PropTypes.array.isRequired,
mizik: PropTypes.array
teks: PropTypes.array.isRequired,
anTeks: PropTypes.object
}
TeksDrawer.defaultProps = {
mizik: null
anTeks: null
}
components/teks/teks-kat.js
+6 -6
View File
@@ -26,7 +26,7 @@ export default function TeksKat({teks}) {
const classes = useStyles()
const router = useRouter()
const noImageUrl = 'https://place-hold.it/140x140?text=Pa%20ni%20imaj'
const {titre, awtis, annee, cover, published_at, slug} = teks
const {tit, awtis, lanne, kouveti, published_at, slug} = teks
const datPiblikasyon = format(new Date(published_at), 'Pp', {locale: fr})
const handleClick = slug => {
@@ -40,19 +40,19 @@ export default function TeksKat({teks}) {
<CardMedia
className={classes.media}
component='img'
alt={titre}
image={cover ? `${process.env.NEXT_PUBLIC_API_URL}${cover.url}` : noImageUrl}
title={titre}
alt={tit}
image={kouveti ? `${process.env.NEXT_PUBLIC_API_URL}${kouveti.url}` : noImageUrl}
title={tit}
/>
<CardContent>
<Typography gutterBottom variant='h5' component='h2'>
{titre}
{tit}
</Typography>
<Typography variant='body2' color='textSecondary' component='p'>
{awtis.map(a => a.alias).join()}
</Typography>
<Typography variant='body2' color='textSecondary' component='p'>
{annee}
{lanne}
</Typography>
<Typography align='center' style={{marginTop: '0.5em'}} variant='body1' color='textSecondary' component='p'>
Piblikasyon : {datPiblikasyon}
pages/teks/[slug].js
+12 -12
View File
@@ -1,36 +1,36 @@
import PropTypes from 'prop-types'
import {jwennMizikEpiSlug, jwennTeks} from '../../lib/oki-api'
import {jwennTeksEpiSlug, jwennTeks} from '../../lib/oki-api'
import TeksDrawer from '../../components/teks/teks-drawer'
import HeadLayout from '../../components/head-layout'
export default function Mizik({miziks, mizik}) {
export default function SlugTeks({teks, anTeks}) {
return (
<HeadLayout title={`Tèks | ${mizik[0].titre}`} tab={2}>
<TeksDrawer miziks={miziks} mizik={mizik} />
<HeadLayout title={`Tèks | ${anTeks.tit}`} tab={2}>
<TeksDrawer teks={teks} anTeks={anTeks} />
</HeadLayout>
)
}
export async function getServerSideProps({query}) {
const {slug} = query
const miziks = await jwennTeks()
const mizik = await jwennMizikEpiSlug(slug)
const teks = await jwennTeks()
const anTeks = await jwennTeksEpiSlug(slug)
if (mizik.length === 0) {
if (!anTeks) {
throw new Error('San répons')
}
return {
props: {
miziks,
mizik
teks,
anTeks
}
}
}
Mizik.propTypes = {
miziks: PropTypes.array.isRequired,
mizik: PropTypes.array.isRequired
SlugTeks.propTypes = {
teks: PropTypes.array.isRequired,
anTeks: PropTypes.object.isRequired
}
pages/teks/index.js
+5 -5
View File
@@ -5,24 +5,24 @@ import {jwennTeks} from '../../lib/oki-api'
import TeksDrawer from '../../components/teks/teks-drawer'
import HeadLayout from '../../components/head-layout'
export default function Teks({miziks}) {
export default function Teks({teks}) {
return (
<HeadLayout title='Tèks' tab={2}>
<TeksDrawer miziks={miziks} />
<TeksDrawer teks={teks} />
</HeadLayout>
)
}
export async function getServerSideProps() {
const miziks = await jwennTeks()
const teks = await jwennTeks()
return {
props: {
miziks
teks
}
}
}
Teks.propTypes = {
miziks: PropTypes.array.isRequired
teks: PropTypes.array.isRequired
}