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

Change awtis to artiste

Browse Source
This commit is contained in:
Cédric FAMIBELLE-PRONZOLA
2022-05-20 02:18:16 +04:00
parent 2aa9e63e14
commit 47bc07c5d8
6 changed files with 143 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/awtis/awtis-biyografi.js
+8 -8
View File
@@ -14,7 +14,7 @@ import {
import MizikBadjMeni from './mizik-badj-meni'
export default function AwtisBiyografi({alias, teks, biyografi, esByografiOuve, meteEsByografiOuve}) {
export default function AwtisBiyografi({alias, paroles, biographie, esByografiOuve, meteEsByografiOuve}) {
const handleClose = () => {
meteEsByografiOuve(false)
}
@@ -40,7 +40,7 @@ export default function AwtisBiyografi({alias, teks, biyografi, esByografiOuve,
>
<Box display='flex' justifyContent='center' alignItems='center'>
<DialogTitle id='scroll-dialog-title' align='center'>{alias}</DialogTitle>
<MizikBadjMeni teks={teks} />
<MizikBadjMeni paroles={paroles} />
</Box>
<DialogContent dividers>
<DialogContentText
@@ -49,9 +49,9 @@ export default function AwtisBiyografi({alias, teks, biyografi, esByografiOuve,
id='scroll-dialog-description'
tabIndex={-1}
>
{biyografi ? (
{biographie ? (
<Typography component='span'>
{biyografi}
{biographie}
</Typography>
) : (
<Typography component='span'>
@@ -62,7 +62,7 @@ export default function AwtisBiyografi({alias, teks, biyografi, esByografiOuve,
</DialogContent>
<DialogActions style={{margin: 'auto'}}>
<Button variant='outlined' color='primary' onClick={handleClose}>
Fèmen
Fermer
</Button>
</DialogActions>
</Dialog>
@@ -72,12 +72,12 @@ export default function AwtisBiyografi({alias, teks, biyografi, esByografiOuve,
AwtisBiyografi.propTypes = {
alias: PropTypes.string.isRequired,
teks: PropTypes.array.isRequired,
biyografi: PropTypes.string,
paroles: PropTypes.array.isRequired,
biographie: PropTypes.string,
esByografiOuve: PropTypes.bool.isRequired,
meteEsByografiOuve: PropTypes.func.isRequired
}
AwtisBiyografi.defaultProps = {
biyografi: null
biographie: null
}
components/awtis/awtis-detay.js
+13 -12
View File
@@ -13,18 +13,19 @@ import KeyboardBackspaceIcon from '@mui/icons-material/KeyboardBackspace'
import AwtisBiyografi from './awtis-biyografi'
import MizikLis from './mizik-lis'
const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:1337'
const IMAGE_URL = process.env.NEXT_PUBLIC_API_URL_ROOT || 'http://localhost:1337'
const noImageUrl = 'https://place-hold.it/140x140?text=Indisponible'
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 AwtisDetay({anAwtis}) {
const router = useRouter()
const [esByografiOuve, meteEsByografiOuve] = useState(false)
const {alias, biyografi, teks, foto} = anAwtis
const sortedTeks = sortTeks(teks)
const gwanBiyo = anAwtis.biyografi.length > 100
const {alias, biographie, paroles, photo} = anAwtis
const sortedTeks = sortTeks(paroles.data)
const gwanBiyo = biographie && biographie.length > 100
const biyo = gwanBiyo ? `${anAwtis.biyografi.slice(0, 100)}...` : anAwtis.biyografi
const biyo = gwanBiyo ? `${biographie.slice(0, 100)}...` : biographie
const handleClick = () => {
meteEsByografiOuve(true)
@@ -45,7 +46,7 @@ export default function AwtisDetay({anAwtis}) {
</Box>
<Box sx={{justifyContent: 'center', display: 'flex', marginBottom: 2}}>
<Avatar
src={`${API_URL}${foto[0].url}`}
src={`${photo?.data?.attributes?.url ? `${IMAGE_URL}${photo?.data?.attributes?.url}` : noImageUrl}`}
alt={`Photo ${alias}`}
sx={{width: 200, height: 200, border: `2px solid ${green[500]}`}}
/>
@@ -69,7 +70,7 @@ export default function AwtisDetay({anAwtis}) {
)}
<Grid item xs={12} md={6}>
<Box marginBottom={3}>
{teks.length > 1 ? (
{paroles.data.length > 1 ? (
<Accordion>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
@@ -77,7 +78,7 @@ export default function AwtisDetay({anAwtis}) {
id='panel-teks-header'
>
<Typography marginRight={2} textAlign='center' variant='body1' component='h2'><strong>Liste des textes</strong></Typography>
<Chip color='primary' label={teks.length} size='small' variant='contained' />
<Chip color='primary' label={paroles.data.length} size='small' variant='contained' />
</AccordionSummary>
<AccordionDetails>
<MizikLis teks={sortedTeks} />
@@ -87,7 +88,7 @@ export default function AwtisDetay({anAwtis}) {
<>
<Typography gutterBottom textAlign='center' variant='body1' component='h2'><strong>Texte</strong></Typography>
<Paper>
<MizikLis teks={teks} />
<MizikLis paroles={paroles.data} />
</Paper>
</>
)}
@@ -102,8 +103,8 @@ export default function AwtisDetay({anAwtis}) {
{esByografiOuve && (
<AwtisBiyografi
alias={alias}
teks={teks}
biyografi={biyografi}
paroles={paroles.data}
biographie={biographie}
esByografiOuve={esByografiOuve}
meteEsByografiOuve={meteEsByografiOuve}
/>
components/awtis/awtis-kat.js
+11 -9
View File
@@ -23,6 +23,7 @@ import AwtisBiyografi from './awtis-biyografi'
const PREFIX = 'awtis-kat'
const SITE_URL = process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3001'
const IMAGE_URL = process.env.NEXT_PUBLIC_API_URL_ROOT || 'http://localhost:1337'
const classes = {
root: `${PREFIX}-root`,
@@ -54,12 +55,13 @@ const Kat = styled('div')((
}
}))
export default function AwtisKat({anAwtis}) {
const noImageUrl = 'https://place-hold.it/140x140?text=Indisponible'
export default function AwtisKat({artiste}) {
const router = useRouter()
const [esByografiOuve, meteEsByografiOuve] = useState(false)
const noImageUrl = 'https://place-hold.it/140x140?text=Pa%20ni%20imaj'
const {alias, biyografi, teks, foto, slug} = anAwtis
const {alias, biographie, paroles, photo, slug} = artiste
const [expanded, setExpanded] = useState(false)
@@ -76,7 +78,7 @@ export default function AwtisKat({anAwtis}) {
className={classes.media}
component='img'
alt={alias}
image={`${foto.length > 0 ? `${process.env.NEXT_PUBLIC_API_URL}${foto[0].url}` : noImageUrl}`}
image={`${photo?.data?.attributes?.url ? `${IMAGE_URL}${photo?.data?.attributes?.url}` : noImageUrl}`}
title={alias}
/>
<CardContent>
@@ -84,7 +86,7 @@ export default function AwtisKat({anAwtis}) {
{alias}
</Typography>
<Typography align='center' variant='body2' color='textSecondary' component='h5'>
{anAwtis.teks.length} tèks
{`${paroles.data.length} ${paroles.data.length > 1 ? 'textes' : 'texte'}`}
</Typography>
</CardContent>
</CardActionArea>
@@ -104,15 +106,15 @@ export default function AwtisKat({anAwtis}) {
</CardActions>
<Collapse unmountOnExit in={expanded} timeout='auto'>
<CardContent>
<MizikLis teks={teks} />
<MizikLis paroles={paroles.data} />
</CardContent>
</Collapse>
</Card>
{esByografiOuve && (
<AwtisBiyografi
alias={alias}
teks={teks}
biyografi={biyografi}
paroles={paroles.data}
biographie={biographie}
esByografiOuve={esByografiOuve}
meteEsByografiOuve={meteEsByografiOuve}
/>
@@ -123,5 +125,5 @@ export default function AwtisKat({anAwtis}) {
}
AwtisKat.propTypes = {
anAwtis: PropTypes.object.isRequired
artiste: PropTypes.object.isRequired
}
components/soumet/chwa-teks.js
+7 -6
View File
@@ -15,7 +15,7 @@ import CircularProgress from '@mui/material/CircularProgress'
import Typography from '@mui/material/Typography'
import AudiotrackIcon from '@mui/icons-material/Audiotrack'
import {jwennTeksEpiUserId} from '../../lib/oki-api'
import {jwennUserEpiToken} from '../../lib/oki-api'
function Chwa(props) {
const {onClose, teksLis, selectedTeks, loading, open} = props
@@ -37,14 +37,14 @@ function Chwa(props) {
</Container>
) : (
<List sx={{pt: 0}}>
{teksLis.length > 0 ? teksLis.map(({id, tit, awtis}) => (
{teksLis.length > 0 ? teksLis.map(({id, titre, artistes}) => (
<ListItem key={id} button onClick={() => handleListItemClick(id)}>
<ListItemAvatar>
<Avatar sx={{bgcolor: green[100], color: green[600]}}>
<AudiotrackIcon />
</Avatar>
</ListItemAvatar>
<ListItemText primary={`${new Intl.ListFormat('fr').format(awtis.map(({alias}) => alias))} - ${tit}`} />
<ListItemText primary={`${new Intl.ListFormat('fr').format(artistes.map(({alias}) => alias))} - ${titre}`} />
</ListItem>
)) : (
<Typography sx={{textAlign: 'center'}} variant='button' component='div'>Aucun texte</Typography>
@@ -70,7 +70,6 @@ Chwa.propTypes = {
export default function ChwaTeks({selectedTeks, setSelectedTeks}) {
const {data: session} = useSession()
const [loading, setLoading] = useState(false)
const {user} = session
const [open, setOpen] = useState(false)
const [teksLis, setTeksLis] = useState([])
@@ -78,9 +77,11 @@ export default function ChwaTeks({selectedTeks, setSelectedTeks}) {
setOpen(true)
setLoading(true)
const jwennTeks = await jwennTeksEpiUserId(user.id)
const user = await jwennUserEpiToken(session?.jwt)
const {paroles} = user
const parolesList = paroles && paroles.length > 0 ? paroles : []
setTeksLis(jwennTeks)
setTeksLis(parolesList)
setLoading(false)
}
pages/awtis/[slug].js
+46 -21
View File
@@ -7,34 +7,38 @@ import HeadLayout from '../../components/head-layout'
import {jwennAwtisEpiSlug} from '../../lib/oki-api'
import Custom404 from '../404'
import Custom500 from '../500'
export default function SlugAwtis({error, anAwtis}) {
if (error) {
return <Custom404 statusCode={error} />
export default function SlugAwtis({errorCode, error404, errorMessage, anAwtis}) {
if (error404) {
return <Custom404 statusCode={error404} />
}
const {foto} = anAwtis
if (errorCode) {
console.log('⚠️ error', errorMessage)
return <Custom500 statusCode={errorCode} />
}
const {photo} = anAwtis
const formatKouveti = () => {
if (foto.length === 0) {
if (!photo) {
return null
}
const [anFoto] = foto
if (anFoto && anFoto.formats && anFoto.formats.large) {
return anFoto.formats.large
if (photo && photo.formats && photo.formats.large) {
return photo.formats.large
}
if (anFoto && anFoto.formats && anFoto.formats.medium) {
return anFoto.formats.medium
if (photo && photo.formats && photo.formats.medium) {
return photo.formats.medium
}
if (anFoto && anFoto.formats && anFoto.formats.small) {
return anFoto.formats.small
if (photo && photo.formats && photo.formats.small) {
return photo.formats.small
}
return anFoto
return photo
}
return (
@@ -43,10 +47,10 @@ export default function SlugAwtis({error, anAwtis}) {
imageWidth={formatKouveti() ? formatKouveti().width : null}
imageHeight={formatKouveti() ? formatKouveti().height : null}
imageMime={formatKouveti() ? formatKouveti().mime : null}
title={`${anAwtis.alias} - Paroles et Traductions`} tab={2} slug={`awtis/${anAwtis.slug}`}
title={`${anAwtis.attributes.alias} - Paroles et Traductions`} tab={2} slug={`awtis/${anAwtis.attributes.slug}`}
>
<Box sx={{display: 'flex', flexDirection: 'column', minHeight: '100vh'}}>
<AwtisDetay anAwtis={anAwtis} />
<AwtisDetay anAwtis={anAwtis.attributes} />
</Box>
<Footer />
</HeadLayout>
@@ -55,21 +59,42 @@ export default function SlugAwtis({error, anAwtis}) {
export async function getServerSideProps({query}) {
const {slug} = query
const anAwtis = await jwennAwtisEpiSlug(slug)
let anAwtis
let error404
let errorCode
let errorMessage
try {
anAwtis = await jwennAwtisEpiSlug(slug)
} catch (error) {
errorMessage = error.message
errorCode = true
}
if (!anAwtis) {
error404 = true
}
return {
props: {
error: Boolean(!anAwtis),
anAwtis: anAwtis ? anAwtis : null
error404: error404 || null,
errorCode: errorCode || null,
errorMessage: errorMessage || null,
anAwtis: anAwtis || null
}
}
}
SlugAwtis.defaultProps = {
anAwtis: null
anAwtis: null,
error404: null,
errorCode: null,
errorMessage: null,
}
SlugAwtis.propTypes = {
error: PropTypes.bool.isRequired,
error404: PropTypes.bool,
errorCode: PropTypes.bool,
errorMessage: PropTypes.string,
anAwtis: PropTypes.object
}
pages/awtis/index.js
+58 -23
View File
@@ -1,51 +1,86 @@
import PropTypes from 'prop-types'
import {Container, Grid} from '@mui/material'
import {Box, Container, Grid} from '@mui/material'
import {jwennAwtisKantite, jwennAwtisPajinasyon} from '../../lib/oki-api'
import {jwennAwtisPajinasyon} from '../../lib/oki-api'
import AwtisKat from '../../components/awtis/awtis-kat'
import Pajinasyon from '../../components/awtis/pajinasyon'
import HeadLayout from '../../components/head-layout'
import Footer from '../../components/footer'
const AWTIS_POU_CHAK_PAJ = process.env.NEXT_PUBLIC_AWTIS_POU_CHAK_PAJ || 6
import Custom404 from '../404'
import Custom500 from '../500'
export default function Awtis({errorCode, error404, errorMessage, pajTotal, awtisPouChakPaj, paj}) {
if (error404) {
return <Custom404 statusCode={error404} />
}
if (errorCode) {
console.log('⚠️ error', errorMessage)
return <Custom500 statusCode={errorCode} />
}
export default function Awtis({pajTotal, awtisPouChakPaj, paj}) {
return (
<HeadLayout title='Awtis - Liste des artistes' tab={2} slug='awtis'>
<Pajinasyon pajTotal={pajTotal} paj={paj} />
<Container>
<Grid container spacing={{xs: 2, md: 3}}>
{awtisPouChakPaj.map(anAwtis => <AwtisKat key={anAwtis.id} anAwtis={anAwtis} />)}
</Grid>
</Container>
<Box sx={{display: 'flex', flexDirection: 'column', minHeight: '100vh'}}>
<Pajinasyon pajTotal={pajTotal} paj={paj} />
<Container sx={{marginBottom: 5, flexGrow: 100}}>
<Grid container spacing={{xs: 2, md: 3}}>
{awtisPouChakPaj.map(artiste => <AwtisKat key={artiste.id} artiste={artiste.attributes} />)}
</Grid>
</Container>
<Footer />
</Box>
</HeadLayout>
)
}
Awtis.propTypes = {
pajTotal: PropTypes.number.isRequired,
awtisPouChakPaj: PropTypes.array.isRequired,
paj: PropTypes.number.isRequired
}
export async function getServerSideProps({query}) {
const {paj} = query
let error404
let errorCode
let errorMessage
let awtisPouChakPaj
const pajParsed = Array.isArray(paj) ? Number.parseInt(paj[1], 10) : Number.parseInt(paj, 10)
const awtisPouChakPaj = await jwennAwtisPajinasyon(pajParsed)
const awtisCountRequest = await jwennAwtisKantite()
const awtisCount = Number.parseInt(awtisCountRequest, 10)
const pajTotal = Math.ceil(awtisCount / AWTIS_POU_CHAK_PAJ)
if (pajParsed > pajTotal) {
throw new Error('Pa twouvé paj-la')
try {
awtisPouChakPaj = await jwennAwtisPajinasyon(pajParsed)
} catch (error) {
errorMessage = error.message
errorCode = true
}
const pajTotal = Math.ceil(awtisPouChakPaj.meta.pagination.total / awtisPouChakPaj.meta.pagination.limit)
if (pajParsed > pajTotal || pajParsed < 1) {
error404 = true
}
return {
props: {
error404: error404 || null,
errorCode: errorCode || null,
errorMessage: errorMessage || null,
pajTotal,
awtisPouChakPaj,
awtisPouChakPaj: awtisPouChakPaj.data,
paj: pajParsed
}
}
}
Awtis.defaultProps = {
error404: null,
errorCode: null,
errorMessage: null,
}
Awtis.propTypes = {
error404: PropTypes.bool,
errorCode: PropTypes.bool,
errorMessage: PropTypes.string,
pajTotal: PropTypes.number.isRequired,
awtisPouChakPaj: PropTypes.array.isRequired,
paj: PropTypes.number.isRequired
}