pawol.nu/components/soumet/chwa-teks.js

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.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.propTypes = {
  selectedTeks: PropTypes.object,
  setSelectedTeks: PropTypes.func.isRequired,
}