C1

c1.jsx

import React from "react";
import Button from "@material-ui/core/Button";
import TextField from "@material-ui/core/TextField";
import Dialog from "@material-ui/core/Dialog";
import DialogActions from "@material-ui/core/DialogActions";
import DialogContent from "@material-ui/core/DialogContent";
import DialogContentText from "@material-ui/core/DialogContentText";
import DialogTitle from "@material-ui/core/DialogTitle";
import Slide from "@material-ui/core/Slide";
import FormDialog2 from "./FormDialog2";

function FormDialog(props) {
  const [open, setOpen] = React.useState(false);
  const [openNameDialog, setOpenNameDialog] = React.useState(false);
  const [url, setUrl] = React.useState("");

  function handleClickOpen() {
    setOpen(true);
  }

  function handleClose() {
    setOpen(false);
  }

  function handleNext(e) {
    setOpenNameDialog(true);
    setOpen(false);
  }

  function handleUrlChange(e) {
    setUrl(e.target.value);
  }

  return (
    <>
      <div>
        <Button variant="outlined" color="primary" onClick={handleClickOpen}>
          Add feed
        </Button>

        <Dialog
          open={open}
          onClose={handleClose}
          aria-labelledby="form-dialog-title"
          TransitionComponent={Slide}
        >
          <DialogTitle id="form-dialog-title">Add Feed</DialogTitle>
          <DialogContent>
            <DialogContentText>Enter the URL of a feed.</DialogContentText>
            <TextField
              autoFocus
              margin="dense"
              id="name"
              label="Feed URL"
              type="url"
              size={60}
              fullWidth
              onChange={handleUrlChange}
            />
          </DialogContent>
          <DialogActions>
            <Button onClick={handleClose} color="primary">
              Cancel
            </Button>
            <Button onClick={handleNext} color="primary">
              Next
            </Button>
          </DialogActions>
        </Dialog>
      </div>
      {openNameDialog && <FormDialog2 url={url} />}
    </>
  );
}

export default FormDialog;