{"size": 1430, "ext": "js", "max_stars_repo_path": "src/pages/Projects/RepoStats.js", "max_stars_repo_name": "DTan13/Github-Timeline", "max_stars_repo_stars_event_min_datetime": "2020-11-04T08:26:42.000Z", "max_stars_repo_stars_event_max_datetime": "2020-11-04T08:26:42.000Z", "max_issues_repo_path": "src/pages/Projects/RepoStats.js", "max_issues_repo_name": "DTan13/git.timeline", "max_issues_repo_issues_event_min_datetime": "2020-12-13T06:59:22.000Z", "max_issues_repo_issues_event_max_datetime": "2021-10-14T05:54:12.000Z", "max_forks_repo_path": "src/pages/Projects/RepoStats.js", "max_forks_repo_name": "DTan13/git.timeline", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 1, "max_issues_count": 10, "max_forks_count": null, "avg_line_length": 33.2558139535, "max_line_length": 98, "alphanum_fraction": 0.5237762238}
import Axios from 'axios';
import React, { useEffect, useState } from 'react';
import Contents from '../../components/common/Contents';
import RepoLanguageData from '../../components/common/RepoLanguageData';
import RepoDetails from './RepoDetails';

const RepoStats = props => {
    const [languageData, setLanguageData] = useState();

    useEffect(() => {
        Axios.get(`${props.repo.languages_url}`, {
            headers: {
                'Authorization': `token ${process.env.REACT_APP_GITHUB_API_KEY}`
            }
        }).then(res => {
            setLanguageData(res.data);
        }).catch(err => {
            console.log(err);
        });
    }, [props.repo]);

    return (
        <div className="repo-stats">
            <button onClick={props.selectRepo}>X</button>
            <div className="repo-stats-top">
                <RepoDetails stats repo={props.repo} />
                {languageData && [<hr />, <RepoLanguageData stats languageData={languageData} />]}
            </div>
            <div className="repo-stats-mid">
                {/* TODO Add more details*/}
            </div>
            <div className="repo-stats-bottom">
                <div className="content-wrapper">
                    <h3>Contents</h3>
                    <hr />
                    <Contents repo={props.repo.url} />
                </div>
            </div>
        </div>
    );
};

export default RepoStats;