Cédric FAMIBELLE-PRONZOLA
179 lines
11 KiB
JavaScript
179 lines
11 KiB
JavaScript
import {useState, useEffect, forwardRef} from 'react'
|
||
import {useRouter} from 'next/router'
|
||
import PropTypes from 'prop-types'
|
||
|
||
import Container from '@mui/material/Container'
|
||
import Grid from '@mui/material/Grid'
|
||
import Skeleton from '@mui/material/Skeleton'
|
||
import Card from '@mui/material/Card'
|
||
import CardActionArea from '@mui/material/CardActionArea'
|
||
import CardContent from '@mui/material/CardContent'
|
||
import Typography from '@mui/material/Typography'
|
||
import MuiAlert from '@mui/material/Alert'
|
||
import Snackbar from '@mui/material/Snackbar'
|
||
|
||
import ExplicitIcon from '@mui/icons-material/Explicit'
|
||
|
||
import {styled} from '@mui/material/styles'
|
||
|
||
import {format} from 'date-fns'
|
||
import {fr} from 'date-fns/locale'
|
||
|
||
import Image from 'next/image'
|
||
import {useMediaQuery} from '@mui/material'
|
||
import {jwennDenyeTeks} from '../../lib/oki-api'
|
||
|
||
const PREFIX = 'denye-teks'
|
||
const TEKS_PREFIX = 'teks-kat'
|
||
const KAT_ARRAY = Array.from({length: 6})
|
||
|
||
const classes = {
|
||
container: `${PREFIX}-container`
|
||
}
|
||
|
||
const teksClasses = {
|
||
root: `${TEKS_PREFIX}-root`,
|
||
media: `${TEKS_PREFIX}-media`
|
||
}
|
||
|
||
const Root = styled('div')(() => ({
|
||
[`&.${classes.container}`]: {
|
||
marginTop: '1em',
|
||
marginBottom: '2em'
|
||
}
|
||
}))
|
||
|
||
const StyledGrid = styled(Grid)({
|
||
[`& .${teksClasses.root}`]: {
|
||
maxWidth: 345
|
||
},
|
||
[`& .${teksClasses.media}`]: {
|
||
height: 240,
|
||
objectFit: 'contain'
|
||
}
|
||
})
|
||
|
||
const Alert = forwardRef(function Alert(props, ref) {
|
||
return <MuiAlert ref={ref} elevation={6} variant='filled' {...props} />
|
||
})
|
||
|
||
export default function DenyeTeks({error, setError}) {
|
||
const router = useRouter()
|
||
const [teks, setTeks] = useState([])
|
||
const [isLoading, setIsLoading] = useState(true)
|
||
const isMobile = useMediaQuery('(max-width:527px)')
|
||
const [isOpen, setIsOpen] = useState(false)
|
||
|
||
const handleClick = slug => {
|
||
router.push(`/paroles/${slug}#${slug}`).then(() => window.scrollTo(0, 0))
|
||
}
|
||
|
||
const noImageUrl = 'https://place-hold.it/140x140?text=Image%20indisponible'
|
||
const formatDate = date => format(new Date(date), 'P', {locale: fr})
|
||
|
||
useEffect(() => {
|
||
const getTeks = async () => {
|
||
try {
|
||
const denyeTeks = await jwennDenyeTeks()
|
||
setTeks(denyeTeks)
|
||
} catch (error_) {
|
||
setIsOpen(true)
|
||
setError(error_)
|
||
setIsLoading(false)
|
||
}
|
||
}
|
||
|
||
getTeks()
|
||
|
||
setIsLoading(false)
|
||
}, [setError])
|
||
|
||
const handleClose = (event, reason) => {
|
||
if (reason === 'clickaway') {
|
||
return
|
||
}
|
||
|
||
setIsOpen(false)
|
||
}
|
||
|
||
return (
|
||
<Root className={classes.container}>
|
||
<Container>
|
||
<Grid container spacing={3}>
|
||
{error && (
|
||
<Snackbar open={isOpen} autoHideDuration={3000} onClose={handleClose}>
|
||
<Alert severity='error' onClose={handleClose}>
|
||
<strong>Les éléments ne peuvent pas s’afficher</strong> : <i>{error.message}</i>
|
||
</Alert>
|
||
</Snackbar>
|
||
)}
|
||
{!error && KAT_ARRAY.map((kat, index) => (
|
||
<StyledGrid key={index} item xs={12} sm={6} md={4}> {/* eslint-disable-line react/no-array-index-key */}
|
||
<Card className={classes.root}>
|
||
{isLoading || teks.length === 0 ? (
|
||
<CardContent>
|
||
<Skeleton variant='rectangular' width='100%' height={isMobile ? 250 : 352} />
|
||
<Skeleton />
|
||
<Skeleton width='30%' />
|
||
<Skeleton width='10%' />
|
||
<Skeleton width='30%' />
|
||
</CardContent>
|
||
) : (
|
||
<CardActionArea onClick={() => handleClick(teks[index].slug)}>
|
||
<Image
|
||
src={teks[index].kouveti ? `${process.env.NEXT_PUBLIC_API_URL}${teks[index].kouveti.url}` : noImageUrl}
|
||
alt={teks[index].tit}
|
||
width={500}
|
||
height={500}
|
||
placeholder='blur'
|
||
blurDataURL='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKYAAACmCAYAAABQiPR3AAAQMElEQVR4Xu2d4Xrbxg5Er9//WdqkT9heu59cRaE4Z2awEi2zf3cGiwUOsaQbJ29//fXX3/8r/vv7b2YnuilNcZzI+vb2Fvm2TG4sUrOtfYhvSvO+P4l1nefbCWbPlAvT3o5OLLfZ1/sS75TmBLNnLIrgwKQ2cGIRcO7tR7xTmhNM1fWF6w5Q58TUjTjMVU6ezuTJ0yWYUUyB+Z4NjUVrdr5j7vRYFVGtX0JT3QxuPAqFiUQksdo6EP+UJhko58QkpAANgQmE+ZTsxSPAqL1IjCnNCabqxuL1aTi3rnUCCzkmiaM0av06D0f7ce6j/LiIJE40pCmrNCvAXJUrqaXSqPXDg0kOMKVZ1Uga9yvASWpNrl8ah8S6rW81MWliRDeloQCt0r0KmJP9ILEOCSZNnOpWQUfjHh1OUscpTTIt63dMkjxJjMQhmj1wlH8SpslY9GGgOlWHSxyiIxrS/63cD3GVkwMSzb3mUO8kUJOxKHRER2uhdGq9+fCpJiZNjOimNFuNIbF/e78Z+tNCR4ST1kPp1LozeUcn5lRiJA7R3B4u8VzHmIBqIgaZglRDa0J0RJNe44eYmOSARNNeHfea28LV+il0REfrSHRE89Jg0gK0V8deY1u4Wj+BTmmcOiqtWp/oRfTxM5mYiqXWp6/wV52ctI5ERzTNtIyv8qnESByimXhC1cT5KFb5UdT6SY7tByCpN9E8HEyaFElMxVLrq94rX+lad2pIejap2a2z+4c46EGJTmnU+qMm5W0B28nX+p3JSWs4DZyz79Z5rHdMZzOlbdefBeV1ERvAGi8FU9U4eT8nMYlGneEEU1VIrLeAtf576blwED3R0Mmryo7BpEnRxFQ8tU73UQWYWG/hav3J5Es8pCdTfXkKmOqAan3q8BNQXmJMwNXGIHXbOjP1ER3RkLojMN3NlL5dPyKY7zm1YDWQq5ruwUC8RDPZFwkmTYh+jKh4an3y8OTJTTRTgCpQSa1U/jQG0RGNyufS3y8H5sThb2NMgzQ5PUkjUw2t5bSOvE7sgkkTotNSTTuyH9GQg+81cwrUqTgpeMpHa0l0RHMvny3vXTCTjZRn9XoL5Ja/hav1K7jSddULZ9iogZO83/4GJk04gWAvttpXrd/m4+pVg1vAWr/Kz1l3akO0ROPy8glmGpw+WSp+u359cBXLaeKttgGs8TY5p7WhdaQ6J4+3nz9/sr95VVRGJfeoaanymGhwA1jjbXN3a0P0RJPcZiNgkuQeASbJo23utb+BrPEmZ3BrQ/VUR2/Wi+4hYKrkG2jdAydN3fO0gLV+ch5V/2SiJR88Th41mGSzBrw2PmnchKYBrPGq3En9viWYqjANtMlTqxrZrLeAtf4UMOejJL2hFAe/fWQ2Hz9ksxS8NnYDWOudAKyJQWq3dUbHt0o78o6pkmvWG28L1oS/Aeu36QF+10jVi5yJxqC65kaL3zFJcqumJdm7nQhTYE3FIWA1GlpTqkuv/Gpi0uSOAibN915jW7hafwMc8Tr1WaUdecckyR0BSpInadznUwyu1L14RwTUqdEq7VbN7KucJrcCTLp3825DQG0Aa7wkN0ezqp5O3Lu3lPtVTjZdASWFjeTnNG/VBHw2oG6dHL2jHQGTbrgCTLI30UxBeR0nhSz1tWdw6+ToHe3uQ08nJt1Q6e6tpzC3X39tkyfePx8JqOrPbT0cvaNVdUfvmM6GKWCpj17xqhBT6w1kjZfk7/QxeeCT+NVVTjdUuhXTUu1JGjataQFr/c3Uu/Y6tXW0qt7vseTEdDZMp17qO9q0vC14C1jrd3rXwNzsc28y3wXT3UzpjzItVZ4THzXTMd7jOZA6Z9yaXq7f1ZOpvAlmslE69Vb4Joo9Of0cqNQ194h1p/+O1pnKv4CZbqJ8CXxNTPJEpg1uIGu8ab6uT9V9orZkj7cfP37Uv/OjNpq+xtV+yRel28AUstTn5pfoaV2b+tI9ajDVRtPTUu3XFC1pZgpa6ktyJB5a16a+zh5PAzMBln6FOwUgTVOaFLLUp/Jx1916uXrat18+GpurXCWYwJd4Jt573GZu6VPQUt9EzqqHzgfLvXzcPd7jVBNTbTj5bqn2Sp7KicbexkghS33NGUhNWzCTPSow1YbJ5Es8zTtP09Q9bwNZ43XOo/q3FetRni8DpiqIWncaNqlNIUt9JPe0Vokv8VzOEF3lZEP3Gn/GtNzbcwqOJk7jnZp46SsSYWT31kk+ftSmCWQuyOkVrnKf/Kj5fPqf/CsZyZmbD8p2v+gqJ5smkE16Jr8Or2M1E6zxpjmQXqnr343h6u/tb13lZNPJaamuEZKPiqEaMzlBp+BMck48tL7NdP2SYCaQ3x40KS5pYgpZ6iM5TWqSuiWeGky66eSV3IJJc24amoKW+ppcHa9bO1evcsFXOdk4AWkS5BVXiirgx4t6+HGT+khOjYb0evXNhMCkiR4FTJpv07xbbwpZ6pvMvX2gV9Rbgkk3nYRy74NF5aPWVzX0FSZnUrvEc68H17F2wXQ2nQQziXU5rJPzCkjTCZj6ps6Q1i31qSl9F0x3wwQm9/1S5aTWp5qo4qSQpT6Vj1pP65b6yBDZBNPd8BFQ7l3v5KCqOdPrKWSpr8nf7TfphcpH7fkbmMqwteEjwFR5qXVVqBXrKWSpLzlDWrfUR6H+BDPdSPmmrusEftKovbgTgKQxUh85c3vDqJ7v5UC9b3/++Wf1y2gpMFPA0ifwtli0QM3X9mXPFLLUR+B0zq8+VMh+bp+eAuYklO6B04a0kDT+xuu+einI0vq5vgpMtdkUgOlUbqbkvQalkKS+dupOTTt3ALT7fhsw1UOkJsX1egpZ6puAc+L8aYzEtwxMd8q509V5gpPCKFBTyFJf82BMnD+NkfpiMNWGLmiu/tlgph9FE2DSCap6pB6+9jpu9n95MJviqMalkKU+lc+q9bSGqe/joU9+XKQ2dK/xvemXTNL2SXcanECWeJycprWq39Nf/ocBM4GPFItoJpqYgJZ4JnJ1YyQ1TDy3eT10YroAJpP3kdOSvuttwXCCuf+I2GCSp2EKwAZMkqc7Pfb0CWiJZzJnFSupYeLZfHDdd0y1cQLTFMjPmJavPDVVr1e8W37W8wRTzQ2+nkzAxMMzypUJlHsfsW4m1lVOkp2amEmcy+FJnm6hiD6BLPGQXFpNUsPEcy/Ph4E5eV2rAqj1tml3ixn8tuQRwUzrl/rqd0yy8RSA32VivjflaHCSPt/ClHh2PybpOybZOIHJBZm8x5Bcz6l5vwJJ/RLPS4FJCkA0J5jbFUhrl/rqd0yy8SMmpspDra8C8lV+bJTUL/GoPqCPH7rxCWb2vnikd0za62uwEs8JpqrA8HoCWeIZTvszXAJZ4lH5y4npbDr5IZPEIh9GqiDtegJZ4mnz3PI7vb74Ew/JfQzMR1zjBLxVhSLFTH/0c4L5X3Uv/TvBpMRBXQJZ4oHpWLLkoU48ZFrvgulsek7Mf8udQJZ4LOKg2On39FV+u/cJJmwalSWQJR6aj6N7Fphb+55gOp0T2hSw1DeY+kcoF0xXT67wi+YumO6m51WeXePp9T8N5QnmVUWTHwmpB0atr2jo51P+xf90kVs7V39b+z3/y03M5MmfgDW9jlPfRM7XMRLIEg/dcxNMd0Oldydj8lpADzzd0GZaHukaTx5o1fe9WivvCeYQqcnkSzxD6W6GUbA4V7HKU+11gqkqCNZTwFIfSCmSKFieCqabHLkCXv0qTwFLfRF1wOT23tU7r1u/TcxkM+V5NJjkYQF9QpIUrtSHkgpFqo9TE5Ps8wuYxLB1ZuVzwVRgqf2UP+zbpi0FLPVN5t6CRvqQ8PLxUXj9Oz+rNnpVMFO4Ut9KKJOHeRUvv4CZbkIO9AwwSV5Noxu4Gm+Ts/K6DLj6y/7E9zkxifjewZT3BPO/yh0VyuRBVn1PefmYmH/88Uf1z6mQAz0LTJKbmiJb6w1cjTfJ1fG4oLl6a2KeYDqty/+gxscUCP5fupddp3ZBc/UvD6Y7CdMC3ra5Aavxdrh5bqdWjvY6C+J76lW+B5hKXq3ftsPVT0L5FaalM80S7QnmnQHRgNlOu9bvzbxO7dTJ0b4MmOq6ToqSeFqoWj+d3MnZthB24jjabwOmAndvbpCCTgH1yDjkXGqeOjEc7QmmqvzV+m1hpyC6bDERL4mRAuO+O6b7EN9hP37IRCQHNDgdlSZA0WubJNrUhnqpLvkQ/dJgEnhJE6c1z4bSnXwJOM0eBOgTzGkq/x+vBbP1N9C4DzuBLAH/0GCSIiWFWcDiZ8gGqsZ770xJfRyPo3UemKeDqeAjByealTBOfOysgNIBIZlqqnfNw/IQMNUB9sAi0BHNajAbsBovOVdSH+qhuus8iecEk3RWaBqwGq+TOoHBhUcNnKdPTJJgMxVJUYnGaSTVNmA1Xppfep3TelKdC/3IxPyuYLZgtf6VcFLgqO7bgkkeDreRSt+A1XhVXs0V6gJ0ggm7kRQKhv5F1oDVeJNcXdjc69+tOdEf4ion044chsRpG/vub8BqvBO50zo6tXRiUuhfDkynoEmjG7Aab5LrlseBiGqpzpncJ5iw4y1UrR+miWQUpGndIcFUk0wVQa3fdsTV73W0har1I9oMkVMboiUatz8Pm5gtmMrfXlv3+tpC1foN3rDUAYloiebLgknAW1GAlZOy/VDCpAVCWkuiI5oTzI0muYWbmnJTcQLupIXWhOiIxgbz8pdqJcGdl9mpidjkqbyTIE3GkpQFAlWLS8hpHY078ncX0c3UIdU6gZv26H2vVfCsikvPRnWT9SaxnKn5bcGkzUt0rwQmHQbLwKQJ7DVKJdeuT+SYgOZ4VkB5G1PVkeZL4xAd0UQTc6LpJDmlUesTedLGubpJKEksUqtmkNBXtLQne/mP/I3CkwcgxSYaF6oJPYGJ7OPGaepBvFOaeGKm5J9gdn+w41I/F8jrRhN4th4K4pvSvDyY7QNEppajaYCagLKpxxR0JM4JpkPVgLYFs/U7N5YDhxM3AXPvgRr5d34mD0APSHUD3O2GaKFq/QloySsAqTfR0HwPB6ZzLSWFmAR1AqqJGAlorofUmmhiMB0w6CYritDkOQVnC1Xrv3cOFxCin9JQZkb+kVMHvMkDklhTEN7GaaFq/XvncutC9FOaw4JJJh0pgvNeuwLOFqzWf4JpdpVApTRq3ZnQZvpI3kLV+kmS0zUk8YjmnJike6GmBav1k7QdSIh2SnOCSboXaFqoWj9NmYDk3DwkHtFs5b/le/jHD3nHpJpnvGe2YLX+E0xagRsdeWqmNI8Gs4Wq9bstIXWmNSSxiOacmG4Xgb4Fq/WDFH+ROKAorVp3bzn1GrF5lU9vQl94VbL3GkOK5jZ1S9+C1frdMzh1UVq1Ps3MCSbsdgtV64dpnhOzmV4rnj4SM2nuxdOC1fqT3J2aEK3SqHWHmZeYmM01QhvegtX6aZ4rX4cUeGr9BDPpovC0YLX+5EgOKESrNGr9BDPp4gmmrJoCT62fYMoS+4J24rV+P+N/HRQWolMate6A+Q/ZfEDmsYKmfQAAAABJRU5ErkJggg=='
|
||
/>
|
||
<CardContent>
|
||
<Typography display='inline' style={{marginRight: 5}} variant='h6' component='h2'>
|
||
{teks[index].tit}
|
||
</Typography>
|
||
{teks[index].eksplisit && (
|
||
<ExplicitIcon style={{marginRight: 5}} color='secondary' fontSize='small' />
|
||
)}
|
||
<Typography variant='caption'>
|
||
{teks[index].user && (
|
||
<>
|
||
(<i>texte soumis par {teks[index].user.username}</i>)
|
||
</>
|
||
)}
|
||
{teks[index].userAdmin && !teks[index].user && (
|
||
<>
|
||
(<i>texte soumis par {teks[index].userAdmin}</i>)
|
||
</>
|
||
)}
|
||
</Typography>
|
||
<Typography variant='body2' color='textSecondary' component='p'>
|
||
{new Intl.ListFormat('fr').format(teks[index].awtis.map(({alias}) => alias))}
|
||
</Typography>
|
||
<Typography variant='body2' color='textSecondary' component='p'>
|
||
{teks[index].lanne}
|
||
</Typography>
|
||
<Typography align='center' style={{marginTop: '0.5em'}} variant='body1' color='textSecondary' component='p'>
|
||
Publié le : {formatDate(teks[index].published_at)}
|
||
</Typography>
|
||
</CardContent>
|
||
</CardActionArea>
|
||
)}
|
||
</Card>
|
||
</StyledGrid>
|
||
))}
|
||
</Grid>
|
||
</Container>
|
||
</Root>
|
||
)
|
||
}
|
||
|
||
DenyeTeks.defaultProps = {
|
||
error: null
|
||
}
|
||
|
||
DenyeTeks.propTypes = {
|
||
error: PropTypes.object,
|
||
setError: PropTypes.func.isRequired
|
||
}
|