pawol.nu/components/awtis/awtis-biyografi.js

import React from 'react'
import PropTypes from 'prop-types'

import {
  Button,
  Box,
  Typography,
  Dialog,
  DialogActions,
  DialogContent,
  DialogContentText,
  DialogTitle
} from '@material-ui/core'

import MizikBadjMeni from './mizik-badj-meni'

export default function AwtisBiyografi({alias, miziks, biyografi, isBioOpen, setIsBioOpen}) {
  const handleClose = () => {
    setIsBioOpen(false)
  }

  const descriptionElementRef = React.useRef(null)
  React.useEffect(() => {
    if (isBioOpen) {
      const {current: descriptionElement} = descriptionElementRef
      if (descriptionElement !== null) {
        descriptionElement.focus()
      }
    }
  }, [isBioOpen])

  return (
    <div>
      <Dialog
        scroll='paper'
        open={isBioOpen}
        aria-labelledby='scroll-dialog-title'
        aria-describedby='scroll-dialog-description'
        onClose={handleClose}
      >
        <Box display='flex' justifyContent='center' alignItems='center'>
          <DialogTitle id='scroll-dialog-title' align='center'>{alias}</DialogTitle>
          <MizikBadjMeni miziks={miziks} />
        </Box>
        <DialogContent dividers>
          <DialogContentText
            ref={descriptionElementRef}
            align='justify'
            id='scroll-dialog-description'
            tabIndex={-1}
          >
            {biyografi ? (
              <Typography component='span'>
                {biyografi}
              </Typography>
            ) : (
              <Typography component='span'>
                Pas de biobraphie disponible
              </Typography>
            )}
          </DialogContentText>
        </DialogContent>
        <DialogActions style={{margin: 'auto'}}>
          <Button variant='outlined' color='primary' onClick={handleClose}>
            Fèmen
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  )
}

AwtisBiyografi.propTypes = {
  alias: PropTypes.string.isRequired,
  miziks: PropTypes.array.isRequired,
  biyografi: PropTypes.string,
  isBioOpen: PropTypes.bool.isRequired,
  setIsBioOpen: PropTypes.func.isRequired
}

AwtisBiyografi.defaultProps = {
  biyografi: null
}