model.js

import atom from 'atom-js';

const modelFactory = atom.setup({
  validation: {
    name: {
      'Provide at least two characters': (input) => (input || '').length >= 2
    },
    age: {
      'Please provide your age': (input) => !!input,
      'You should be at least 18 years old': (input) => input >= 18,
    },
  }
});

export default modelFactory({});

PlayAround.js

import React from 'react';
import atom from 'atom-js';

import PageTitle from 'components/PageTitle';
import BasePage from 'pages/BasePage';
import Button from 'sf/components/Button';
import JsonPrettyPrint from 'sf/components/JsonPrettyPrint';
import PhotoCaptureButton from 'sf/components/PhotoCaptureButton';
import ValidationInput from 'sf/components/ValidationInput';

import model from './model';

class PlayAround extends BasePage {
  className = 'ts-PlayAround';
  title = 'Play Around';

  state = {};

  handleSubmit = (e) => {
    e.preventDefault();
    this.formValidation(model, 'form.')
      .then((args) => {
        console.log(args);
        console.log(model.get());

        this.setState({ isSuccess: true });
      })
      .catch(console.log);
  }

  handlePhotoTaken = (dataURI) => {
    model.set({ photo: dataURI });
  }

  render() {
    return (
      <div className={ this.rootcn`ts-container` }>
        <PageTitle title={ this.title } />
        <form onSubmit={ this.handleSubmit }>
          <ValidationInput
            displayName="Type your name"
            ref="form.name"
          />
          <ValidationInput
            displayName="Type your surname"
            ref="form.surname"
          />
          <ValidationInput
            displayName="Type your age"
            ref="form.age"
            type="number"
          />

          { this.props.photo && (
            <img src={ this.props.photo } alt="ME!" style={ { width: 300 } } />
          ) }
          <p>Capture photo of yourself</p>
          <PhotoCaptureButton onPhotoTaken={ this.handlePhotoTaken } delayedStart={ true } />


          <Button type="submit">Submit!</Button>


          <JsonPrettyPrint
            className={ this.cn({
              '__result': true,
              '__result--success': this.state.isSuccess,
            }) }
            content={ this.props }
          />
        </form>
      </div>
    );
  }
}

export default atom.reactConnect(model, [
  'name', 'surname', 'age', 'photo'
])(PlayAround);