diff --git a/components/teks/denye-teks.js b/components/teks/denye-teks.js index 73d551a..04a4f2e 100644 --- a/components/teks/denye-teks.js +++ b/components/teks/denye-teks.js @@ -1,15 +1,41 @@ -import {Container, Grid} from '@mui/material' +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 TeksKat from './teks-kat' +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', @@ -17,14 +43,136 @@ const Root = styled('div')(() => ({ } })) -export default function DenyeTeks(denyeTeks) { +const StyledGrid = styled(Grid)({ + [`& .${teksClasses.root}`]: { + maxWidth: 345 + }, + [`& .${teksClasses.media}`]: { + height: 240, + objectFit: 'contain' + } +}) + +const Alert = forwardRef(function Alert(props, ref) { + return +}) + +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 ( - {Object.values(denyeTeks).map(t => )} + {error && ( + + + Les éléments ne peuvent pas s’afficher : {error.message} + + + )} + {!error && KAT_ARRAY.map((kat, index) => ( + {/* eslint-disable-line react/no-array-index-key */} + + {isLoading || teks.length === 0 ? ( + + + + + + + + ) : ( + handleClick(teks[index].slug)}> + {teks[index].tit} + + + {teks[index].tit} + + {teks[index].eksplisit && ( + + )} + + {teks[index].user && ( + <> + (texte soumis par {teks[index].user.username}) + + )} + {teks[index].userAdmin && !teks[index].user && ( + <> + (texte soumis par {teks[index].userAdmin}) + + )} + + + {new Intl.ListFormat('fr').format(teks[index].awtis.map(({alias}) => alias))} + + + {teks[index].lanne} + + + Publié le : {formatDate(teks[index].published_at)} + + + + )} + + + ))} ) } + +DenyeTeks.defaultProps = { + error: null +} + +DenyeTeks.propTypes = { + error: PropTypes.object, + setError: PropTypes.func.isRequired +} diff --git a/components/teks/teks-drawer.js b/components/teks/teks-drawer.js index 70fc5d6..be87d44 100644 --- a/components/teks/teks-drawer.js +++ b/components/teks/teks-drawer.js @@ -117,11 +117,11 @@ const Root = styled('div')(( const drawerWidth = 240 -export default function TeksDrawer({teks, anTeks, komante, denyeTeks}) { +export default function TeksDrawer({teks, anTeks, komante}) { const theme = useTheme() const [esMobilOuve, meteEsMobilOuve] = useState(false) const [open, setOpen] = useState(false) - const [error, setError] = useState('') + const [error, setError] = useState(null) const [success, setSuccess] = useState('') const handleClose = (event, reason) => { @@ -230,7 +230,7 @@ export default function TeksDrawer({teks, anTeks, komante, denyeTeks}) { /> ) : ( - + )} @@ -241,12 +241,10 @@ export default function TeksDrawer({teks, anTeks, komante, denyeTeks}) { TeksDrawer.propTypes = { teks: PropTypes.array.isRequired, anTeks: PropTypes.object, - komante: PropTypes.array, - denyeTeks: PropTypes.array + komante: PropTypes.array } TeksDrawer.defaultProps = { anTeks: null, - komante: null, - denyeTeks: null + komante: null } diff --git a/pages/index.js b/pages/index.js index f313f61..0c85ac9 100644 --- a/pages/index.js +++ b/pages/index.js @@ -1,4 +1,4 @@ -import PropTypes from 'prop-types' +import {useState} from 'react' import {Container, Typography, Box, Divider, Chip} from '@mui/material' import ArrowCircleDownIcon from '@mui/icons-material/ArrowCircleDown' @@ -6,9 +6,10 @@ import HeadLayout from '../components/head-layout' import Footer from '../components/footer' import RezoDialog from '../components/rezo/rezo-dialog' import DenyeTeks from '../components/teks/denye-teks' -import {jwennDenyeTeks} from '../lib/oki-api' -export default function Home({teks}) { +export default function Home() { + const [error, setError] = useState(null) + return ( @@ -28,11 +29,13 @@ export default function Home({teks}) { - - - } label='Derniers textes publiés ' variant='outlined' /> - - + + {!error && ( + + } label='Derniers textes publiés ' variant='outlined' /> + + )} +