<commit_before>//@flow
import React, { Component } from 'react';
import _ from 'lodash';
import { fetchJson } from './Helpers';
import MembersLastWeekChart from '../../components/CallToolAnalytics/MembersLastWeekChart';
import MembersStatusTable from '../../components/CallToolAnalytics/MembersStatusTable';
import TargetsChart from '../../components/CallToolAnalytics/TargetsChart';
import TargetsStatusTable from '../../components/CallToolAnalytics/TargetsStatusTable';


type OwnProps = {
  pageId: string | number
}

type OwnState = {
  data?: {
    last_week: {
      member_calls: any,
      target_calls: any
    }
  }
}

class CallToolViewAnalytics extends Component {
  state: OwnState;
  props: OwnProps;

  constructor(props: OwnProps) {
    super(props);

    this.state = {
      dataLoaded: false
    };
  }

  componentDidMount() {
    this.fetchData();
  }

  fetchData() {
    const url = `/api/pages/${this.props.pageId}/analytics/call_tool`;
    fetchJson(url).then((json) => {
      this.setState({data: json['data']});
    }).catch((response) => {
      console.log('fetch errrrror');
      console.log(response);
      // alert('Oops! Something went wrong, please try reloading the page.');
    });
  }

  render() {
    if(!this.state.data) {
      return this.renderLoading();
    }

    return(
      <div>
        <h1> Call Tool </h1>
        <div className="nav">
          <div className="btn-group" role="group">
            <button className="btn btn-default active" type="button"> Last Week </button>
            <button className="btn btn-default" type="button"> All Time </button>
          </div>
        </div>

        <h4> Members stats </h4><commit_msg>[Call Tool Analytics] Added filter to react component<commit_after>//@flow
import React, { Component } from 'react';
import _ from 'lodash';
import classnames from 'classnames';
import { fetchJson } from './Helpers';
import MembersLastWeekChart from '../../components/CallToolAnalytics/MembersLastWeekChart';
import MembersStatusTable from '../../components/CallToolAnalytics/MembersStatusTable';
import TargetsChart from '../../components/CallToolAnalytics/TargetsChart';
import TargetsStatusTable from '../../components/CallToolAnalytics/TargetsStatusTable';


type OwnProps = {
  pageId: string | number
}

type OwnState = {
  data?: {
    last_week: {
      member_calls: any,
      target_calls: any
    }
  },
  filter: string
}

class CallToolViewAnalytics extends Component {
  state: OwnState;
  props: OwnProps;

  constructor(props: OwnProps) {
    super(props);

    this.state = {
      dataLoaded: false,
      filter: 'all-time'
    };
  }

  componentDidMount() {
    this.fetchData();
  }

  fetchData() {
    const url = `/api/pages/${this.props.pageId}/analytics/call_tool`;
    fetchJson(url).then((json) => {
      this.setState({data: json['data']});
    }).catch((response) => {
      console.log('fetch errrrror');
      console.log(response);
      // alert('Oops! Something went wrong, please try reloading the page.');
    });
  }

  updateFilter(filter:string) {
    this.setState({filter});
  }

  render() {
    const lastWeekButtonClasses = classnames(
            {btn: true, 'btn-default': true, active: this.state.filter === 'last-week'}
          ),
          allTimeButtonClasses = classnames(
            {btn: true, 'btn-default': true, active: this.state.filter === 'all-time'}
          );

    if(!this.state.data) {
      return this.renderLoading();
    }

    return(
      <div>
        <h1> Call Tool </h1>
        <div className="nav">
          <div className="btn-group" role="group">
            <button className={lastWeekButtonClasses} type="button" onClick={() => { this.updateFilter('last-week'); }}> Last Week </button>
            <button className={allTimeButtonClasses} type="button" onClick={() => { this.updateFilter('all-time'); }}> All Time </button>
          </div>
        </div>

        <h4> Members stats </h4>
{'fraction_non_alphanumeric': 0.15142353237591333, 'fraction_numerical': 0.002015621063240111, 'mean_word_length': 2.9620758483033933, 'pattern_counts': {'":': 0, '<': 29, '<?xml version=': 0, '>': 35, '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': '3317033', 'n_tokens_mistral': 1178, 'n_tokens_neox': 1177, 'n_words': 264}