Adapt components with API response
This commit is contained in:
@@ -8,7 +8,7 @@ export default function AnTeks({parole, paroleId}) {
|
||||
<Teks
|
||||
parole={parole}
|
||||
paroleId={paroleId}
|
||||
commentaires={parole?.commentaires.data}
|
||||
commentaires={parole?.commentaires}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -49,7 +49,7 @@ export default function DiferansDialog({difference}) {
|
||||
<DialogTitle>Liste des modifications</DialogTitle>
|
||||
<List sx={{width: '100%', maxWidth: 360, bgcolor: 'background.paper'}}>
|
||||
{difference.map(({id, admin_user, date, jsonDiff}) => {
|
||||
const {firstname} = admin_user.data.attributes
|
||||
const {firstname} = admin_user
|
||||
const diferansDate = format(new Date(date), 'PPPppp', {locale: fr})
|
||||
|
||||
return (
|
||||
|
||||
@@ -17,13 +17,13 @@ import MizikLis from '../awtis/mizik-lis'
|
||||
|
||||
const getMizikFiltered = (paroles, filter) => {
|
||||
if (paroles) {
|
||||
const filteredTitre = paroles.filter(({attributes}) => {
|
||||
const deburredTit = deburr(attributes.titre)
|
||||
const filteredTitre = paroles.filter(({titre}) => {
|
||||
const deburredTit = deburr(titre)
|
||||
return deburredTit.toLowerCase().includes(deburr(filter.toLowerCase()))
|
||||
})
|
||||
})
|
||||
|
||||
const filteredAlias = paroles.filter(({attributes}) => {
|
||||
const aliasLis = attributes.artistes.data.map(({attributes}) => deburr(attributes.alias)).join(', ')
|
||||
const filteredAlias = paroles.filter(({artistes}) => {
|
||||
const aliasLis = artistes.map(({alias}) => deburr(alias)).join(', ')
|
||||
return aliasLis.toLowerCase().includes(deburr(filter.toLowerCase()))
|
||||
})
|
||||
|
||||
|
||||
@@ -137,9 +137,9 @@ export default function Lekte({audio, url, parole}) {
|
||||
audioRef.current.volume = value / 100
|
||||
}
|
||||
|
||||
const imagePath = parole?.couverture?.data?.attributes?.formats?.thumbnail?.url
|
||||
const width = parole?.couverture?.data?.attributes?.formats?.thumbnail?.width || 192
|
||||
const height = parole?.couverture?.data?.attributes?.formats?.thumbnail?.height || 192
|
||||
const imagePath = parole?.couverture?.formats?.thumbnail?.url
|
||||
const width = parole?.couverture?.formats?.thumbnail?.width || 192
|
||||
const height = parole?.couverture?.formats?.thumbnail?.height || 192
|
||||
|
||||
const imageSrc = imagePath
|
||||
? new URL(imagePath, IMAGE_URL).toString()
|
||||
|
||||
@@ -50,10 +50,10 @@ export default function Pataje({parole, setError, setSuccess}) {
|
||||
const [open, setOpen] = useState(false)
|
||||
|
||||
const patajeUrl = `${SITE_URL}/paroles/${slug}`
|
||||
const alias = artistes.data.map(({attributes}) => attributes.alias)
|
||||
const alias = artistes.map(({alias}) => alias)
|
||||
const renderAwtis = new Intl.ListFormat('fr').format(alias)
|
||||
|
||||
const text = parole.user.data || parole.userAdmin.data ? `${renderAwtis} - ${titre} (Paroles et Traductions) - (parole soumise par ${parole?.user?.data?.attributes?.username || parole.userAdmin?.data?.attributes?.username || parole.userAdmin?.data?.attributes?.firstname})` : `${renderAwtis} - ${titre} (Paroles et Traductions)`
|
||||
const text = parole.user || parole.userAdmin ? `${renderAwtis} - ${titre} (Paroles et Traductions) - (parole soumise par ${parole?.user?.username || parole.userAdmin?.username || parole.userAdmin?.firstname})` : `${renderAwtis} - ${titre} (Paroles et Traductions)`
|
||||
|
||||
const handleClose = () => {
|
||||
setOpen(false)
|
||||
|
||||
@@ -32,7 +32,7 @@ export default function TeksDrawer({paroles}) {
|
||||
const [error, setError] = useState('')
|
||||
const [success, setSuccess] = useState('')
|
||||
|
||||
const parole = paroles.find(({attributes}) => attributes.slug === slug)
|
||||
const parole = paroles.find((parole) => parole.slug === slug)
|
||||
|
||||
useEffect(() => {
|
||||
if (error || success) {
|
||||
@@ -93,17 +93,17 @@ export default function TeksDrawer({paroles}) {
|
||||
{parole && (
|
||||
<Box sx={{display: 'flex', position: 'relative', top: '-20px'}}>
|
||||
<Box>
|
||||
<Pataje parole={parole.attributes} setError={setError} setSuccess={setSuccess} />
|
||||
<Pataje parole={parole} setError={setError} setSuccess={setSuccess} />
|
||||
</Box>
|
||||
|
||||
{parole.attributes.streamVideo && parole.attributes.streamVideo.length > 0 && (
|
||||
{parole.streamVideo && parole.streamVideo.length > 0 && (
|
||||
<Box>
|
||||
<VweKouteAchte niVideyo parole={parole.attributes} />
|
||||
<VweKouteAchte niVideyo parole={parole} />
|
||||
</Box>
|
||||
)}
|
||||
{parole.attributes.streamAudio && parole.attributes.streamAudio.length > 0 && (
|
||||
{parole.streamAudio && parole.streamAudio.length > 0 && (
|
||||
<Box>
|
||||
<VweKouteAchte niOdyo parole={parole.attributes} />
|
||||
<VweKouteAchte niOdyo parole={parole} />
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
@@ -40,11 +40,10 @@ const noImageUrl = 'https://place-hold.it/140x140?text=Indisponible'
|
||||
|
||||
export default function TeksKat({parole}) {
|
||||
const router = useRouter()
|
||||
const {attributes} = parole
|
||||
const {titre, artistes, annee, couverture, publishedAt, slug} = attributes
|
||||
const {titre, artistes, annee, couverture, publishedAt, slug} = parole
|
||||
|
||||
const datPiblikasyon = format(new Date(publishedAt), 'P', {locale: fr})
|
||||
const aliases = getAlias(artistes, attributes.prioriteArtistes)
|
||||
const aliases = getAlias(artistes, parole.prioriteArtistes)
|
||||
|
||||
const handleClick = slug => {
|
||||
router.push(`/paroles/${slug}`)?.then(() => window.scrollTo(0, 0))
|
||||
@@ -58,7 +57,7 @@ export default function TeksKat({parole}) {
|
||||
className={classes.media}
|
||||
component='img'
|
||||
alt={titre}
|
||||
image={couverture?.data?.attributes?.url ? `${IMAGE_URL}${couverture.data.attributes.url}` : noImageUrl}
|
||||
image={couverture?.url ? `${IMAGE_URL}${couverture.url}` : noImageUrl}
|
||||
title={titre}
|
||||
/>
|
||||
<CardContent>
|
||||
@@ -66,7 +65,7 @@ export default function TeksKat({parole}) {
|
||||
<Typography display='inline' style={{marginRight: 5}} variant='h6' component='h2'>
|
||||
{titre}
|
||||
</Typography>
|
||||
{attributes.creativeCommons && (
|
||||
{parole.creativeCommons && (
|
||||
<Box marginInline={1}>
|
||||
<Image
|
||||
width={24}
|
||||
@@ -78,7 +77,7 @@ export default function TeksKat({parole}) {
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{attributes.explicitLyrics && (
|
||||
{parole.explicitLyrics && (
|
||||
<ExplicitIcon style={{marginRight: 5}} color='error' fontSize='small' />
|
||||
)}
|
||||
</Box>
|
||||
@@ -90,14 +89,14 @@ export default function TeksKat({parole}) {
|
||||
{annee}
|
||||
</Typography>
|
||||
<Typography sx={{fontStyle: 'italic'}} variant='caption'>
|
||||
{attributes.user && (
|
||||
{parole.user && (
|
||||
<>
|
||||
(<i>parole soumise par {attributes.user.username}</i>)
|
||||
(<i>parole soumise par {parole.user.username}</i>)
|
||||
</>
|
||||
)}
|
||||
{attributes.userAdmin && !attributes.user && (
|
||||
{parole.userAdmin && !parole.user && (
|
||||
<>
|
||||
(<i>parole soumise par {attributes.userAdmin}</i>)
|
||||
(<i>parole soumise par {parole.userAdmin}</i>)
|
||||
</>
|
||||
)}
|
||||
</Typography>
|
||||
|
||||
@@ -169,14 +169,14 @@ export default function Teks({parole}) {
|
||||
</Box>
|
||||
</Typography>
|
||||
|
||||
{parole?.user?.data && (
|
||||
{parole?.user && (
|
||||
<Typography style={{marginBottom: '1.5em'}} display='block' variant='caption'>
|
||||
<i>parole soumise par {parole.user.data.attributes.username}</i>
|
||||
<i>parole soumise par {parole.user.username}</i>
|
||||
</Typography>
|
||||
)}
|
||||
{parole?.userAdmin?.data && !parole.user.data && (
|
||||
{parole?.userAdmin&& !parole.user && (
|
||||
<Typography style={{marginBottom: '1.5em'}} display='block' variant='caption'>
|
||||
<i>parole soumise par {parole.userAdmin.data.attributes.firstname}</i>
|
||||
<i>parole soumise par {parole.userAdmin.firstname}</i>
|
||||
</Typography>
|
||||
)}
|
||||
{parole.creativeCommons && (
|
||||
@@ -184,8 +184,8 @@ export default function Teks({parole}) {
|
||||
<LicenseModal license={parole.creativeCommons.toLowerCase()} />
|
||||
</Box>
|
||||
)}
|
||||
{parole?.files?.data && (
|
||||
<FilesDialog files={parole.files.data} />
|
||||
{parole?.files && (
|
||||
<FilesDialog files={parole.files} />
|
||||
)}
|
||||
{(parole.okiMizikID || parole.streamAudio.length > 0 || parole.gadeEmbed) && (
|
||||
<Box sx={{textAlign: 'center'}}>
|
||||
|
||||
Reference in New Issue
Block a user