How to use the mithril/stream function in mithril

view: function({ state, attrs }) {

        if (state.parsedErrors) {
            const parsedErrors = state.parsedErrors;
            state.errors = {
                countryID: prop(parsedErrors ? parsedErrors.hasError('country_id') : false),
                stateID: prop(parsedErrors ? parsedErrors.hasError('state') : false),
                addressStreet: prop(parsedErrors ? parsedErrors.hasError('street') : false),
                addressNumber: prop(parsedErrors ? parsedErrors.hasError('number') : false),
                addressComplement: prop(false),
                addressNeighbourhood: prop(parsedErrors ? parsedErrors.hasError('neighbourhood') : false),
                addressCity: prop(parsedErrors ? parsedErrors.hasError('city') : false),
                addressState: prop(parsedErrors ? parsedErrors.hasError('state') : false),
                addressZipCode: prop(parsedErrors ? parsedErrors.hasError('zipcode') : false),
                phoneNumber: prop(parsedErrors ? parsedErrors.hasError('phonenumber') : false),
            };
        }

        const fields = state.fields,
            international = state.international,
            defaultCountryID = state.defaultCountryID,
            defaultForeignCountryID = state.defaultForeignCountryID,
            countryName = attrs.countryName,
            errors = state.errors,
            // hash to send to rails
            address = {
                id: fields.id(),
                country_id: fields.countryID(),

oninit: function (vnode) {
        const filterVM = projectsSubscriptionReportVM,
            catarseVM = projectsContributionReportVM,
            dropdownNumber = prop(0),
            error = prop(false),
            loader = prop(true),
            isProjectDataLoaded = prop(false),
            isRewardsDataLoaded = prop(false),
            rewards = prop([]),
            subscriptions = projectSubscriptionsListVM(),
            submit = () => {
                // Set order by last paid on filters too
                filterVM.order({ last_payment_data_created_at: 'desc' });
                if (filterVM.reward_external_id() === 'null') {
                    subscriptions.firstPage(filterVM.withNullParameters());
                } else {
                    subscriptions.firstPage(filterVM.parameters());
                }

                return false;
            },

oninit(vnode: m.Vnode) {
    super.oninit(vnode);

    vnode.state.initialUsers   = Stream(new Users());
    vnode.state.userViewHelper = Stream(new UserViewHelper());
    vnode.state.userFilters    = Stream(new UserFilters());
    vnode.state.roles          = Stream(new Roles());
    vnode.state.rolesSelection = Stream(new Map());

    vnode.state.showFilters   = flag(false);
    vnode.state.showRoles     = flag(false);
    vnode.state.roleNameToAdd = Stream();

    vnode.state.initializeRolesDropdownAttrs = () => {
      if (vnode.state.showRoles()) {
        vnode.state.rolesSelection(computeRolesSelection(vnode.state.roles(),
                                                         vnode.state.users().selectedUsers()));
        vnode.state.roleNameToAdd("");
      }
    };

    vnode.state.onAdd = (e) => {

validate = () => {
        const errorFields = prop([]);

        return {
            submit(fields, fn) {
                return () => {
                    resetValidations();

                    _.map(fields, field => {
                        if (field.rule === 'email') {
                            if (!validateEmail(field.prop())) {
                                validationErrors().push({
                                    field: field.prop,
                                    message: 'E-mail inválido.',
                                });
                            }
                        }

fetchData(vnode: m.Vnode): Promise {
    this.pageState                        = PageState.LOADING;
    vnode.state.pluginInfos               = Stream(new PluginInfos());
    vnode.state.clusterProfiles           = Stream(new ClusterProfiles([]));
    vnode.state.elasticProfiles           = Stream(new ElasticAgentProfiles([]));
    vnode.state.clusterProfileBeingEdited = Stream();
    vnode.state.elasticProfileBeingEdited = Stream();
    vnode.state.isWizardOpen              = Stream();

    return Promise.all(
      [
        PluginInfoCRUD.all({type: ExtensionTypeString.ELASTIC_AGENTS}),
        ClusterProfilesCRUD.all(),
        ElasticAgentProfilesCRUD.all(),
      ]
    ).then((results) => {
      results[0].do(
        (successResponse) => {
          this.pageState = PageState.OK;
          vnode.state.pluginInfos(successResponse.body);
        },

fetchData(vnode: m.Vnode): Promise {
    this.pageState = PageState.LOADING;

    vnode.state.pipelineGroups = Stream(new PipelineGroups());
    vnode.state.pluginInfos    = Stream(new PluginInfos());

    const onOperationError = (errorResponse: ErrorResponse) => {
      vnode.state.onError(JSON.parse(errorResponse.body!).message);
    };

    vnode.state.doEditPipelineGroup = (group) => {
      window.location.href = pipelineGroupEditPath(group.name());
    };

    vnode.state.createPipelineGroup = () => {
      const modal = new CreatePipelineGroupModal((groupName) => {
        PipelineGroupCRUD
          .create({name: groupName})
          .then((response) => {
            response.do(

protected constructor(name: string, type: RoleType, attributes: T, errors: Errors = new Errors()) {
    super();
    ValidatableMixin.call(this);

    this.type       = Stream(type);
    this.name       = Stream(name);
    this.attributes = Stream(attributes);
    this.errors(errors);

    this.validatePresenceOf("name");
    this.validateFormatOf("name",
                          new RegExp("^[-a-zA-Z0-9_][-a-zA-Z0-9_.]*$"),
                          {message: "Invalid Id. This must be alphanumeric and can contain underscores and periods (however, it cannot start with a period)."});
    this.validateMaxLength("name", 255, {message: "The maximum allowed length is 255 characters."});
  }

owner_document: prop('12345678912'),
            name: prop('USER NAME'),
            state_inscription: prop('123123123'),
            address: prop({
                country_id: 36,
                state_id: 1,
                address_street: 'Praça da Alfândega',
                address_number: '123',
                address_complement: 'complement',
                address_neighbourhood: 'neightbourhood',
                address_city: 'city',
                address_state: 'state',
                address_zip_code: '90010150',
                phone_number: '1234567890'
            }),
            birth_date: prop('01/12/1990'),
            account_type: prop('pf')
        }),
        parsedErrors = {
            hasError: function(name) {
                return false;
            },
            inlineError: function(name) {
                return false;
            }
        };

    describe('view', () => {

        beforeAll(() => {
            $output = mq(m(userSettingsAddress, { 
                addVM: prop(addressVM({ data: fields() })),

const getUserRecommendedProjects = contribution => {
    const sample3 = _.partial(_.sample, _, 3),
        loaders = prop([]),
        collection = prop([]),
        { user_id } = h.getUser();

    const loader = () =>
        _.reduce(
            loaders(),
            (memo, curr) => {
                const _memo = _.isFunction(memo) ? memo() : memo,
                    _curr = _.isFunction(curr) ? curr() : curr;

                return _memo && _curr;
            },
            true
        );

    const loadPopular = () => {
        const filters = projectFilters().filters;

.then(() => {
                        changeUserAction.complete(true);
                        changeUserAction.success(true);
                        changeUserAction.error(false);
                    })
                    .catch(() => {
                        changeUserAction.complete(true);
                        changeUserAction.success(true);
                        changeUserAction.error(true);
                    });
                return false;
            },
            complete: prop(false),
            error: prop(false),
            success: prop(false),
            newValue: prop('')
        };

        const contributionReport = {
            toggler: h.toggleProp(false, true)
        };

        const actionUnload = action => () => {
            action.complete(false);
            action.error(false);
            action.success(false);
            action.newValue('');
        };

        const projectSubscriberInfo = prop();
        const projectRevert = {
            toggler: h.toggleProp(false, true),