{"size": 2780, "ext": "js", "max_stars_repo_path": "src/components/RequestBar/RequestBar.js", "max_stars_repo_name": "doscoun/scouter-paper", "max_stars_repo_stars_event_min_datetime": "2018-04-04T04:29:02.000Z", "max_stars_repo_stars_event_max_datetime": "2019-01-11T01:58:08.000Z", "max_issues_repo_path": "src/components/RequestBar/RequestBar.js", "max_issues_repo_name": "doscoun/scouter-paper", "max_issues_repo_issues_event_min_datetime": "2019-01-13T10:58:00.000Z", "max_issues_repo_issues_event_max_datetime": "2021-12-28T02:28:21.000Z", "max_forks_repo_path": "src/components/RequestBar/RequestBar.js", "max_forks_repo_name": "doscoun/scouter-paper", "max_forks_repo_forks_event_min_datetime": "2019-01-17T06:07:47.000Z", "max_forks_repo_forks_event_max_datetime": "2022-03-23T04:26:03.000Z"}
{"max_stars_count": 115, "max_issues_count": 118, "max_forks_count": 40, "avg_line_length": 25.2727272727, "max_line_length": 95, "alphanum_fraction": 0.4748201439}
import React, {Component} from 'react';
import './RequestBar.css';
import {withRouter} from 'react-router-dom';
import {connect} from 'react-redux';

class RequestBar extends Component {

    lastRequestTIme = null;
    range = 2000;

    constructor(props) {
        super(props);
        this.state = {
            requests: []
        };
    }

    componentWillReceiveProps(nextProps) {

        if (this.lastRequestTIme !== nextProps.request.time) {
            let requests = this.state.requests;

            let dup = requests.filter((d) => {
                return d.time === nextProps.request.time;
            }).length;

            if (dup < 1) {
                requests.push({
                    process: false,
                    time: nextProps.request.time
                });

                let now = new Date().getTime();
                requests = requests.filter((d) => {
                    if (!d.process || now < (d.time + this.range)) {
                        return true;
                    } else {
                        return false;
                    }
                });

                this.setState({
                    requests: requests
                });
            }


        }

    }

    shouldComponentUpdate(nextProps, nextState) {
        let update = false;
        if (this.lastRequestTIme !== nextProps.request.time) {
            this.lastRequestTIme = nextProps.request.time;
            update = true;
        }
        return update;
    }

    componentDidUpdate() {

        let requests = this.state.requests;

        let now = new Date().getTime();
        this.refs.requestBar.querySelectorAll("div").forEach((e) => {
            if ((now - this.range) > e.getAttribute("data-time")) {
                e.remove();
            }
        });

        requests.forEach((d) => {
            let dup = this.refs.requestBar.querySelectorAll("div[data-time='" + d.time + "']");
            if (dup.length < 1) {
                let div = document.createElement("div");
                div.setAttribute("data-time", d.time);
                this.refs.requestBar.appendChild(div);
                setTimeout(() => {
                    div.classList.add("request");
                }, (now - d.time));
            }
        });

        requests = requests.map((d) => {
            d.process = true;
            return d;
        });

        this.setState({
            requests: requests
        });

    }

    render() {
        return (
            <div className="request-bar" ref="requestBar"></div>
        );
    }
}

let mapStateToProps = (state) => {
    return {
        request: state.request
    };
};

RequestBar = connect(mapStateToProps, undefined)(RequestBar);

export default withRouter(RequestBar);