React Admin Advanced Recipes - Adding Related Records Inline With Custom Forms

const CommentCreate = props => {
  // Read the post_id from the location which is injected by React Router and passed to our component by react-admin automatically
  const { post_id: post_id_string } = parse(props.location.search);

  // ra-data-fakerest uses integers as identifiers, we need to parse the querystring
  // We also must ensure we can still create a new comment without having a post_id
  // from the url by returning an empty string if post_id isn't specified
  const post_id = post_id_string ? parseInt(post_id_string, 10) : "";

  const redirect = post_id ? `/posts/${post_id}/show/comments` : false;

  return (
    <Create {...props}>
      <SimpleForm
        defaultValue={{ created_at: today, post_id }}
        redirect={redirect}
      >
        <ReferenceInput
          source="post_id"
          reference="posts"
          allowEmpty
          validate={required()}
        >
          <SelectInput optionText="title" />
        </ReferenceInput>
        <DateInput source="created_at" />
        <LongTextInput source="body" />
      </SimpleForm>
    </Create>
  );
};

// in PostQuickCreateButton.js
import React, { Component, Fragment } from "react";
import { connect } from "react-redux";
import { change, submit, isSubmitting } from "redux-form";
import {
  fetchEnd,
  fetchStart,
  required,
  showNotification,
  Button,
  SaveButton,
  SimpleForm,
  TextInput,
  LongTextInput,
  CREATE,
  REDUX_FORM_NAME,
} from "react-admin";
import IconContentAdd from "@material-ui/icons/Add";
import IconCancel from "@material-ui/icons/Cancel";
import Dialog from "@material-ui/core/Dialog";
import DialogTitle from "@material-ui/core/DialogTitle";
import DialogContent from "@material-ui/core/DialogContent";
import DialogActions from "@material-ui/core/DialogActions";

import dataProvider from "../dataProvider";

class PostQuickCreateButton extends Component {
  state = {
    error: false,
    showDialog: false,
  };

  handleClick = () => {
    this.setState({ showDialog: true });
  };

  handleCloseClick = () => {
    this.setState({ showDialog: false });
  };

  handleSaveClick = () => {
    const { submit } = this.props;

    // Trigger a submit of our custom quick create form
    // This is needed because our modal action buttons are oustide the form
    submit("post-quick-create");
  };

  handleSubmit = values => {
    const { change, fetchStart, fetchEnd, showNotification } = this.props;

    // Dispatch an action letting react-admin know a API call is ongoing
    fetchStart();

    // As we want to know when the new post has been created in order to close the modal, we use the
    // dataProvider directly
    dataProvider(CREATE, "posts", { data: values })
      .then(({ data }) => {
        // Update the main react-admin form (in this case, the comments creation form)
        change(REDUX_FORM_NAME, "post_id", data.id);
        this.setState({ showDialog: false });
      })
      .catch(error => {
        showNotification(error.message, "error");
      })
      .finally(() => {
        // Dispatch an action letting react-admin know a API call has ended
        fetchEnd();
      });
  };

  render() {
    const { showDialog } = this.state;
    const { isSubmitting } = this.props;

    return (
      <Fragment>
        <Button onClick={this.handleClick} label="ra.action.create">
          <IconContentAdd />
        </Button>
        <Dialog
          fullWidth
          open={showDialog}
          onClose={this.handleCloseClick}
          aria-label="Create post"
        >
          <DialogTitle>Create post</DialogTitle>
          <DialogContent>
            <SimpleForm
              // We override the redux-form name to avoid collision with the react-admin main form
              form="post-quick-create"
              resource="posts"
              // We override the redux-form onSubmit prop to handle the submission ourselves
              onSubmit={this.handleSubmit}
              // We want no toolbar at all as we have our modal actions
              toolbar={null}
            >
              <TextInput source="title" validate={required()} />
              <LongTextInput source="teaser" validate={required()} />
            </SimpleForm>
          </DialogContent>
          <DialogActions>
            <SaveButton saving={isSubmitting} onClick={this.handleSaveClick} />
            <Button label="ra.action.cancel" onClick={this.handleCloseClick}>
              <IconCancel />
            </Button>
          </DialogActions>
        </Dialog>
      </Fragment>
    );
  }
}

const mapStateToProps = state => ({
  isSubmitting: isSubmitting("post-quick-create")(state),
});

const mapDispatchToProps = {
  change,
  fetchEnd,
  fetchStart,
  showNotification,
  submit,
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(PostQuickCreateButton);

// in PostReferenceInput.js
import React, { Fragment } from "react";
import { ReferenceInput, SelectInput } from "react-admin";
import PostQuickCreateButton from "./PostQuickCreateButton";

const PostReferenceInput = () => (
  <Fragment>
    <ReferenceInput {...this.props}>
      <SelectInput optionText="title" />
    </ReferenceInput>
    <PostQuickCreateButton />
  </Fragment>
);

// in PostQuickCreateButton.js
// ...
import {
  // ...
  crudGetMatching,
} from "react-admin";
// ...

class PostQuickCreateButton extends Component {
  // ...
  handleSubmit = values => {
    const {
      change,
      crudGetMatching,
      fetchStart,
      fetchEnd,
      showNotification,
    } = this.props;

    // Dispatch an action letting react-admin know a API call is ongoing
    fetchStart();

    // As we want to know when the new post has been created in order to close the modal, we use the
    // dataProvider directly
    dataProvider(CREATE, "posts", { data: values })
      .then(({ data }) => {
        // Refresh the choices of the ReferenceInput to ensure our newly created post
        // always appear, even after selecting another post
        crudGetMatching(
          "posts",
          "comments@post_id",
          { page: 1, perPage: 25 },
          { field: "id", order: "DESC" },
          {}
        );

        // Update the main react-admin form (in this case, the comments creation form)
        change(REDUX_FORM_NAME, "post_id", data.id);
        this.setState({ showDialog: false });
      })
      .catch(error => {
        showNotification(error.message, "error");
      })
      .finally(() => {
        // Dispatch an action letting react-admin know a API call has ended
        fetchEnd();
      });
  };
  // ...
}

// ...

const mapDispatchToProps = {
  // ...
  crudGetMatching,
};

// ...

// in PostQuickPreviewButton.js
import React, { Component, Fragment } from "react";
import { connect } from "react-redux";
import Drawer from "@material-ui/core/Drawer";
import { withStyles } from "@material-ui/core/styles";

import IconImageEye from "@material-ui/icons/RemoveRedEye";
import IconKeyboardArrowRight from "@material-ui/icons/KeyboardArrowRight";
import { Button, SimpleShowLayout, TextField } from "react-admin";

const styles = theme => ({
  field: {
    // These styles will ensure our drawer don't fully cover our
    // application when teaser or title are very long
    "& span": {
      display: "inline-block",
      maxWidth: "20em",
    },
  },
});

const PostPreviewView = ({ classes, ...props }) => (
  <SimpleShowLayout {...props}>
    <TextField source="id" />
    <TextField source="title" className={classes.field} />
    <TextField source="teaser" className={classes.field} />
  </SimpleShowLayout>
);

const mapStateToProps = (state, props) => ({
  // Get the record by its id from the react-admin state.
  record: state.admin.resources[props.resource]
    ? state.admin.resources[props.resource].data[props.id]
    : null,
  version: state.admin.ui.viewVersion,
});

const PostPreview = connect(
  mapStateToProps,
  {}
)(withStyles(styles)(PostPreviewView));

class PostQuickPreviewButton extends Component {
  state = { showPanel: false };

  handleClick = () => {
    this.setState({ showPanel: true });
  };

  handleCloseClick = () => {
    this.setState({ showPanel: false });
  };

  render() {
    const { showPanel } = this.state;
    const { id } = this.props;
    return (
      <Fragment>
        <Button onClick={this.handleClick} label="ra.action.show">
          <IconImageEye />
        </Button>
        <Drawer anchor="right" open={showPanel} onClose={this.handleCloseClick}>
          <div>
            <Button label="Close" onClick={this.handleCloseClick}>
              <IconKeyboardArrowRight />
            </Button>
          </div>
          <PostPreview id={id} basePath="/posts" resource="posts" />
        </Drawer>
      </Fragment>
    );
  }
}

export default connect()(PostQuickPreviewButton);

import React, { Fragment } from "react";
import { Field } from "redux-form";
import { ReferenceInput, SelectInput } from "react-admin";
import PostQuickCreateButton from "./PostQuickCreateButton";
import PostQuickPreviewButton from "./PostQuickPreviewButton";

const PostReferenceInput = props => (
  <Fragment>
    <ReferenceInput {...props}>
      <SelectInput optionText="title" />
    </ReferenceInput>
    <PostQuickCreateButton />
    // We use Field to get the current value of the `post_id` field
    <Field
      name="post_id"
      component={({ input }) =>
        input.value && <PostQuickPreviewButton id={input.value} />
      }
    />
  </Fragment>
);

export default PostReferenceInput;