text: import React from "react";
  import { makeStyles } from "@material-ui/core/styles";
  import Dialog from "@material-ui/core/Dialog";
  import ListItemText from "@material-ui/core/ListItemText";
  import ListItem from "@material-ui/core/ListItem";
  import List from "@material-ui/core/List";
  import Divider from "@material-ui/core/Divider";
  import AppBar from "@material-ui/core/AppBar";
  import Toolbar from "@material-ui/core/Toolbar";
  import IconButton from "@material-ui/core/IconButton";
  import CloseIcon from "@material-ui/icons/Close";
  import Slide from "@material-ui/core/Slide";
  import { useHistory } from "react-router-dom";
  
  const useStyles = makeStyles((theme) => ({
    appBar: {
      position: "relative",
    },
    title: {
      marginLeft: theme.spacing(2),
      flex: 1,
    },
  }));
  
  const Transition = React.forwardRef(function Transition(props, ref) {
    return <Slide direction='up' ref={ref} {...props} />;
  });
  
  export default function FullScreenDialog() {
    const classes = useStyles();
    const history = useHistory();
    const [open, setOpen] = React.useState(true);
  
    const handleClose = () => {
      setOpen(false);
      setTimeout(() => {
        history.goBack();
      }, 150);
    };
  
    return (
      <div onLoad={() => setOpen(true)}>
        <Dialog
          fullScreen
          open={open}
          onClose={handleClose}
          TransitionComponent={Transition}
        >
          <AppBar className={classes.appBar}>
            <Toolbar>
              <IconButton
                edge='start'
                color='inherit'
                onClick={handleClose}
                aria-label='close'
              >
                <CloseIcon />
              </IconButton>
            </Toolbar>
          </AppBar>
          <List>
            <ListItem button>
              <ListItemText primary='Phone ringtone' secondary='Titania' />
            </ListItem>
            <Divider />
            <ListItem button>
              <ListItemText
                primary='Default notification ringtone'
                secondary='Tethys'
              />
            </ListItem>
          </List>
        </Dialog>
      </div>
    );
  }
  