<commit_before>'use strict';

import React from 'react';

let notif_id = 0;

class Notif extends React.Component {

  static propTypes = {
    model: React.PropTypes.any,
    colors: React.PropTypes.any
  };

  constructor(props) {
    super(props);
    this.timeout = [];
    this._onChange = this.onChange.bind(this);
    this.props.model.on('change', this._onChange);
  }

  state = {
    notifs: []
  };

  componentWillUnmount() {
    this.props.model.off('change', this._onChange);
    this.timeout.forEach((timer) => {
      clearTimeout(timer);
    });
  }

  onChange(station) {
    var diff = station.bikesChange();
    if (!diff) {
      return;
    }

    notif_id++;
    this.setState({
      notifs: this.state.notifs.concat([{
        id: 'notif_' + notif_id,
        diff: diff
      }])
    });
    this.timeout.push(setTimeout(() => {
      this.setState({
        notifs: this.state.notifs.slice(1, this.state.notifs.length)
      });
    }, 4000));
  }

  render() {
    return <div>
      {this.state.notifs.map((notif) => {
        let css = notif.diff > 0 ? 'in' : 'out';
        let sign = notif.diff > 0 ? '+' : '-';
        let color = notif.diff > 0 ? this.props.colors.bikes : this.props.colors.slots;
        let style = {
          backgroundColor: color,<commit_msg>feat(front): group notifications to show a summed up view of bike changes<commit_after>'use strict';

import React from 'react';
import Rx from 'rx';

let notif_id = 0;

class Notif extends React.Component {

  static propTypes = {
    model: React.PropTypes.any,
    colors: React.PropTypes.any
  };

  constructor(props) {
    super(props);
    this.timeout = [];
    this._onChange = this.onChange.bind(this);

    this.subscription =
      Rx.Observable.fromEvent(this.props.model, 'change')
        .map(station => station.bikesChange())
        .windowWithTime(1000)
        .flatMap(buffer => buffer.sum())
        .subscribe(this._onChange);
  }

  state = {
    notifs: []
  };

  componentWillUnmount() {
    this.subscription.dispose();
    this.timeout.forEach((timer) => {
      clearTimeout(timer);
    });
  }

  onChange(diff) {
    if (!diff) {
      return;
    }

    notif_id++;
    this.setState({
      notifs: this.state.notifs.concat([{
        id: 'notif_' + notif_id,
        diff: diff
      }])
    });
    this.timeout.push(setTimeout(() => {
      this.setState({
        notifs: this.state.notifs.slice(1, this.state.notifs.length)
      });
    }, 4000));
  }

  render() {
    return <div>
      {this.state.notifs.map((notif) => {
        let css = notif.diff > 0 ? 'in' : 'out';
        let sign = notif.diff > 0 ? '+' : '-';
        let color = notif.diff > 0 ? this.props.colors.bikes : this.props.colors.slots;
        let style = {
          backgroundColor: color,
{'fraction_non_alphanumeric': 0.15815780078543376, 'fraction_numerical': 0.00785433773652267, 'mean_word_length': 2.331747919143876, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 19, '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': '744872', 'n_tokens_mistral': 971, 'n_tokens_neox': 940, 'n_words': 175}