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

Change teks to parole

Browse Source
This commit is contained in:
Cédric FAMIBELLE-PRONZOLA
2022-05-20 02:15:56 +04:00
parent b8be0ccd97
commit 2aa9e63e14
13 changed files with 158 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/awtis/mizik-badj-meni.js
+6 -6
View File
@@ -37,13 +37,13 @@ const Root = styled('div')((
}
}))
const sortTeks = teks => teks.sort((a, b) => b.id - a.id)
const sortTeks = paroles => paroles.sort((a, b) => b.id - a.id)
export default function MizikBadjMeni({teks}) {
export default function MizikBadjMeni({paroles}) {
const [open, setOpen] = useState(false)
const anchorRef = useRef(null)
const router = useRouter()
const sortedTeks = sortTeks(teks)
const sortedTeks = sortTeks(paroles)
const handleToggle = () => {
setOpen(previousOpen_ => !previousOpen_)
@@ -90,7 +90,7 @@ export default function MizikBadjMeni({teks}) {
vertical: 'top',
horizontal: 'right'
}}
badgeContent={teks.length}
badgeContent={paroles.length}
color='primary'
>
<MenuBookIcon style={{fontSize: 30}} />
@@ -105,7 +105,7 @@ export default function MizikBadjMeni({teks}) {
<Paper>
<ClickAwayListener onClickAway={handleClose}>
<MenuList autoFocusItem={open} id='menu-list-grow' onKeyDown={() => handleListKeyDown()}>
{sortedTeks.map(t => <MenuItem key={t.id} onClick={() => handleClick(t.slug)}>{t.tit}</MenuItem>)}
{sortedTeks.map(({id, attributes}) => <MenuItem key={id} onClick={() => handleClick(attributes.slug)}>{attributes.titre}</MenuItem>)}
</MenuList>
</ClickAwayListener>
</Paper>
@@ -117,5 +117,5 @@ export default function MizikBadjMeni({teks}) {
}
MizikBadjMeni.propTypes = {
teks: PropTypes.array.isRequired
paroles: PropTypes.array.isRequired
}
components/awtis/mizik-lis.js
+11 -11
View File
@@ -27,7 +27,7 @@ const StyledList = styled(List)((
}
}))
export default function MizikLis({meteEsMobilOuve, niAwtis, teks, slugTeksChwazi, meteSlugTeksChwazi}) {
export default function MizikLis({meteEsMobilOuve, niAwtis, paroles, slugTeksChwazi, meteSlugTeksChwazi}) {
const router = useRouter()
const handleClick = slug => {
@@ -50,22 +50,22 @@ export default function MizikLis({meteEsMobilOuve, niAwtis, teks, slugTeksChwazi
return (
<StyledList component='nav' className={classes.root} aria-label='mizik'>
{teks.map(({slug, tit, awtis, published_at, okiMizikID, eksplisit}) => (
{paroles.map(({id, attributes}) => (
<ListItem
key={slug}
key={id}
button
id={slug}
selected={slugTeksChwazi === slug}
onClick={() => handleClick(slug)}
id={attributes.slug}
selected={slugTeksChwazi === attributes.slug}
onClick={() => handleClick(attributes.slug)}
>
<ListItemText primary={tit} secondary={niAwtis ? new Intl.ListFormat('fr').format(awtis.map(({alias}) => alias)) : null} />
{eksplisit && (
<ListItemText primary={attributes.titre} secondary={niAwtis ? new Intl.ListFormat('fr').format(attributes.artistes.data.map(({attributes}) => attributes.alias)) : null} />
{attributes.explicite && (
<ExplicitIcon style={{marginRight: 5}} color='secondary' />
)}
{okiMizikID && (
{attributes.okiMizikID && (
<LibraryMusicIcon style={{fontSize: 40}} color='primary' />
)}
{esBrandNew(published_at) && (
{esBrandNew(attributes.publishedAt) && (
<FiberNewOutlinedIcon style={{fontSize: 40}} color='primary' />
)}
</ListItem>
@@ -77,7 +77,7 @@ export default function MizikLis({meteEsMobilOuve, niAwtis, teks, slugTeksChwazi
MizikLis.propTypes = {
meteEsMobilOuve: PropTypes.func,
niAwtis: PropTypes.bool,
teks: PropTypes.array.isRequired,
paroles: PropTypes.array.isRequired,
slugTeksChwazi: PropTypes.string,
meteSlugTeksChwazi: PropTypes.func
}
components/teks/denye-teks.js
+1 -1
View File
@@ -30,7 +30,7 @@ export default function DenyeTeks({denyeTeks}) {
</Container>
)}
<Grid container spacing={3}>
{denyeTeks.map(t => <TeksKat key={t.id} teks={t} />)}
{denyeTeks.map(t => <TeksKat key={t.id} parole={t} />)}
</Grid>
</Container>
</Root>
components/teks/drawer-bar.js
+13 -13
View File
@@ -44,15 +44,15 @@ const Root = styled('div')((
}
}))
const getMizikFiltered = (teks, filter) => {
if (teks) {
const filteredTitre = teks.filter(({tit}) => {
const deburredTit = deburr(tit)
const getMizikFiltered = (paroles, filter) => {
if (paroles) {
const filteredTitre = paroles.filter(({attributes}) => {
const deburredTit = deburr(attributes.titre)
return deburredTit.toLowerCase().includes(deburr(filter.toLowerCase()))
})
const filteredAlias = teks.filter(({awtis}) => {
const aliasLis = awtis.map(({alias}) => deburr(alias)).join(', ')
const filteredAlias = paroles.filter(({attributes}) => {
const aliasLis = attributes.artistes.data.map(({attributes}) => deburr(attributes.alias)).join(', ')
return aliasLis.toLowerCase().includes(deburr(filter.toLowerCase()))
})
@@ -60,13 +60,13 @@ const getMizikFiltered = (teks, filter) => {
}
}
export default function DrawerBar({meteEsMobilOuve, teks, anTeks}) {
const slug = anTeks ? anTeks.slug : null
export default function DrawerBar({meteEsMobilOuve, paroles, parole}) {
const slug = parole ? parole.slug : null
const [search, setSearch] = useState('')
const [slugTeksChwazi, meteSlugTeksChwazi] = useState(slug)
const mizikFiltered = getMizikFiltered(teks, search)
const mizikFiltered = getMizikFiltered(paroles, search)
const handleSearch = event => {
event.preventDefault()
@@ -94,7 +94,7 @@ export default function DrawerBar({meteEsMobilOuve, teks, anTeks}) {
<MizikLis
niAwtis
meteEsMobilOuve={meteEsMobilOuve}
teks={mizikFiltered}
paroles={mizikFiltered}
slugTeksChwazi={slugTeksChwazi}
meteSlugTeksChwazi={meteSlugTeksChwazi}
/>
@@ -105,11 +105,11 @@ export default function DrawerBar({meteEsMobilOuve, teks, anTeks}) {
DrawerBar.propTypes = {
meteEsMobilOuve: PropTypes.func,
teks: PropTypes.array.isRequired,
anTeks: PropTypes.object
paroles: PropTypes.array.isRequired,
parole: PropTypes.object
}
DrawerBar.defaultProps = {
meteEsMobilOuve: null,
anTeks: null
parole: null
}
components/teks/lekte.js
+10 -10
View File
@@ -14,7 +14,7 @@ import Image from 'next/image'
import {grey} from '@mui/material/colors'
import {Link} from '@mui/material'
const apiUrl = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:1337'
const IMAGE_URL = process.env.NEXT_PUBLIC_API_URL_ROOT || 'http://localhost:1337'
const Widget = styled('div')(({theme}) => ({
padding: 16,
@@ -49,7 +49,7 @@ const TinyText = styled(Typography)({
letterSpacing: 0.2,
})
export default function Lekte({audio, url, teks}) {
export default function Lekte({audio, url, parole}) {
const audioRef = useRef(new Audio(audio))
const intervalRef = useRef()
const isReady = useRef(false)
@@ -58,7 +58,7 @@ export default function Lekte({audio, url, teks}) {
const [position, setPosition] = useState(0)
const [volume, setVolume] = useState(100)
const [isPlaying, setIsPlaying] = useState(false)
const awtis = teks.awtis.map(({alias}) => alias)
const awtis = parole.artistes.data.map(({attributes}) => attributes.alias)
function formatDuration(value) {
const minute = Math.floor(value / 60)
@@ -139,10 +139,10 @@ export default function Lekte({audio, url, teks}) {
<Box sx={{display: 'flex', alignItems: 'center'}}>
<CoverImage>
<Image
alt={teks.tit}
src={teks?.kouveti?.formats?.thumbnail ? `${apiUrl}${teks.kouveti.formats.thumbnail.url}` : '/oki-logo-192x192.png'}
width={teks?.kouveti?.formats?.thumbnail ? teks.kouveti.formats.thumbnail.width : 192}
height={teks?.kouveti?.formats?.thumbnail ? teks.kouveti.formats.thumbnail.height : 192}
alt={parole.titre}
src={parole?.couverture?.data?.attributes?.formats?.thumbnail ? `${IMAGE_URL}${parole.couverture.data.attributes.formats.thumbnail.url}` : '/oki-logo-192x192.png'}
width={parole?.kouveti?.data?.attributes?.formats?.thumbnail ? parole.couverture.data.attributes.formats.thumbnail.width : 192}
height={parole?.kouveti?.data?.attributes?.formats?.thumbnail ? parole.couverture.data.attributes.formats.thumbnail.height : 192}
/>
</CoverImage>
<Box sx={{ml: 1.5, minWidth: 0}}>
@@ -151,11 +151,11 @@ export default function Lekte({audio, url, teks}) {
</Typography>
<Typography>
<Link underline='hover' sx={{cursor: 'pointer'}} target='_blank' rel='noreferrer' href={url}>
<strong>{teks.tit}</strong>
<strong>{parole.titre}</strong>
</Link>
</Typography>
<Typography variant='caption'>
<i>{teks.lanne}</i>
<i>{parole.annee}</i>
</Typography>
</Box>
</Box>
@@ -263,5 +263,5 @@ export default function Lekte({audio, url, teks}) {
Lekte.propTypes = {
audio: PropTypes.string.isRequired,
url: PropTypes.string.isRequired,
teks: PropTypes.object.isRequired
parole: PropTypes.object.isRequired
}
components/teks/oki-mizik.js
+3 -3
View File
@@ -11,18 +11,18 @@ const DinamikLekte = dynamic(
{ssr: false, loading: () => <CircularProgress sx={{color: '#29d'}} />}
)
export default function OkiMizik({id, teks}) {
export default function OkiMizik({id, parole}) {
const mizikStreamUrl = `${MIZIK_URL}/rest/stream?u=${MIZIK_API_USER}&p=${MIZIK_API_PASSWORD}&id=${id}`
const detailsUrl = `${MIZIK_URL}/library/tracks/${id}`
return (
<Box style={{marginTop: '0.3em', display: 'flex', flexDirection: 'column', alignItems: 'center'}}>
<DinamikLekte audio={mizikStreamUrl} url={detailsUrl} teks={teks} />
<DinamikLekte audio={mizikStreamUrl} url={detailsUrl} parole={parole} />
</Box>
)
}
OkiMizik.propTypes = {
id: PropTypes.number.isRequired,
teks: PropTypes.object.isRequired
parole: PropTypes.object.isRequired
}
components/teks/pataje.js
+5 -5
View File
@@ -43,15 +43,15 @@ const actions = [
{icon: <FileCopyIcon />, name: 'Copier le lien', code: 'copy'}
]
export default function Pataje({teks, setError, setSuccess}) {
const {tit, awtis, slug} = teks
export default function Pataje({parole, setError, setSuccess}) {
const {titre, artistes, slug} = parole
const [open, setOpen] = useState(false)
const patajeUrl = `${SITE_URL}/paroles/${slug}`
const alias = awtis.map(({alias}) => alias)
const alias = artistes.data.map(({attributes}) => attributes.alias)
const renderAwtis = new Intl.ListFormat('fr').format(alias)
const text = teks.user || teks.userAdmin ? `${renderAwtis} - ${tit} (Paroles et Traductions) - (texte soumis par ${teks?.user?.username || teks.userAdmin})` : `${renderAwtis} - ${tit} (Paroles et Traductions)`
const text = parole.user || parole.userAdmin ? `${renderAwtis} - ${titre} (Paroles et Traductions) - (texte soumis par ${parole?.user?.username || parole.userAdmin})` : `${renderAwtis} - ${parole} (Paroles et Traductions)`
const handleClose = () => {
setOpen(false)
@@ -123,7 +123,7 @@ export default function Pataje({teks, setError, setSuccess}) {
}
Pataje.propTypes = {
teks: PropTypes.object.isRequired,
parole: PropTypes.object.isRequired,
setError: PropTypes.func.isRequired,
setSuccess: PropTypes.func.isRequired
}
components/teks/teks-drawer.js
+19 -16
View File
@@ -117,7 +117,7 @@ const Root = styled('div')((
const drawerWidth = 240
export default function TeksDrawer({teks, anTeks, komante, denyeTeks}) {
export default function TeksDrawer({paroles, parole, paroleId, commentaires, denyeTeks}) {
const theme = useTheme()
const [esMobilOuve, meteEsMobilOuve] = useState(false)
const [open, setOpen] = useState(false)
@@ -161,21 +161,21 @@ export default function TeksDrawer({teks, anTeks, komante, denyeTeks}) {
>
<MenuIcon />
</IconButton>
{anTeks ? (
{parole ? (
<>
<Link passHref href='/paroles'>
<IconButton aria-label='return' size='medium'>
<KeyboardBackspaceIcon style={{fontSize: '1.5em'}} />
</IconButton>
</Link>
{anTeks.lyen && anTeks.lyen.length > 0 && (
{parole.streamVideo && parole.streamVideo.length > 0 && (
<div className={classes.vwe}>
<VweKouteAchte niVideyo anTeks={anTeks} />
<VweKouteAchte niVideyo parole={parole} />
</div>
)}
{anTeks.kouteyAchtey && anTeks.kouteyAchtey.length > 0 && (
{parole.streamVideo && parole.streamVideo.length > 0 && (
<div className={classes.koute}>
<VweKouteAchte niOdyo anTeks={anTeks} />
<VweKouteAchte niOdyo parole={parole} />
</div>
)}
</>
@@ -201,7 +201,7 @@ export default function TeksDrawer({teks, anTeks, komante, denyeTeks}) {
}}
onClose={handleDrawerToggle}
>
<DrawerBar meteEsMobilOuve={meteEsMobilOuve} teks={teks} anTeks={anTeks} />
<DrawerBar meteEsMobilOuve={meteEsMobilOuve} paroles={paroles} parole={parole} />
</Drawer>
</Hidden>
<Hidden smDown implementation='css'>
@@ -212,15 +212,16 @@ export default function TeksDrawer({teks, anTeks, komante, denyeTeks}) {
}}
variant='permanent'
>
<DrawerBar teks={teks} anTeks={anTeks} />
<DrawerBar paroles={paroles} parole={parole} />
</Drawer>
</Hidden>
</nav>
<main className={classes.content}>
{anTeks ? (
{parole ? (
<Teks
anTeks={anTeks}
komante={komante}
parole={parole}
paroleId={paroleId}
commentaires={commentaires}
open={open}
success={success}
error={error}
@@ -239,14 +240,16 @@ export default function TeksDrawer({teks, anTeks, komante, denyeTeks}) {
}
TeksDrawer.propTypes = {
teks: PropTypes.array.isRequired,
anTeks: PropTypes.object,
komante: PropTypes.array,
paroles: PropTypes.array.isRequired,
parole: PropTypes.object,
paroleId: PropTypes.number,
commentaires: PropTypes.array,
denyeTeks: PropTypes.array
}
TeksDrawer.defaultProps = {
anTeks: null,
komante: null,
parole: null,
paroleId: null,
commentaires: null,
denyeTeks: null
}
components/teks/teks-kat.js
+10 -10
View File
@@ -31,11 +31,11 @@ const StyledGrid = styled(Grid)({
}
})
const noImageUrl = 'https://place-hold.it/140x140?text=Pa%20ni%20imaj'
const noImageUrl = 'https://place-hold.it/140x140?text=Indisponible'
export default function TeksKat({teks}) {
export default function TeksKat({parole}) {
const router = useRouter()
const {attributes} = teks
const {attributes} = parole
const {titre, artistes, annee, couverture, publishedAt, slug} = attributes
const datPiblikasyon = format(new Date(publishedAt), 'P', {locale: fr})
@@ -53,25 +53,25 @@ export default function TeksKat({teks}) {
className={classes.media}
component='img'
alt={titre}
image={couverture ? `${IMAGE_URL}${couverture.data.attributes.url}` : noImageUrl}
image={couverture?.data?.attributes?.url ? `${IMAGE_URL}${couverture.data.attributes.url}` : noImageUrl}
title={titre}
/>
<CardContent>
<Typography display='inline' style={{marginRight: 5}} variant='h6' component='h2'>
{titre}
</Typography>
{teks.eksplisit && (
{parole.eksplisit && (
<ExplicitIcon style={{marginRight: 5}} color='secondary' fontSize='small' />
)}
<Typography variant='caption'>
{teks.user && (
{parole.user && (
<>
(<i>texte soumis par {teks.user.username}</i>)
(<i>texte soumis par {parole.user.username}</i>)
</>
)}
{teks.userAdmin && !teks.user && (
{parole.userAdmin && !parole.user && (
<>
(<i>texte soumis par {teks.userAdmin}</i>)
(<i>texte soumis par {parole.userAdmin}</i>)
</>
)}
</Typography>
@@ -92,5 +92,5 @@ export default function TeksKat({teks}) {
}
TeksKat.propTypes = {
teks: PropTypes.object.isRequired
parole: PropTypes.object.isRequired
}
components/teks/teks.js
+30 -29
View File
@@ -66,30 +66,30 @@ const Root = styled('div')((
}
}))
const langToArray = anTeks => {
const langToArray = parole => {
const langArray = []
if (anTeks && anTeks.tradiksyon) {
const {francais, english, espagnol, deutsch, italiano} = anTeks.tradiksyon
if (parole && parole.traductions) {
const {francais, anglais, espagnol, allemand, italien} = parole.traductions
if (francais) {
langArray.push({title: 'Traduction', flag: 'fr', lang: francais})
}
if (english) {
langArray.push({title: 'Translation', flag: 'en', lang: english})
if (anglais) {
langArray.push({title: 'Translation', flag: 'en', lang: anglais})
}
if (espagnol) {
langArray.push({title: 'Traducción', flag: 'es', lang: espagnol})
}
if (deutsch) {
langArray.push({title: 'Übersetzung', flag: 'de', lang: deutsch})
if (allemand) {
langArray.push({title: 'Übersetzung', flag: 'de', lang: allemand})
}
if (italiano) {
langArray.push({title: 'Traduzione', flag: 'it', lang: italiano})
if (italien) {
langArray.push({title: 'Traduzione', flag: 'it', lang: italien})
}
}
@@ -120,15 +120,15 @@ const Alert = forwardRef(function Alert(props, ref) {
const ExplicitTooltip = Tooltip
export default function Teks({anTeks, komante, open, success, error, setSuccess, setError, handleClose}) {
export default function Teks({parole, paroleId, commentaires, open, success, error, setSuccess, setError, handleClose}) {
const isMobile = useMediaQuery('(max-width:800px)')
const langArray = langToArray(anTeks)
const awtis = anTeks.awtis.map(({alias}) => alias)
const langArray = langToArray(parole)
const awtis = parole.artistes.data.map(({attributes}) => attributes.alias)
return (
<Root>
<div className={classes.pataje}>
<Pataje teks={anTeks} setError={setError} setSuccess={setSuccess} />
<Pataje parole={parole} setError={setError} setSuccess={setSuccess} />
</div>
<Box sx={{textAlign: 'center', marginTop: 9}}>
<Typography style={{marginTop: '0.8em'}} variant='h4' component='div' display='block'>
@@ -136,8 +136,8 @@ export default function Teks({anTeks, komante, open, success, error, setSuccess,
{new Intl.ListFormat('fr').format(awtis)}
</Typography>
<Typography variant='h5' component='div'>
{anTeks.tit} <small>({anTeks?.lanne})</small>
{anTeks.eksplisit && (
{parole.titre} <small>({parole?.annee})</small>
{parole.explicite && (
<ExplicitTooltip
title='Explicit Lyrics'
placement='bottom'
@@ -151,29 +151,29 @@ export default function Teks({anTeks, komante, open, success, error, setSuccess,
)}
</Typography>
<Grid container alignItems='center' justifyContent='center'>
{komante && (
<VweKomante komante={komante} teks={anTeks} />
{commentaires && (
<VweKomante commentaires={commentaires} parole={parole} paroleId={paroleId} />
)}
</Grid>
</Typography>
{anTeks.user && (
{parole?.user?.data && (
<Typography style={{marginBottom: '1.5em'}} display='block' variant='caption'>
<i>texte soumis par {anTeks.user.username}</i>
<i>texte soumis par {parole.user.data.attributes.username}</i>
</Typography>
)}
{anTeks.userAdmin && !anTeks.user && (
{parole.userAdmin && !parole.user && (
<Typography style={{marginBottom: '1.5em'}} display='block' variant='caption'>
<i>texte soumis par {anTeks.userAdmin}</i>
<i>texte soumis par {parole.userAdmin}</i>
</Typography>
)}
</Box>
{(anTeks.okiMizikID || anTeks.kouteyAchtey.length > 0) && (
{(parole.okiMizikID || parole.streamAudio.length > 0) && (
<Box sx={{textAlign: 'center'}}>
<EntegreMizik anTeks={anTeks} isMobile={isMobile} />
<EntegreMizik parole={parole} isMobile={isMobile} />
</Box>
)}
{anTeks.okiMizikID && (
<OkiMizik id={anTeks.okiMizikID} teks={anTeks} />
{parole.okiMizikID && (
<OkiMizik id={parole.okiMizikID} parole={parole} />
)}
<Grid container justifyContent='start' spacing={1}>
<Grid item xs={12} md={langArray.length > 0 ? 6 : null}>
@@ -182,7 +182,7 @@ export default function Teks({anTeks, komante, open, success, error, setSuccess,
Transcription
</Typography>
<Typography paragraph align={alignTeks(langArray, isMobile)} component='span'>
{formatJsonString(anTeks.transkripsyon)}
{formatJsonString(parole.transcription)}
</Typography>
</div>
</Grid>
@@ -242,8 +242,9 @@ export default function Teks({anTeks, komante, open, success, error, setSuccess,
}
Teks.propTypes = {
anTeks: PropTypes.object.isRequired,
komante: PropTypes.array,
parole: PropTypes.object.isRequired,
paroleId: PropTypes.number.isRequired,
commentaires: PropTypes.array,
open: PropTypes.bool.isRequired,
success: PropTypes.string,
error: PropTypes.string,
@@ -253,7 +254,7 @@ Teks.propTypes = {
}
Teks.defaultProps = {
komante: null,
commentaires: null,
success: '',
error: ''
}
components/teks/vwe-koute-achte.js
+10 -10
View File
@@ -49,22 +49,22 @@ const vweyIcons = {
Dailymotion: <Dailymotion />,
Lbry: <Lbry />,
Rumble: <PlayCircleFilledIcon />,
Peertube: <Peertube />
Gadé: <Peertube />
}
export default function VweKouteAchte({anTeks, niVideyo, niOdyo}) {
export default function VweKouteAchte({parole, niVideyo, niOdyo}) {
const [ouve, meteOuve] = useState(false)
const {kouteyAchtey, lyen} = anTeks
const {streamAudio, streamVideo} = parole
const kouteyAchteyActions = kouteyAchtey.map(({boutik, url}) => ({
icon: kouteyAchteyIcons[boutik],
name: boutik,
const kouteyAchteyActions = streamAudio.map(({plateforme, url}) => ({
icon: kouteyAchteyIcons[plateforme],
name: plateforme,
link: url
}))
const vweyActions = lyen.map(({url, sit}) => ({
icon: vweyIcons[sit],
name: sit,
const vweyActions = streamVideo.map(({plateforme, url}) => ({
icon: vweyIcons[plateforme],
name: plateforme,
link: url
}))
@@ -115,7 +115,7 @@ export default function VweKouteAchte({anTeks, niVideyo, niOdyo}) {
}
VweKouteAchte.propTypes = {
anTeks: PropTypes.object.isRequired,
parole: PropTypes.object.isRequired,
niVideyo: PropTypes.bool,
niOdyo: PropTypes.bool
}
pages/paroles/[slug].js
+33 -32
View File
@@ -1,6 +1,6 @@
import PropTypes from 'prop-types'
import {jwennTeksEpiSlug, jwennTeks, jwennKomanteEpiTeksId} from '../../lib/oki-api'
import {jwennTeks, jwennKomanteEpiTeksId} from '../../lib/oki-api'
import TeksDrawer from '../../components/teks/teks-drawer'
import HeadLayout from '../../components/head-layout'
@@ -8,41 +8,41 @@ import HeadLayout from '../../components/head-layout'
import Custom500 from '../500'
import Custom404 from '../404'
const jwennAwtis = awtis => {
const alias = awtis.map(({alias}) => alias)
const jwennAwtis = artiste => {
const alias = artiste.data.map(({attributes}) => attributes.alias)
return new Intl.ListFormat('fr').format(alias)
}
export default function SlugTeks({hasError, errorMessage, teks, anTeks, slug, komante}) {
export default function SlugTeks({hasError, errorMessage, paroles, parole, slug, commentaires}) {
if (hasError) {
console.log('⚠️ error :', errorMessage)
return <Custom500 />
}
if (!anTeks) {
if (!parole) {
return <Custom404 />
}
const awtis = anTeks.awtis.length === 1 ? anTeks.awtis[0].alias : jwennAwtis(anTeks.awtis)
const {kouveti} = anTeks
const artistes = parole.attributes.artistes.length === 1 ? parole.attributes.artistes[0].data.attributes.alias : jwennAwtis(parole.attributes.artistes)
const {couverture} = parole.attributes
const formatKouveti = () => {
if (!kouveti) {
if (!couverture) {
return null
}
if (kouveti && kouveti.formats && kouveti.formats.large) {
return kouveti.formats.large
if (couverture && couverture.formats && couverture.formats.large) {
return couverture.formats.large
}
if (kouveti && kouveti.formats && kouveti.formats.medium) {
return kouveti.formats.medium
if (couverture && couverture.formats && couverture.formats.medium) {
return couverture.formats.medium
}
if (kouveti && kouveti.formats && kouveti.formats.small) {
return kouveti.formats.small
if (couverture && couverture.formats && couverture.formats.small) {
return couverture.formats.small
}
return kouveti
return couverture
}
return (
@@ -51,25 +51,26 @@ export default function SlugTeks({hasError, errorMessage, teks, anTeks, slug, ko
imageWidth={formatKouveti() ? formatKouveti().width : null}
imageHeight={formatKouveti() ? formatKouveti().height : null}
imageMime={formatKouveti() ? formatKouveti().mime : null}
title={`${awtis} - ${anTeks.tit} | Paroles et Traductions`} tab={1} slug={`paroles/${slug}`}
title={`${artistes} - ${parole.attributes.titre} | Paroles et Traductions`} tab={1} slug={`paroles/${slug}`}
>
<TeksDrawer teks={teks} anTeks={anTeks} komante={komante} />
<TeksDrawer paroles={paroles} parole={parole.attributes} paroleId={parole.id} commentaires={commentaires} />
</HeadLayout>
)
}
export async function getServerSideProps({query}) {
const {slug} = query
let teks
let anTeks
let paroles
let parole
let hasError
let errorMessage
let komante
let commentaires
try {
teks = await jwennTeks()
anTeks = await jwennTeksEpiSlug(slug)
komante = await jwennKomanteEpiTeksId(anTeks?.id)
paroles = await jwennTeks()
parole = paroles.find(({attributes}) => attributes.slug === slug)
commentaires = paroles.map(({attributes}) => attributes.commentaires)
commentaires = await jwennKomanteEpiTeksId(parole?.id)
} catch (error) {
errorMessage = error
hasError = true
@@ -79,10 +80,10 @@ export async function getServerSideProps({query}) {
props: {
hasError: hasError || null,
errorMessage: errorMessage ? errorMessage.message : null,
teks: teks || null,
anTeks: anTeks || null,
paroles: paroles || null,
parole: parole || null,
slug,
komante: komante || null
commentaires: commentaires || null
}
}
}
@@ -90,16 +91,16 @@ export async function getServerSideProps({query}) {
SlugTeks.defaultProps = {
hasError: null,
errorMessage: null,
teks: null,
anTeks: null,
komante: null
paroles: null,
parole: null,
commentaires: null
}
SlugTeks.propTypes = {
hasError: PropTypes.bool,
errorMessage: PropTypes.string,
teks: PropTypes.array,
anTeks: PropTypes.object,
paroles: PropTypes.array,
parole: PropTypes.object,
slug: PropTypes.string.isRequired,
komante: PropTypes.array
commentaires: PropTypes.array
}
pages/paroles/index.js
+7 -7
View File
@@ -7,7 +7,7 @@ import HeadLayout from '../../components/head-layout'
import Custom500 from '../500'
export default function Teks({errorCode, errorMessage, teks, denyeTeks}) {
export default function Teks({errorCode, errorMessage, paroles, denyeTeks}) {
if (errorCode) {
console.log('⚠️ error', errorMessage)
return <Custom500 />
@@ -15,19 +15,19 @@ export default function Teks({errorCode, errorMessage, teks, denyeTeks}) {
return (
<HeadLayout title='Paroles et Traductions' tab={1} slug='paroles'>
<TeksDrawer teks={teks} denyeTeks={denyeTeks} />
<TeksDrawer paroles={paroles} denyeTeks={denyeTeks} />
</HeadLayout>
)
}
export async function getServerSideProps() {
let teks
let paroles
let denyeTeks
let hasError
let errorMessage
try {
teks = await jwennTeks()
paroles = await jwennTeks()
denyeTeks = await jwennDenyeTeks()
} catch (error) {
errorMessage = error.message
@@ -38,7 +38,7 @@ export async function getServerSideProps() {
props: {
errorCode: hasError || null,
errorMessage: errorMessage || null,
teks: teks || null,
paroles: paroles || null,
denyeTeks: denyeTeks || null
}
}
@@ -47,13 +47,13 @@ export async function getServerSideProps() {
Teks.defaultProps = {
errorCode: null,
errorMessage: null,
teks: null,
paroles: null,
denyeTeks: null
}
Teks.propTypes = {
errorCode: PropTypes.bool,
errorMessage: PropTypes.string,
teks: PropTypes.array,
paroles: PropTypes.array,
denyeTeks: PropTypes.array
}