glendaviesnz

chunkQueue$
    .pipe(mergeMap((data) => data, null, maxConnections))
    .subscribe();

glendaviesnz

// the component uses an injected componentStateService to register its state transitions

this._componentStateService.addComponentStates(componentStates);

// the component state service is reasonably simple and just maintains a lookup object of all the registered
// state transitions, and also has methods for cleaning these up when components are destroyed

@Injectable()
export class ComponentStateService {
    public componentStates: any = {};

glendaviesnz

// Instead of this ....
const componentStates = {
    name: 'userApproval',
    states: {
        [actionTypes.loadUnapprovedUsers]: {
            [ComponentStates.Idle]: { to: ComponentStates.Processing, action: PassthroughAction }
        },
        [actionTypes.loadUnapprovedUsersSuccess]: {
            [ComponentStates.Processing]: { to: ComponentStates.Idle, action: PassthroughAction }
        },

glendaviesnz

export class ChunkingService {
    public chunkSize = 1024 * 1024;
    private _chunkQueue$ = new Subject();
    private _maxConnections = 3;

    constructor(
        private _apiService: apiService,
        private _store: Store<any>) {
        Guard.notNothing(_apiService, '_apiService');
        Guard.notNothing(_store, '_store');

glendaviesnz

export class ChunkingService {
    public chunkSize = 1024 * 1024;
    private _chunkQueue$ = new Subject();
    private _maxConnections = 3;

    constructor(
        private _apiService: apiService,
        private _store: Store<any>) {
        Guard.notNothing(_apiService, '_apiService');
        Guard.notNothing(_store, '_store');

glendaviesnz

const componentStates = {
    name: 'userApproval',
    states: {
        [actionTypes.loadUnapprovedUsers]: {
            [ComponentStates.Idle]: { to: ComponentStates.Processing, action: PassthroughAction }
        },
        [actionTypes.loadUnapprovedUsersSuccess]: {
            [ComponentStates.Processing]: { to: ComponentStates.Idle, action: PassthroughAction }
        },
        [actionTypes.loadUnapprovedUsersError]: {

glendaviesnz

// where the form is declared a simple string is used to indicated validation type
<input name="firstName" validation="required" />


// an object map is used in the form library to map this string name to a validation method and message
export const validationTypes = {
    required: { validate: validateRequired, message: 'Field is required' },
    email: { validate: validateEmail, message: 'Valid email address required' }
}

glendaviesnz

@Injectable()
export class ComponentStateMachine extends ActionsSubject {

    constructor() {
        super();
    }
    public next(action: any) {
        // add all your state machine magic here ....
        if (isValidAction) {
            super.next(action);

glendaviesnz

class EasyForm extends React.Component {
  fieldRefs = []
  fieldTypes = ['input', 'button', 'textarea'];

  addRefsToChildren(children) {
    let childPropsChildren;

    const newChildren = React.Children.map(children, child => {
      if (child.props && child.props.children ) {
        childPropsChildren = this.addRefsToChildren(child.props.children);

glendaviesnz

<EasyForm onsubmit="this.onFormSubmit">
    <label>
      First name
      <input name="firstName" />
    </label>
    <label>
      Last name
      <input name="lastName" />
    </label>
    <input name="newsletterSub" type="checkbox" />