Create ChwaTeks component

2022-03-25 00:05:49 +04:00
parent 92ac4d90db
commit a931f734ca
1 changed files with 117 additions and 0 deletions
@@ -0,0 +1,117 @@
+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 {jwennTeksEpiUserId} 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 le texte à modifier</DialogTitle>
+      {loading ? (
+        <CircularProgress sx={{color: '#29d'}} />
+      ) : (
+        <List sx={{pt: 0}}>
+          {teksLis.length > 0 ? teksLis.map(({_id, tit, awtis}) => (
+            <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}`} />
+            </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 {user} = session
+  const [open, setOpen] = useState(false)
+  const [teksLis, setTeksLis] = useState([])
+
+  const handleClickOpen = async () => {
+    setOpen(true)
+    setLoading(true)
+
+    const jwennTeks = await jwennTeksEpiUserId(user._id)
+
+    setTeksLis(jwennTeks)
+    setLoading(false)
+  }
+
+  const handleClose = value => {
+    const teks = teksLis.find(({_id}) => _id === value)
+    setSelectedTeks(teks)
+    setOpen(false)
+  }
+
+  return (
+    <Container sx={{textAlign: 'center', marginBottom: 4}} maxWidth='sm'>
+      <Button variant='outlined' onClick={handleClickOpen}>
+        Modifier mes textes*
+      </Button>
+      <Typography gutterBottom variant='caption' display='block'>
+        * textes non publiés uniquement
+      </Typography>
+      <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,
+}