import React, {Component} from "react"; import {Col, notification, Row} from "antd"; import {remaining_git_requests} from "../../../api_calls/release_calls"; import Statistics_components from "./statistics_components"; import Github_rate_limit_status_bar_countdown from "./github_rate_limit_status_bar_countdown"; import {InfoCircleOutlined} from "@ant-design/icons"; export default class Github_rate_limit_status_bar extends Component{ constructor(props) { super(props); this.state = { total: 0, remaining: 0, time_to_reset_secs: 0, time_to_reset_mins: 0, } remaining_git_requests().then(data => { this.setState({ total: data["limit"], remaining: data["remaining"], time_to_reset_secs: data["reset_secs"], time_to_reset_mins: data["reset_mins"] }) }) } componentWillReceiveProps(nextProps, nextContext) { remaining_git_requests().then(data => { console.log(data); this.setState({ total: data["limit"], remaining: data["remaining"], time_to_reset_secs: data["reset_secs"], time_to_reset_mins: data["reset_mins"] }) }); } openNotification = () => { const args = { message: 'GitHub Rate Limit Stats', description: 'The numbers shows rate limits stats for the github developer APIs used to get release content. The total represents the number of' + ' API hits allowed per hour. Time to reset represents time before the quota refreshes.', duration: 0, }; notification.open(args); }; render() { return ( <div> <Row style={{padding: "30px"}} className="center"> <Col span={23}> <p>GitHub Developer API Quota Stats</p> </Col> <Col span={1}> <InfoCircleOutlined className="right" onClick={this.openNotification} /> </Col> </Row> <Row style={{padding: "30px"}}> <Col span={8}> <Statistics_components title="Total" value={this.state.total}/> </Col> <Col span={8}> <Statistics_components title="Remaining" value={this.state.remaining}/> </Col> <Col span={8}> <Github_rate_limit_status_bar_countdown minutes={this.state.time_to_reset_mins}/> </Col> </Row> </div> ) } }