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

Adapt components with API response

Browse Source
This commit is contained in:
Cédric Famibelle-Pronzola
2026-04-21 19:16:11 +04:00
parent 0a96b20a85
commit 6b94f95bb8
22 changed files with 123 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/awtis/awtis-detay.js
+6 -6
View File
@@ -28,12 +28,12 @@ import MizikLyen from './mizik-lyen'
const IMAGE_URL = process.env.NEXT_PUBLIC_API_URL_ROOT || 'http://localhost:1337'
const noImageUrl = 'https://place-hold.it/140x140?text=Indisponible'
const sortTeks = paroles => paroles.sort((a, b) => a.attributes.titre.localeCompare(b.attributes.titre, 'fr', {sensitivity: 'base'}))
const sortTeks = paroles => paroles.sort((a, b) => a.titre.localeCompare(b.titre, 'fr', {sensitivity: 'base'}))
export default function AwtisDetay({anAwtis}) {
const [esByografiOuve, meteEsByografiOuve] = useState(false)
const {alias, biographie, paroles, photo} = anAwtis
const sortedTeks = sortTeks(paroles?.data)
const sortedTeks = sortTeks(paroles)
const gwanBiyo = biographie && biographie.length > 100
const biyo = gwanBiyo ? `${biographie.slice(0, 100)}...` : biographie
@@ -51,7 +51,7 @@ export default function AwtisDetay({anAwtis}) {
</Box>
<Box sx={{justifyContent: 'center', display: 'flex', marginBottom: 2}}>
<Avatar
src={`${photo?.data?.attributes?.url ? `${IMAGE_URL}${photo?.data?.attributes?.url}` : noImageUrl}`}
src={`${photo?.url ? `${IMAGE_URL}${photo?.url}` : noImageUrl}`}
alt={`Photo ${alias}`}
sx={{width: 200, height: 200, border: `2px solid ${green[500]}`}}
/>
@@ -99,13 +99,13 @@ export default function AwtisDetay({anAwtis}) {
</AccordionDetails>
</Accordion>
) : (
paroles.data.length === 0 ? (
paroles.length === 0 ? (
<Typography gutterBottom textAlign='center' variant='body1' component='h2'><strong>Aucune parole pour le moment</strong></Typography>
) : (
<Box>
<Typography gutterBottom textAlign='center' variant='body1' component='h2'><strong>Parole</strong></Typography>
<Paper sx={{height: '100%', paddingBlock: 2}}>
<MizikLyen anPawol={paroles.data[0]} kuveti={formatKuveti(paroles.data[0].attributes.couverture)} />
<MizikLyen anPawol={paroles[0]} kuveti={formatKuveti(paroles[0].couverture)} />
</Paper>
</Box>
)
@@ -123,7 +123,7 @@ export default function AwtisDetay({anAwtis}) {
{esByografiOuve && (
<AwtisBiyografi
alias={alias}
paroles={paroles.data}
paroles={paroles}
biographie={biographie}
esByografiOuve={esByografiOuve}
meteEsByografiOuve={meteEsByografiOuve}
components/awtis/awtis-kat.js
+3 -3
View File
@@ -66,7 +66,7 @@ export default function AwtisKat({artiste}) {
className={classes.media}
component='img'
alt={alias}
image={`${photo?.data?.attributes?.url ? `${IMAGE_URL}${photo?.data?.attributes?.url}` : noImageUrl}`}
image={`${photo?.url ? `${IMAGE_URL}${photo?.url}` : noImageUrl}`}
title={alias}
/>
<CardContent>
@@ -74,7 +74,7 @@ export default function AwtisKat({artiste}) {
{alias}
</Typography>
<Typography align='center' variant='body2' color='textSecondary' component='h5'>
{`${paroles.data.length === 0 ? 'Aucune parole pour le moment' : `${paroles.data.length} ${paroles.data.length > 1 ? 'paroles' : 'parole'}`}`}
{`${paroles.length === 0 ? 'Aucune parole pour le moment' : `${paroles.length} ${paroles.length > 1 ? 'paroles' : 'parole'}`}`}
</Typography>
</CardContent>
</CardActionArea>
@@ -82,7 +82,7 @@ export default function AwtisKat({artiste}) {
{esByografiOuve && (
<AwtisBiyografi
alias={alias}
paroles={paroles.data}
paroles={paroles}
biographie={biographie}
esByografiOuve={esByografiOuve}
meteEsByografiOuve={meteEsByografiOuve}
components/awtis/cheche-awtis.js
+4 -3
View File
@@ -27,12 +27,13 @@ export default function ChecheAwtis() {
(async () => {
try {
const data = await jwennToutAwtis()
const {data} = await jwennToutAwtis()
const filteredData = data.map(artiste => {
const firstLetter = artiste.attributes.alias[0].toUpperCase()
const firstLetter = artiste.alias[0].toUpperCase()
return {
firstLetter: /\d/.test(firstLetter) ? '0-9' : firstLetter,
...artiste.attributes
...artiste
}
})
if (active) {
components/awtis/mizik-badj-meni.js
+1 -1
View File
@@ -105,7 +105,7 @@ export default function MizikBadjMeni({paroles}) {
<Paper>
<ClickAwayListener onClickAway={handleClose}>
<MenuList autoFocusItem={open} id='menu-list-grow' onKeyDown={() => handleListKeyDown()}>
{sortedTeks.map(({id, attributes}) => <MenuItem key={id} onClick={() => handleClick(attributes.slug)}>{attributes.titre}</MenuItem>)}
{sortedTeks.map(({id, slug, titre}) => <MenuItem key={id} onClick={() => handleClick(slug)}>{titre}</MenuItem>)}
</MenuList>
</ClickAwayListener>
</Paper>
components/awtis/mizik-lis.js
+3 -3
View File
@@ -13,8 +13,8 @@ import {formatKuveti} from '../../lib/kuveti'
import MizikLyen from './mizik-lyen'
function grupPawol(pawol) {
const pawolTrie = pawol.sort((a, b) => a.attributes.titre.localeCompare(b.attributes.titre, 'fr', {sensitivity: 'base'}))
const grupPawol = groupBy(pawol, anPawol => anPawol.attributes.titre[0].toUpperCase())
const pawolTrie = pawol.sort((a, b) => a.titre.localeCompare(b.titre, 'fr', {sensitivity: 'base'}))
const grupPawol = groupBy(pawol, anPawol => anPawol.titre[0].toUpperCase())
const grupCounts = Object.values(grupPawol).map(anPawol => anPawol.length)
const grup = Object.keys(grupPawol)
grup.sort((a, b) => a[0].localeCompare(b[0], 'fr', {sensitivity: 'base'}))
@@ -33,7 +33,7 @@ export default function MizikLis({niAwtis, paroles, meteEsMobilOuve}) {
groupContent={index => <div>{grup[index]}</div>}
itemContent={index => {
const anPawol = pawol[index]
const {couverture} = anPawol.attributes
const {couverture} = anPawol
const kuvetiFormat = formatKuveti(couverture)
return (
components/awtis/mizik-lyen.js
+10 -10
View File
@@ -20,23 +20,23 @@ export default function MizikLyen({niAwtis, anPawol, kuveti, slug, meteEsMobilOu
return (
<Link
passHref
href={`/paroles/${anPawol.attributes.slug}#${anPawol.attributes.slug}`}
href={`/paroles/${anPawol.slug}#${anPawol.slug}`}
style={{textDecoration: 'none', width: '100%', display: 'flex', alignItems: 'center'}}
onClick={() => meteEsMobilOuve(false)}
>
<ListItemButton
sx={{padding: 0}}
id={anPawol.attributes.slug}
selected={slug === anPawol.attributes.slug}
id={anPawol.slug}
selected={slug === anPawol.slug}
>
<ListItemAvatar sx={{ml: 2.5}}>
<Avatar alt={anPawol.attributes.titre} src={`${apiUrl}${kuveti?.url}`} />
<Avatar alt={anPawol.titre} src={`${apiUrl}${kuveti?.url}`} />
</ListItemAvatar>
<ListItemText
primary={<Typography sx={{fontWeight: 'bold'}} color='info.main'>{anPawol.attributes.titre}</Typography>}
secondary={niAwtis ? getAlias(anPawol.attributes.artistes, anPawol.attributes.prioriteArtistes) : null} />
primary={<Typography sx={{fontWeight: 'bold', color: 'info.main'}} >{anPawol.titre}</Typography>}
secondary={niAwtis ? getAlias(anPawol.artistes, anPawol.prioriteArtistes) : null} />
{anPawol.attributes.creativeCommons && (
{anPawol.creativeCommons && (
<Box marginInline={1}>
<Image
width={24}
@@ -48,14 +48,14 @@ export default function MizikLyen({niAwtis, anPawol, kuveti, slug, meteEsMobilOu
</Box>
)}
{esBrandNew(anPawol.attributes.publishedAt) && (
{esBrandNew(anPawol.publishedAt) && (
<FiberNewOutlinedIcon style={{fontSize: 30, marginRight: 5}} color='primary' />
)}
{anPawol.attributes.explicitLyrics && (
{anPawol.explicitLyrics && (
<ExplicitIcon style={{marginRight: 5}} color='error' />
)}
{anPawol.attributes.okiMizikID && (
{anPawol.okiMizikID && (
<LibraryMusicIcon style={{fontSize: 30, marginRight: 5}} color='primary' />
)}
</ListItemButton>
components/files/files-list.js
+11 -11
View File
@@ -50,8 +50,8 @@ export default function FilesList({files}) {
const theme = useTheme()
const {mode} = useColorScheme()
const musicFiles = files.filter(file => file.attributes.mime.startsWith('audio'))
const pdfFiles = files.filter(file => file.attributes.mime === 'application/pdf')
const musicFiles = files.filter(file => file.mime.startsWith('audio'))
const pdfFiles = files.filter(file => file.mime === 'application/pdf')
const sortedMusicFiles = musicFiles.sort((a, b) => {
const extensionOrder = {
@@ -60,7 +60,7 @@ export default function FilesList({files}) {
'.aac': 2,
'.mp3': 3
}
return extensionOrder[a.attributes.ext.toLowerCase()] - extensionOrder[b.attributes.ext.toLowerCase()]
return extensionOrder[a.ext.toLowerCase()] - extensionOrder[b.ext.toLowerCase()]
})
const handleClick = (e, url, fileName) => {
@@ -170,7 +170,7 @@ export default function FilesList({files}) {
{sortedMusicFiles.map(file => (
<StyledTableRow key={file.id}>
<StyledTableCell>
{getQuality(file.attributes.ext.toLowerCase(), file?.attributes?.caption?.toUpperCase())}
{getQuality(file.ext.toLowerCase(), file?.caption?.toUpperCase())}
</StyledTableCell>
<StyledTableCell align='left'>
<Link
@@ -178,11 +178,11 @@ export default function FilesList({files}) {
underline='hover'
sx={{fontWeight: 'bold'}}
aria-label='download'
onClick={e => handleClick(e, `${apiUrl}${file.attributes.url}`, file.attributes.name)}
onClick={e => handleClick(e, `${apiUrl}${file.url}`, file.name)}
>
{file.attributes.name}
{file.name}
</Link>
<small style={{marginLeft: 3}}>({formatSize(file.attributes.size)})</small>
<small style={{marginLeft: 3}}>({formatSize(file.size)})</small>
</StyledTableCell>
</StyledTableRow>
))}
@@ -217,7 +217,7 @@ export default function FilesList({files}) {
<StyledTableRow key={file.id}>
<StyledTableCell>
<strong>
{file.attributes.caption}
{file.caption}
</strong>
</StyledTableCell>
<StyledTableCell align='left'>
@@ -226,11 +226,11 @@ export default function FilesList({files}) {
underline='hover'
sx={{fontWeight: 'bold'}}
aria-label='download'
onClick={e => handleClick(e, `${apiUrl}${file.attributes.url}`, file.attributes.name)}
onClick={e => handleClick(e, `${apiUrl}${file.url}`, file.name)}
>
{file.attributes.name}
{file.name}
</Link>
<small style={{marginLeft: 3}}>({formatSize(file.attributes.size)})</small>
<small style={{marginLeft: 3}}>({formatSize(file.size)})</small>
</StyledTableCell>
</StyledTableRow>
))}
components/komante/komante-list.js
+4 -4
View File
@@ -38,20 +38,20 @@ const StyledList = styled(List)((
export default function KomanteList({commentaires}) {
return (
<StyledList className={classes.root}>
{commentaires.map(({id, attributes}) => (
{commentaires.map(({id, user, contenu, datePublication}) => (
<div key={id}>
<ListItemText
primary={
<Typography gutterBottom style={{textDecoration: 'underline'}} variant='body1'>
<small>{attributes.user.data.attributes.username}</small>
<small>{user.username}</small>
</Typography>
}
/>
<ListItemText
primary={formatJsonString(attributes.contenu)}
primary={formatJsonString(contenu)}
secondary={
<Typography gutterBottom style={{marginBlock: 5, fontStyle: 'italic'}} variant='caption' display='block'>
{format(new Date(attributes.datePublication), 'Pp', {locale: fr})}
{format(new Date(datePublication), 'Pp', {locale: fr})}
</Typography>
}
/>
components/soumet/ekri-teks.js
+1 -1
View File
@@ -191,7 +191,7 @@ function EkriTeks({canAutoTranslate, selectedTeks, setSelectedTeks}) {
username: user.username,
email: user.email
},
artistes: [artiste.data.id],
artistes: [artiste.id],
traductionAuto: tradiksyonOtomatik
}
}, {
components/teks/an-teks.js
+1 -1
View File
@@ -8,7 +8,7 @@ export default function AnTeks({parole, paroleId}) {
<Teks
parole={parole}
paroleId={paroleId}
commentaires={parole?.commentaires.data}
commentaires={parole?.commentaires}
/>
)
}
components/teks/diferans-dialog.js
+1 -1
View File
@@ -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 (
components/teks/drawer-bar.js
+5 -5
View File
@@ -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()))
})
components/teks/lekte.js
+3 -3
View File
@@ -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()
components/teks/pataje.js
+2 -2
View File
@@ -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)
components/teks/teks-drawer.js
+6 -6
View File
@@ -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>
components/teks/teks-kat.js
+9 -10
View File
@@ -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>
components/teks/teks.js
+6 -6
View File
@@ -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'}}>