Stateless components in practice: a register form example

help
1

I would like to know what would be the right practice in the new presentational component/container context. I am designing a fancy register form using Meteor 1.3, react, material-ui, Astronomy v2 and flow router.

I am struggling with how I should dispatch the logic:

  1. I have a field level check supposed to reactively display an error if, e.g. my field value is too small, my password should have letters and numbers, or more difficult, if my email is already used (without submitting the form for the 5 first tests)
  2. I have a multi field level check, e.g. password are matching or not
  3. If all the fields have been correctly filled, I have a form level check: did the account creation succeeded?

For now, I am using the Mantra architecture. I consider switching from mantra composer to createContainer because composer looks abstract for me, I don’t get exactly how it works. However, I am not sure this is a very important point regarding this topic.

I designed an Astronomy schema for the User document (from Meteor.Users) but I wonder if I should use it here for validation because I don’t handle the password field validation in the schema (done by user-account package + extra checks) and I have multi-field checks (2) where the schema is useless as well.

So, as I understand it:

  • 1 and 2 should be done directly in the component, using e.g. onBlur events. I manage the current state of every field (its error message or its absence) using a component level reactive dictionary.

  • 3 is done using actions (in mantra wording) passed by the container. This is where I call for Accounts.createUser() Example:

    export const depsMapper = (context, actions) => ({
    submitAction: actions.account.register,
    clearErrors: actions.account.registerErrorClear,
    context: () => context
    })

The feedback would be done using the appState reactive dictionary that stores a REGISTER_ERROR value and send it back using onData composer function. (this logic comes from the mantra-kickstarter example)

Now here are the questions:

  • Am I right to not use Astronomy for this? For instance, I could use it to check email availability (it has a uniqueness validator). I assume it should be used in actions only, right?
  • Should I put the 1 & 2 check types in the actions as well?
  • Should I chop my form into even further components, making a react component for each field or couple of fields (e.g. password + verify password)
  • What to do if I want to consider if an input is pristine/dirty when I display (or not) an error if I can’t use the states?

While the container/component logic makes perfect sense, I am very confused when putting it in practice. Please forgive my ignorance if I overlooked things.