رد + Mobx: ما هي الفائدة؟

 import React from "react"; import {inject, observer} from 'mobx-react'; @inject("EmailStore") @observer export default class Email extends React.Component { constructor(props) { super(props); }; componentDidMount = () => { this.props.EmailStore.validate(this.props.name); }; componentWillUnmount = () => { this.props.EmailStore.unmount(this.props.name); }; render() { const name = this.props.name; const EmailStore = this.props.EmailStore; const params = EmailStore.params; let status = "form-group email "; if (params.isCorrect && params.onceValidated) status += "valid"; if (params.isWrong && params.onceValidated) status += "error"; return ( <div className={status}> <label htmlFor={name}>{this.props.label}</label> <input type="email" disabled={this.props.disabled} name={name} id={name} value={params.value} onChange={(e) => EmailStore.bindData(e, name)} /> </div> ); } } 

 import {action, observable} from 'mobx'; import reactTriggerChange from "react-trigger-change"; import Validators from "../../../helpers/Validators"; import { getTarget } from "../../../helpers/elementaries"; export default class EmailStore { @observable params = { value : "", disabled : null, isCorrect : null, isWrong : null, onceValidated : null, prevalidated : null } /** *    */ @action bindData = (e, name) => { this.params.value = getTarget(e).value; }; /** *   */ @action validate = (name) => { const callbacks = { success : (formatedValue) => { this.params.value = formatedValue; this.params.isCorrect = true; this.params.isWrong = false; this.params.onceValidated = true; }, fail : (formatedValue) => { this.params.value = formatedValue; this.params.isCorrect = false; this.params.isWrong = true; } }; const options = { type : "email" }; const element = document.getElementById(name); new Validators(element, options, callbacks).init(); //    reactTriggerChange(element); this.params.prevalidated = true; }; } 

 import React from "react"; import {inject, observer} from 'mobx-react'; import {get} from 'mobx'; @inject("FioStore") @observer export default class Fio extends React.Component { constructor(props) { super(props); }; componentDidMount = () => { /** *       */ this.props.FioStore.registration(this.props); }; componentWillUnmount = () => { this.props.FioStore.unmount(this.props.name); }; render() { /** *       *  DaData: * data.surname -  * data.name -  * https://dadata.ru/api/suggest/name */ const FioStore = this.props.FioStore; const name = this.props.name; const item = get(FioStore.items, name); if (item && item.isCorrect && item.onceValidated && !item.prevalidated) status = "valid"; if (item && item.isWrong && item.onceValidated) status = "error"; //    store let value = this.props.value; if (item) value = item.value; return ( <div className="form-group fio"> <label htlmfor={name}>{this.props.label}</label> <input type="text" disabled={this.props.disabled} name={name} id={name} value={value} onChange={(e) => FioStore.bindData(e, name)} /> {(item && item.suggestions && item.suggestions.length > 0) && <div className="hint-container" id={"hint-container-" + item.id}>{item.suggestions.map((suggestion, i) => { return ( <div className={"suggestion-item fs-" + i} key={i} value={suggestion.data[name]} onClick={(e) => FioStore.setSuggestion(e, name)}> <span className="suggestion-text">{suggestion.data[name]}</span> </div>) })}</div>} </div> ); } } 

 import {action, autorun, observable, get, set} from 'mobx'; import reactTriggerChange from "react-trigger-change"; import Validators from "../../../helpers/Validators"; import { getDaData, blockValidate } from "../../../helpers/functions"; import { getAttrValue, scrollToElement, getTarget } from "../../../helpers/elementaries"; export default class FioStore { constructor() { autorun(() => { /** *        .         setSuggestion() */ const self = this; $("body").click((e) => { if (e.target.className !== "suggestion-item" && e.target.className !== "suggestion-text") { const items = self.items.entries(); for (var [key, value] of items) { value.suggestions = []; } } }); }) } /** *   items       Fio    */ @observable items = new Map([]); /** *    */ @action registration = (params) => { const nameExists = get(this.items, params.name); if (!blockValidate({params, nameExists, type: "Fio"})) return false; //  items   const value = { value : params.value, disabled : params.disabled, isCorrect : null, isWrong : null, suggestions : [], daData : params.daData, startValidation : true, //      onceValidated : false, //      prevalidated : false }; set(this.items, params.name, value); this.validate(params.name); }; /** *    */ @action unmount = (name) => { this.items.delete(name); }; /** *    *    */ @action bindData = (e, name) => { const value = getTarget(e).value; const item = get(this.items, name); /** *     DaData */ if (item.daData && !item.startValidation) { getDaData({value, type: "fio", name}) .then((result) => { item.suggestions = result.suggestions; }) .catch((error) => {console.log(error)}) } else { item.startValidation = false; item.value = value; } }; /** *   */ @action setSuggestion = (e, name) => { if (e) e.preventDefault(); get(this.items, name).value = getAttrValue(e); //     get(this.items, name).suggestions = []; get(this.items, name).isCorrect = true; get(this.items, name).isWrong = false; }; /** *   */ @action validate = (name) => { const callbacks = { success : (formatedValue) => { get(this.items, name).value = formatedValue; get(this.items, name).isCorrect = true; get(this.items, name).isWrong = false; get(this.items, name).onceValidated = true; }, fail : (formatedValue) => { get(this.items, name).value = formatedValue; get(this.items, name).isCorrect = false; get(this.items, name).isWrong = true; } }; const options = { type : "fio" }; const element = document.getElementById(name); new Validators(element, options, callbacks).init(); //    reactTriggerChange(element); get(this.items, name).prevalidated = true; }; } 

 import React from "react"; import {inject, observer} from 'mobx-react'; @inject("ButtonStore") @observer export default class CustomButton extends React.Component { constructor(props) { super(props); }; componentDidMount = () => { /** *       */ this.props.ButtonStore.registration(this.props); }; componentWillUnmount = () => { this.props.ButtonStore.unmount(this.props.name); }; render() { const name = this.props.name; return ( <div className="form-group button"> <button disabled={this.props.disabled} onClick={(e) => this.props.ButtonStore.bindClick(e, name)} name={name} id={name} >{this.props.text}</button> </div> ); } } 

 import {action, observable, get, set} from 'mobx'; import {blockValidate} from "../../../helpers/functions"; export default class ButtonStore { constructor() {} /** *   items       Button    */ @observable items = new Map([]) /** *    */ @action registration = (params) => { const nameExists = get(this.items, params.name); if (!blockValidate({params, nameExists, type: "Button"})) return false; //  items   const value = { disabled : params.disabled, isClicked : false }; set(this.items, params.name, value); }; /** *    */ @action unmount = (name) => { this.items.delete(name); }; /** *    */ @action bindClick = (e, name) => { e.preventDefault(); get(this.items, name).isClicked = true; }; } 

 import React from "react"; import {inject, observer} from 'mobx-react'; import l10n from "../../../l10n/localization.js"; import Button from "./Button"; @inject("mainStore", "optionsStore") @observer export default class ButtonArea extends React.Component { constructor(props) { super(props); }; render() { return ( <div className="button-container"> <p>{this.props.optionsStore.dict.buttonsHeading}</p> <Button name={"send_data"} disabled={this.props.mainStore.buttons.sendData.disabled ? true : false} text={l10n.ru.common.continue} /> </div> ); } } 

 import {observable, computed, autorun, reaction, get, action} from 'mobx'; import optionsStore from "./optionsStore"; import ButtonStore from "./ButtonStore"; import FioStore from "./FioStore"; import EmailStore from "./EmailStore"; import { fetchOrdinary, sendStats } from "../../../helpers/functions"; import l10n from "../../../l10n/localization.js"; class mainStore { constructor() { /** *    */ this.ButtonStore = new ButtonStore(); this.FioStore = new FioStore(); this.EmailStore = new EmailStore(); autorun(() => { this.fillBlocks(); this.fillData(); }); /** *      */ reaction( () => this.dataInput, (result) => { let isIncorrect = false; for (let i in result) { for (let j in result[i]) { const res = result[i][j]; if (!res.isCorrect) isIncorrect = true; this.userData[j] = res.value; } }; if (!isIncorrect) { this.buttons.sendData.disabled = false } else { this.buttons.sendData.disabled = true }; } ); /** *     */ reaction( () => this.sendDataButton, (result) => { if (result) { if (result.isClicked) { get(this.ButtonStore.items, "send_data").isClicked = false; const authRequestSuccess = () => { console.log("request is success!") }; const authRequestFail = () => { console.log("request is fail!") }; const request = { method : "send_userdata", params : { name : this.userData.name, surname : this.userData.surname, email : this.userData.email } }; console.log("Request body is:"); console.log(request); fetchOrdinary( optionsStore.OPTIONS.sendIdentUrl, JSON.stringify(request), { success: authRequestSuccess, fail: authRequestFail } ); } } } ); } @observable userData = { name : "", surname : "", email : "" }; @observable buttons = { sendData : { disabled : true } }; /** *     * @key -   * @value -      (name, type),          */ componentsMap = { userData : [ ["name", "fio"], ["surname", "fio"], ["email", "email"], ["send_data", "button"] ] }; /** *     listener'  stores */ @observable listenerBlocks = {}; /** *    */ @action fillBlocks = () => { for (let i in this.componentsMap) { const pageBlock = this.componentsMap[i]; //      (key)     (value) const blocks = {}; pageBlock.forEach((item, i) => { const _name = item[0]; const _type = item[1]; if (!blocks[_type]) { blocks[_type] = [_name] } else { blocks[_type].push(_name) } }) this.listenerBlocks[i] = blocks; } }; /** *    */ @action fillData = () => { if (optionsStore.preset) { // ,   undefined,     if (optionsStore.preset.name) this.userData.name = optionsStore.preset.name; if (optionsStore.preset.surname) this.userData.surname = optionsStore.preset.surname; } }; /** * Listener    */ @computed get dataInput() { const mappedResult = { fio : {}, email : { email : {} } }; if (this.FioStore && this.FioStore.items) { this.listenerBlocks.userData.fio.forEach((item) => { const i = get(this.FioStore.items, item); if (i) { mappedResult.fio[item] = { isCorrect : i.isCorrect, value : i.value } } }) } if (this.EmailStore && this.EmailStore.params) { mappedResult.email.email = { isCorrect : this.EmailStore.params.isCorrect, prevalidated : this.EmailStore.params.prevalidated, value : this.EmailStore.params.value } } return mappedResult } /** * Listener     */ @computed get sendDataButton() { let result = {}; const i = get(this.ButtonStore.items, "send_data"); if (i) { result = { isClicked : i.isClicked } } return result } } export default new mainStore();