Cédric FAMIBELLE-PRONZOLA
118 lines
3.4 KiB
JavaScript
118 lines
3.4 KiB
JavaScript
import {useState} from 'react'
|
|
import {useSession} from 'next-auth/react'
|
|
import PropTypes from 'prop-types'
|
|
import Button from '@mui/material/Button'
|
|
import Avatar from '@mui/material/Avatar'
|
|
import List from '@mui/material/List'
|
|
import ListItem from '@mui/material/ListItem'
|
|
import ListItemAvatar from '@mui/material/ListItemAvatar'
|
|
import ListItemText from '@mui/material/ListItemText'
|
|
import DialogTitle from '@mui/material/DialogTitle'
|
|
import Dialog from '@mui/material/Dialog'
|
|
import {green} from '@mui/material/colors'
|
|
import Container from '@mui/material/Container'
|
|
import CircularProgress from '@mui/material/CircularProgress'
|
|
import Typography from '@mui/material/Typography'
|
|
import AudiotrackIcon from '@mui/icons-material/Audiotrack'
|
|
|
|
import {jwennUserEpiToken} from '../../lib/oki-api'
|
|
|
|
function Chwa(props) {
|
|
const {onClose, teksLis, selectedTeks, loading, open} = props
|
|
|
|
const handleClose = () => {
|
|
onClose(selectedTeks)
|
|
}
|
|
|
|
const handleListItemClick = value => {
|
|
onClose(value)
|
|
}
|
|
|
|
return (
|
|
<Dialog open={open} onClose={handleClose}>
|
|
<DialogTitle>Choisir la parole à modifier</DialogTitle>
|
|
{loading ? (
|
|
<Container sx={{textAlign: 'center', marginBottom: 1}}>
|
|
<CircularProgress size={20} sx={{color: '#29d'}} />
|
|
</Container>
|
|
) : (
|
|
<List sx={{pt: 0}}>
|
|
{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(artistes.map(({alias}) => alias))} - ${titre}`} />
|
|
</ListItem>
|
|
)) : (
|
|
<Typography sx={{textAlign: 'center'}} variant='button' component='div'>Aucun texte</Typography>
|
|
)}
|
|
</List>
|
|
)}
|
|
</Dialog>
|
|
)
|
|
}
|
|
|
|
Chwa.defaultProps = {
|
|
selectedTeks: null
|
|
}
|
|
|
|
Chwa.propTypes = {
|
|
onClose: PropTypes.func.isRequired,
|
|
teksLis: PropTypes.array.isRequired,
|
|
loading: PropTypes.bool.isRequired,
|
|
open: PropTypes.bool.isRequired,
|
|
selectedTeks: PropTypes.object,
|
|
}
|
|
|
|
export default function ChwaTeks({selectedTeks, setSelectedTeks}) {
|
|
const {data: session} = useSession()
|
|
const [loading, setLoading] = useState(false)
|
|
const [open, setOpen] = useState(false)
|
|
const [teksLis, setTeksLis] = useState([])
|
|
|
|
const handleClickOpen = async () => {
|
|
setOpen(true)
|
|
setLoading(true)
|
|
|
|
const user = await jwennUserEpiToken(session?.jwt)
|
|
const {paroles} = user
|
|
const parolesList = paroles && paroles.length > 0 ? paroles : []
|
|
|
|
setTeksLis(parolesList)
|
|
setLoading(false)
|
|
}
|
|
|
|
const handleClose = value => {
|
|
const teks = teksLis.find(({id}) => id === value)
|
|
setSelectedTeks(teks)
|
|
setOpen(false)
|
|
}
|
|
|
|
return (
|
|
<Container sx={{textAlign: 'center', marginBottom: 1}} maxWidth='sm'>
|
|
<Button variant='outlined' onClick={handleClickOpen}>
|
|
Modifier mes paroles
|
|
</Button>
|
|
<Chwa
|
|
selectedTeks={selectedTeks}
|
|
teksLis={teksLis}
|
|
open={open}
|
|
loading={loading}
|
|
onClose={handleClose}
|
|
/>
|
|
</Container>
|
|
)
|
|
}
|
|
|
|
ChwaTeks.defaultProps = {
|
|
selectedTeks: null
|
|
}
|
|
|
|
ChwaTeks.propTypes = {
|
|
selectedTeks: PropTypes.object,
|
|
setSelectedTeks: PropTypes.func.isRequired,
|
|
}
|