Can you elaborate in the README on MobxReactFormDevTools.register?

[robksawyer]

I see you're registering the forms via the following code, but can you add an example that shows how I could use this from a Mobx store or either from a Mobx form component? I'm confused what loginForm is linking to exactly (a component?).

// register forms
MobxReactFormDevTools.register({
  loginForm,
  registerForm,
  supportForm,
});

I found the following, but I'm still confused. It looks like it's stuffing whatever you pass into $store.

registerForm: action((forms) => {
    _.merge($store.forms, forms);
    _.map(forms, ($form, $key) => _.set($store.select, $key, false));
    _.map(forms, ($form, $key) => _.set($store.menu, $key, $form.name || $key));
  }),

[foxhound87]

Each prop of the object passed to register() is a MobxReactForm instance.
The prop name will define the namespace for that specific form in the devtools:

import MobxReactFormDevTools from 'mobx-react-form-devtools';
import Form from 'mobx-react-form';

const form = new Form(...); 

MobxReactFormDevTools.register({
 myForm: form,
});

Then use <MobxReactFormDevTools.UI /> in your component.

I will update the README to elaborate this.

[robksawyer]

@foxhound87 Thanks, I did a little refactoring and ended up moving some logic to FormStore.js. I'm still wrapping my head around mobx and the form library, so I guess this makes sense.

/**
 * FormStore
 * Logic that is specific to the forms in the app.
 */
import { observable, action } from "mobx";

// Utils
import request from '../utils/request';

// Dev
import MobxReactFormDevTools from 'mobx-react-form-devtools';

export default class FormStore {

  // Forms
  @observable forms = {};

  @observable loading = false;

  constructor() {
    console.log('Formstore created!');
  }

  /**
   * setup
   * Handles setting up the mobx-react-dev-tools.
   * @param
   * @return
   */
  setup(forms) {
    this.forms = forms;
    // select form to show into the devtools
    MobxReactFormDevTools.register(this.forms);
  }

  /**
   * add
   * Handles adding a form to mobx-react-dev-tools and the form object.
   * @param {string} key A mobx-react-form-dev-tools key (this'll be the name)
   * @param {object} value A mobx-react-form settings object
   * @return
   */
  add(key, value) {
    if(typeof(key) !== 'string'){
      console.log('FormStore: key must be an string');
      return false;
    }
    if(typeof(value) !== 'object'){
      console.log('FormStore: value must be an object');
      return false;
    }
    this.forms[key] = value;
    // register the new forms object
    MobxReactFormDevTools.register(this.forms);
    MobxReactFormDevTools.open(false);
  }

  /**
   * select
   * Handles showing mobx-react-dev-tools for a specific form.
   * @param {string} formName
   * @return
   */
  select(formName) {
    // select form to show into the devtools
    MobxReactFormDevTools.select(formName);

    // open the devtools (closed by default)
    MobxReactFormDevTools.open(true);
  }

  /**
   * close
   * Handles hiding mobx-react-dev-tools for a specific form.
   * @param {string} formName
   * @return
   */
  close(formName) {
    // select form to show into the devtools
    MobxReactFormDevTools.select(formName);

    // open the devtools (closed by default)
    MobxReactFormDevTools.open(false);
  }

  /**
   * checkIfEmailExists
   * Handles checking to see if the email address exists in the database.
   * @param value
   * @param attribute
   * @param req
   * @param passes
   * @return
   */
  @action checkIfEmailExists( value, attribute, req, passes ) {
    return request.get('/users/checkemail/' + escape( value ) )
      .then(
        ( res ) => {
          // res.data.results
          // should equal:
          // true (email not found)
          // false (email found)
          if ( res.data.results ) {
            // Email address is available
            passes( true, 'This email address is availble.');
          } else {
            passes( false, 'This email address is already registered.' );
          }
        }
      )
      .catch(
        ( err ) => {
          console.log( err );
          passes(false, err);
        }
      );
  }

}

[foxhound87]

Your select method should be named open because you are calling the open() method. And your close method should not implement select() because is useless as it is. Your add method will also open the devtools... basically, you are opening/closing it in each method, why? (you can open and close the panel also from the UI)

[robksawyer]

@foxhound87 See below how I'm using this. I want it to auto open when I get to a certain path. And this is more of a convenience method.

"Your add method will also open the devtools... " Are you saying that MobxReactFormDevTools.open(false); will actually open dev tools?

I'm wondering now if it's a bad idea to add references to all of my forms in the FormStore like I'm doing. It seems nice keeping MobxReactFormDevTools there and not scattered across my form components, but should I have concerns about this approach for memory reasons?

@inject('store')
@observer
export default class LoginForm extends Component {

  @observable form;

  constructor(props) {
    super(props);
    this.store = this.props.store;

    const {
        authenticate,
    } = this.store.userStore;

    // function(successCallback, errorCallback)
    this.form = new LoginFormSettings(authenticate(this));
    this.store.formStore.add('login', this.form);
  }

  componentDidMount() {
    // Show the mobx-react-dev-tools panel.
    if(this.props.location.pathname === '/login'){
      this.store.formStore.select('login');
    }
  }

  componentWillUnmount() {
    // this.dispose();
    // Hide the dev tools
    this.store.formStore.close('login');

    // @see https://github.com/foxhound87/mobx-react-form/issues/111
    this.form.clear();
  }

  render() {
    ...
  }
}

[foxhound87]

Sorry about the open method, I've read the code too quickly.

You are keeping all the form instances also in your FormStore instance, and creating new methods, more memory will be used, but I don't think will slow the performance so much.

But as it is a code that should be used only in development, I suggest to just use the built-in methods. Anyway, it's up to your needs.

If you need more control, I can enhance the current implementation of the package to handle new behaviors.