<commit_before>import React, { PureComponent } from 'react';
import moment from 'moment';
import validate from 'validate.js';
import head from 'lodash.head';
import { Button, InputGroup, ServerErrorMsg, ErrorMsg } from 'binary-components';
import { getConstraints } from './SettingsSelfExclusion.validation.config';
import UpdateNotice from '../containers/UpdateNotice';
import { api } from '../_data/LiveData';

export default class SettingsSelfExclusion extends PureComponent {

  props:{
    max_balance: number,
    max_turnover: number,
    max_losses: number,
    max_7day_turnover: number,
    max_7day_losses: number,
    max_30day_turnover: number,
    max_30day_losses: number,
    max_open_bets: number,
    session_duration_limit: number,
    timeout_until: number,
    exclude_until: string,
  };

  constructor(props) {
    super(props);
    this.state = {
      max_balance: props.max_balance,
      max_turnover: props.max_turnover,
      max_losses: props.max_losses,
      max_7day_turnover: props.max_7day_turnover,
      max_7day_losses: props.max_7day_losses,
      max_30day_turnover: props.max_30day_turnover,
      max_30day_losses: props.max_30day_losses,
      max_open_bets: props.max_open_bets,
      session_duration_limit: props.session_duration_limit,
      timeout_until_time: props.timeout_until,
      timeout_until_date: props.timeout_until,
      exclude_until: props.exclude_until,
      errors: {},
      serverError: false,
      success: false,
      /*
        This is not a recommended practice to have nested object in state.
        I am not sure why you need this object. Are you trying to find out
        whether a value has been changed or not? You could easily do that by
        calling !isEqual(this.props.max_balance, this.state.max_balance)
       TODO
      */
      touched: {
        max_balance: false,
        max_turnover: false,
        max_losses: false,
        max_7day_turnover: false,
        max_7day_losses: false,
        max_30day_turnover: false,
        max_30day_losses: false,
        max_open_bets: false,
        session_duration_limit: false,
        timeout_until_time: false,
        timeout_until_date: false,
        exclude_until: false,
      },
    };
  }

  onEntryChange = (e:SyntheticEvent) => {
    this.setState({
      [e.target.id]: e.target.value,
      touched: {
        ...this.state.touched,
        [e.target.id]: true
      },
    }, () => this.validateForm());
  }

  validateForm = () => {
    this.constraints = getConstraints(this.props, this.state);
    this.setState({
      errors: validate(this.state, this.constraints, {
        format: 'grouped',
        fullMessages: false,
        cleanAttributes: false
      }) || {},
    });
  }

  onFormSubmit = (e:SyntheticEvent) => {
    e.preventDefault();
    Object.keys(this.state.errors).length <= 0
    && this.updateSelfExclusion();
  }

  updateSelfExclusion = async () => {
    const { max_balance, max_turnover, max_losses, max_7day_turnover, max_7day_losses,
      max_30day_turnover, max_30day_losses, max_open_bets, session_duration_limit,
      timeout_until_time, timeout_until_date, exclude_until } = this.state;
    const timeout_until = moment(timeout_until_date + ' ' + timeout_until_time).valueOf() / 1000;
    const newSelfExclusionSettings = {
      max_balance,
      max_turnover,
      max_losses,
      max_7day_turnover,
      max_7day_losses,
      max_30day_turnover,
      max_30day_losses,
      max_open_bets,
      session_duration_limit,
      exclude_until,
      timeout_until,
    };
    try {
      await api.setSelfExclusion(newSelfExclusionSettings);
      this.setState({
        success: true,
        serverError: false,
      });
      api.getSelfExclusion();
      // Do we really have to call getAccountLimits() when we just updated self exclusion? TODO
      api.getAccountLimits();
      setTimeout(() => {
        this.setState({ success: false });
        if (exclude_until) {
          window.location.reload();
        }
      }, 3000);
    } catch (e) {
      // sanitize the error response from server. it is spitting out the variable names TODO
      this.setState({ serverError: e.error.error.message });
    }
  }

  render() {
    const { max_balance, max_turnover, max_losses, max_7day_turnover, max_7day_losses,
      max_30day_turnover, max_30day_losses, max_open_bets, session_duration_limit,
      exclude_until, timeout_until_date, timeout_until_time, success, serverError, touched, errors } = this.state;
    // const wrongExcludeUntillTime = isValidTime(timeout_until_time);
    return (
      <form className="settings-self-exclusion" onSubmit={this.onFormSubmit}>
        {serverError && <ServerErrorMsg text={serverError} />}
        {Object.keys(this.state.errors) > 0 && <ErrorMsg text="Please fill the form with valid values" />}
        <UpdateNotice text="Settings updated" show={success} />
        <InputGroup
          id="max_balance"
          label="Maximum account cash balance"
          type="text"
          maxLength="20"<commit_msg>Fix self-exclusion field update delay issue<commit_after>import React, { PureComponent } from 'react';
import moment from 'moment';
import validate from 'validate.js';
import head from 'lodash.head';
import { Button, InputGroup, ServerErrorMsg, ErrorMsg } from 'binary-components';
import { getConstraints } from './SettingsSelfExclusion.validation.config';
import UpdateNotice from '../containers/UpdateNotice';
import { api } from '../_data/LiveData';

export default class SettingsSelfExclusion extends PureComponent {

  props:{
    max_balance: number,
    max_turnover: number,
    max_losses: number,
    max_7day_turnover: number,
    max_7day_losses: number,
    max_30day_turnover: number,
    max_30day_losses: number,
    max_open_bets: number,
    session_duration_limit: number,
    timeout_until: number,
    exclude_until: string,
  };

  constructor(props) {
    super(props);
    this.state = {
      max_balance: props.max_balance,
      max_turnover: props.max_turnover,
      max_losses: props.max_losses,
      max_7day_turnover: props.max_7day_turnover,
      max_7day_losses: props.max_7day_losses,
      max_30day_turnover: props.max_30day_turnover,
      max_30day_losses: props.max_30day_losses,
      max_open_bets: props.max_open_bets,
      session_duration_limit: props.session_duration_limit,
      timeout_until_time: props.timeout_until,
      timeout_until_date: props.timeout_until,
      exclude_until: props.exclude_until,
      errors: {},
      serverError: false,
      success: false,
      /*
        This is not a recommended practice to have nested object in state.
        I am not sure why you need this object. Are you trying to find out
        whether a value has been changed or not? You could easily do that by
        calling !isEqual(this.props.max_balance, this.state.max_balance)
       TODO
      */
      touched: {
        max_balance: false,
        max_turnover: false,
        max_losses: false,
        max_7day_turnover: false,
        max_7day_losses: false,
        max_30day_turnover: false,
        max_30day_losses: false,
        max_open_bets: false,
        session_duration_limit: false,
        timeout_until_time: false,
        timeout_until_date: false,
        exclude_until: false,
      },
    };
  }

  componentWillReceiveProps = (newProps) => {
    const newState = {};
    if (newProps.max_balance !== this.state.max_balance) newState.max_balance = newProps.max_balance;
    if (newProps.max_turnover !== this.state.max_turnover) newState.max_turnover = newProps.max_turnover;
    if (newProps.max_losses !== this.state.max_losses) newState.max_losses = newProps.max_losses;
    if (newProps.max_7day_turnover !== this.state.max_7day_turnover) newState.max_7day_turnover = newProps.max_7day_turnover;
    if (newProps.max_7day_losses !== this.state.max_7day_losses) newState.max_7day_losses = newProps.max_7day_losses;
    if (newProps.max_30day_turnover !== this.state.max_30day_turnover) newState.max_30day_turnover = newProps.max_30day_turnover;
    if (newProps.max_open_bets !== this.state.max_open_bets) newState.max_open_bets = newProps.max_open_bets;
    if (newProps.session_duration_limit !== this.state.session_duration_limit) newState.session_duration_limit = newProps.session_duration_limit;
    if (newProps.timeout_until_time !== this.state.timeout_until_time) newState.timeout_until_time = newProps.timeout_until_time;
    if (newProps.timeout_until_date !== this.state.timeout_until_date) newState.timeout_until_date = newProps.timeout_until_date;
    if (newProps.exclude_until !== this.state.exclude_until) newState.exclude_until = newProps.exclude_until;
    if (Object.keys(newState).length > 0) this.setState(newState);
  }

  onEntryChange = (e:SyntheticEvent) => {
    this.setState({
      [e.target.id]: e.target.value,
      touched: {
        ...this.state.touched,
        [e.target.id]: true
      },
    }, () => this.validateForm());
  }

  validateForm = () => {
    this.constraints = getConstraints(this.props, this.state);
    this.setState({
      errors: validate(this.state, this.constraints, {
        format: 'grouped',
        fullMessages: false,
        cleanAttributes: false
      }) || {},
    });
  }

  onFormSubmit = (e:SyntheticEvent) => {
    e.preventDefault();
    Object.keys(this.state.errors).length <= 0
    && this.updateSelfExclusion();
  }

  updateSelfExclusion = async () => {
    const { max_balance, max_turnover, max_losses, max_7day_turnover, max_7day_losses,
      max_30day_turnover, max_30day_losses, max_open_bets, session_duration_limit,
      timeout_until_time, timeout_until_date, exclude_until } = this.state;
    const timeout_until = moment(timeout_until_date + ' ' + timeout_until_time).valueOf() / 1000;
    const newSelfExclusionSettings = {
      max_balance,
      max_turnover,
      max_losses,
      max_7day_turnover,
      max_7day_losses,
      max_30day_turnover,
      max_30day_losses,
      max_open_bets,
      session_duration_limit,
      exclude_until,
      timeout_until,
    };
    try {
      await api.setSelfExclusion(newSelfExclusionSettings);
      this.setState({
        success: true,
        serverError: false,
      });
      api.getSelfExclusion();
      api.getAccountLimits();
      setTimeout(() => {
        this.setState({ success: false });
        if (exclude_until) {
          window.location.reload();
        }
      }, 3000);
    } catch (e) {
      this.setState({ serverError: e.error.error.message });
    }
  }

  render() {
    const { max_balance, max_turnover, max_losses, max_7day_turnover, max_7day_losses,
      max_30day_turnover, max_30day_losses, max_open_bets, session_duration_limit,
      exclude_until, timeout_until_date, timeout_until_time, success, serverError, touched, errors } = this.state;
    // const wrongExcludeUntillTime = isValidTime(timeout_until_time);
    return (
      <form className="settings-self-exclusion" onSubmit={this.onFormSubmit}>
        {serverError && <ServerErrorMsg text={serverError} />}
        {Object.keys(this.state.errors) > 0 && <ErrorMsg text="Please fill the form with valid values" />}
        <UpdateNotice text="Settings updated" show={success} />
        <InputGroup
          id="max_balance"
          label="Maximum account cash balance"
          type="text"
          maxLength="20"
{'fraction_non_alphanumeric': 0.10108524417994048, 'fraction_numerical': 0.01093996149133555, 'mean_word_length': 3.211942499078511, 'pattern_counts': {'":': 0, '<': 15, '<?xml version=': 0, '>': 27, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3208552', 'n_tokens_mistral': 3663, 'n_tokens_neox': 3587, 'n_words': 705}