\r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default UserLookupLoading;","import React from 'react';\r\n\r\nimport './UserLookupError.css';\r\n\r\nclass UserLookupError extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n }\r\n\r\n render() {\r\n return (\r\n Retrieving user information...
\r\n\r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default UserLookupError;","import React from 'react';\r\n\r\nclass UserInfoCard extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n }\r\n\r\n render() {\r\n return (\r\n An error occurred while retrieving user information:
\r\n\r\n {this.props.errorMessage}\r\n
\r\n\r\n {this.props.errorStack}\r\n
\r\n \r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default UserInfoCard;","import React from 'react';\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport { faSpinner } from '@fortawesome/free-solid-svg-icons';\r\n\r\nimport './CardContentLookupLoading.css'\r\n\r\nclass CardContentLookupLoading extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n }\r\n\r\n render() {\r\n return (\r\n Name: {this.props.userName}
\r\nLogin: {this.props.userLogin}
\r\nRepos: {this.props.userRepos}
\r\nFollowers: {this.props.userFollowers}
\r\nFollowing: {this.props.userFollowing}
\r\n\r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default CardContentLookupLoading;","import React from 'react';\r\n\r\nimport './CardContentLookupError.css';\r\n\r\nclass CardContentLookupError extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n }\r\n\r\n render() {\r\n return (\r\n Retrieving {this.props.cardContentToLookup}...
\r\n\r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default CardContentLookupError;","import React from 'react';\r\nimport axios from 'axios';\r\n\r\nimport CardContentLookupLoading from './CardContentLookupLoading';\r\nimport CardContentLookupError from './CardContentLookupError';\r\n\r\nimport './CommitsInfoCard.css';\r\n\r\nclass CommitsInfoCard extends React.Component {\r\n githubPersonalAccessToken = '0d7a6ac0c75fa178712a5e4cd8d7667695cdb7f3';\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.handleFilterClick = this.handleFilterClick.bind(this);\r\n\r\n this.state = {\r\n commits: [],\r\n filteredCommits: [],\r\n commitsLookupErrorMessage: null,\r\n commitsLookupErrorStack: null,\r\n commitsLookupIsInProgress: false,\r\n commitsFilteredBy: 'all-time'\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n this.lookUpCommits(this.props.userLogin);\r\n }\r\n\r\n lookUpCommits(userLogin) {\r\n this.setState({\r\n commits: [],\r\n filteredCommits: [],\r\n commitsLookupErrorMessage: null,\r\n commitsLookupErrorStack: null,\r\n commitsLookupIsInProgress: true,\r\n commitsFilteredBy: 'all-time'\r\n });\r\n\r\n axios.get(\r\n `https://api.github.com/users/${userLogin}/repos`, {\r\n headers: {\r\n Authorization: 'Bearer ' + this.githubPersonalAccessToken\r\n }\r\n })\r\n .then(\r\n res => {\r\n let currentCommits = [];\r\n let reposToProcess = res.data.length;\r\n\r\n res.data.map(repo => {\r\n if (this.state.commitsLookupIsInProgress) {\r\n axios.get(\r\n repo.commits_url.replace('{/sha}', ''), {\r\n headers: {\r\n Authorization: 'Bearer ' + this.githubPersonalAccessToken\r\n }\r\n }\r\n )\r\n .then(\r\n commitsRes => {\r\n commitsRes.data.map(commit => {\r\n if (commit && commit.committer && commit.committer.login === this.props.userLogin) {\r\n currentCommits.push({\r\n committer: commit.committer.login,\r\n date: new Date(commit.commit.committer.date)\r\n });\r\n }\r\n });\r\n\r\n reposToProcess--;\r\n\r\n if (reposToProcess === 0) {\r\n this.setState({\r\n commits: currentCommits,\r\n filteredCommits: currentCommits,\r\n commitsLookupIsInProgress: false\r\n });\r\n }\r\n },\r\n commitsErr => {\r\n this.setState({\r\n commitsLookupErrorMessage: commitsErr.message,\r\n commitsLookupErrorStack: commitsErr.stack,\r\n commitsLookupIsInProgress: false\r\n });\r\n }\r\n )\r\n }\r\n });\r\n },\r\n err => {\r\n this.setState({\r\n commitsLookupErrorMessage: err.message,\r\n commitsLookupErrorStack: err.stack,\r\n commitsLookupIsInProgress: false\r\n });\r\n });\r\n }\r\n\r\n handleFilterClick(e, filterBy) {\r\n this.setState({\r\n commitsFilteredBy: filterBy\r\n });\r\n\r\n switch(filterBy) {\r\n case 'past-day':\r\n this.setState({\r\n filteredCommits: this.state.commits.filter(commit => {\r\n const filterDate = new Date();\r\n filterDate.setDate(filterDate.getDate() - 1);\r\n\r\n return commit.date >= filterDate;\r\n })\r\n });\r\n break;\r\n\r\n case 'past-week':\r\n this.setState({\r\n filteredCommits: this.state.commits.filter(commit => {\r\n const filterDate = new Date();\r\n filterDate.setDate(filterDate.getDate() - 7);\r\n\r\n return commit.date >= filterDate;\r\n })\r\n });\r\n break;\r\n\r\n case 'past-month':\r\n this.setState({\r\n filteredCommits: this.state.commits.filter(commit => {\r\n const filterDate = new Date();\r\n filterDate.setDate(filterDate.getDate() - 31);\r\n\r\n return commit.date >= filterDate;\r\n })\r\n });\r\n break;\r\n\r\n case 'past-year':\r\n this.setState({\r\n filteredCommits: this.state.commits.filter(commit => {\r\n const filterDate = new Date();\r\n filterDate.setDate(filterDate.getDate() - 365);\r\n\r\n return commit.date >= filterDate;\r\n })\r\n });\r\n break;\r\n\r\n case 'all-time':\r\n default:\r\n this.setState({\r\n filteredCommits: this.state.commits\r\n });\r\n break;\r\n }\r\n }\r\n\r\n render() {\r\n const commitsLookupIsInProgress = this.state.commitsLookupIsInProgress;\r\n\r\n const commits = this.state.commits;\r\n\r\n const commitsLookupErrorMessage = this.state.commitsLookupErrorMessage;\r\n const commitsLookupErrorStack = this.state.commitsLookupErrorStack;\r\n\r\n let cardContent;\r\n\r\n const cardContentToLookup = 'user commit information.';\r\n\r\n if (commitsLookupIsInProgress) {\r\n cardContent = An error occurred while {this.props.cardContentToLookup}:
\r\n\r\n {this.props.errorMessage}\r\n
\r\n\r\n {this.props.errorStack}\r\n
\r\n \r\n
\r\n );\r\n } else {\r\n cardContent = {this.state.filteredCommits.length}
\r\ncommits
\r\n\r\n \r\n \r\n \r\n \r\n \r\n
\r\n User has no public commit information.
;\r\n }\r\n }\r\n\r\n return (\r\n\r\n {cardContent}\r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default CommitsInfoCard;","import React from 'react';\r\nimport axios from 'axios';\r\nimport * as am4core from '@amcharts/amcharts4/core';\r\nimport * as am4charts from '@amcharts/amcharts4/charts';\r\nimport am4themes_animated from '@amcharts/amcharts4/themes/animated';\r\n\r\nimport CardContentLookupLoading from './CardContentLookupLoading';\r\nimport CardContentLookupError from './CardContentLookupError';\r\n\r\nimport './RepoLanguagesCard.css';\r\n\r\nclass RepoLanguagesCard extends React.Component {\r\n githubPersonalAccessToken = '0d7a6ac0c75fa178712a5e4cd8d7667695cdb7f3';\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n repoLanguages: [],\r\n repoLanguagesLookupErrorMessage: null,\r\n repoLanguagesLookupErrorStack: null,\r\n repoLanguagesLookupIsInProgress: false\r\n };\r\n\r\n am4core.useTheme(am4themes_animated);\r\n }\r\n\r\n componentDidMount() {\r\n this.lookupRepoLanguages(this.props.userLogin);\r\n }\r\n\r\n lookupRepoLanguages(userLogin) {\r\n this.setState({\r\n repoLanguages: [],\r\n repoLanguagesLookupErrorMessage: null,\r\n repoLanguagesLookupErrorStack: null,\r\n repoLanguagesLookupIsInProgress: true\r\n });\r\n\r\n axios.get(\r\n `https://api.github.com/users/${userLogin}/repos`, {\r\n headers: {\r\n Authorization: 'Bearer ' + this.githubPersonalAccessToken\r\n }\r\n })\r\n .then(\r\n res => {\r\n let currentRepoLanguages = {};\r\n let reposToProcess = res.data.length;\r\n\r\n res.data.map(repo => {\r\n if (this.state.repoLanguagesLookupIsInProgress) {\r\n axios.get(\r\n repo.languages_url, {\r\n headers: {\r\n Authorization: 'Bearer ' + this.githubPersonalAccessToken\r\n }\r\n }\r\n )\r\n .then(\r\n repoLanguagesRes => {\r\n const repoLanguages = repoLanguagesRes.data;\r\n\r\n Object.keys(repoLanguages).map(repoLanguageKey => {\r\n if (currentRepoLanguages[repoLanguageKey]) {\r\n currentRepoLanguages[repoLanguageKey] +=\r\n repoLanguages[repoLanguageKey];\r\n } else {\r\n currentRepoLanguages[repoLanguageKey] =\r\n repoLanguages[repoLanguageKey];\r\n }\r\n });\r\n\r\n reposToProcess--;\r\n\r\n if (reposToProcess === 0) {\r\n let total = 0;\r\n\r\n Object.keys(currentRepoLanguages).map(repoLanguageKey => {\r\n total += currentRepoLanguages[repoLanguageKey];\r\n });\r\n\r\n let repoLanguagePercentages = [];\r\n\r\n Object.keys(currentRepoLanguages).map(repoLanguageKey => {\r\n repoLanguagePercentages.push({\r\n language: repoLanguageKey,\r\n percentage: (Math.round((currentRepoLanguages[repoLanguageKey] / total) * 10000) / 100)\r\n });\r\n });\r\n\r\n this.setState({\r\n repoLanguages: repoLanguagePercentages,\r\n repoLanguagesLookupIsInProgress: false\r\n });\r\n }\r\n },\r\n repoLanguagesErr => {\r\n this.setState({\r\n repoLanguagesLookupErrorMessage: repoLanguagesErr.message,\r\n repoLanguagesLookupErrorStack: repoLanguagesErr.stack,\r\n repoLanguagesLookupIsInProgress: false\r\n });\r\n }\r\n )\r\n }\r\n });\r\n },\r\n err => {\r\n this.setState({\r\n repoLanguagesLookupErrorMessage: err.message,\r\n repoLanguagesLookupErrorStack: err.stack,\r\n repoLanguagesLookupIsInProgress: false\r\n });\r\n });\r\n }\r\n\r\n render() {\r\n const repoLanguagesLookupIsInProgress = this.state.repoLanguagesLookupIsInProgress;\r\n\r\n const repoLanguages = this.state.repoLanguages;\r\n\r\n const repoLanguagesLookupErrorMessage = this.state.repoLanguagesLookupErrorMessage;\r\n const repoLanguagesLookupErrorStack = this.state.repoLanguagesLookupErrorStack;\r\n\r\n let cardContent;\r\n\r\n const cardContentToLookup = 'user repo language information.';\r\n\r\n let displayChart = false;\r\n\r\n if (repoLanguagesLookupIsInProgress) {\r\n cardContent = User has no public repo language information.
;\r\n }\r\n }\r\n\r\n return (\r\n\r\n {cardContent}\r\n \r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default RepoLanguagesCard;","import React from 'react';\r\nimport axios from 'axios';\r\nimport * as am4core from '@amcharts/amcharts4/core';\r\nimport * as am4charts from '@amcharts/amcharts4/charts';\r\nimport am4themes_animated from '@amcharts/amcharts4/themes/animated';\r\n\r\nimport CardContentLookupLoading from './CardContentLookupLoading';\r\nimport CardContentLookupError from './CardContentLookupError';\r\n\r\nimport './CommitsActivityCard.css';\r\n\r\nclass CommitsActivityCard extends React.Component {\r\n githubPersonalAccessToken = '0d7a6ac0c75fa178712a5e4cd8d7667695cdb7f3';\r\n\r\n initialCommitActivities = [{\r\n timeSlot: '12:00AM',\r\n commitCount: 0\r\n },{\r\n timeSlot: '1:00AM',\r\n commitCount: 0\r\n },{\r\n timeSlot: '2:00AM',\r\n commitCount: 0\r\n },{\r\n timeSlot: '3:00AM',\r\n commitCount: 0\r\n },{\r\n timeSlot: '4:00AM',\r\n commitCount: 0\r\n },{\r\n timeSlot: '5:00AM',\r\n commitCount: 0\r\n },{\r\n timeSlot: '6:00AM',\r\n commitCount: 0\r\n },{\r\n timeSlot: '7:00AM',\r\n commitCount: 0\r\n },{\r\n timeSlot: '8:00AM',\r\n commitCount: 0\r\n },{\r\n timeSlot: '9:00AM',\r\n commitCount: 0\r\n },{\r\n timeSlot: '10:00AM',\r\n commitCount: 0\r\n },{\r\n timeSlot: '11:00AM',\r\n commitCount: 0\r\n },{\r\n timeSlot: '12:00PM',\r\n commitCount: 0\r\n },{\r\n timeSlot: '1:00PM',\r\n commitCount: 0\r\n },{\r\n timeSlot: '2:00PM',\r\n commitCount: 0\r\n },{\r\n timeSlot: '3:00PM',\r\n commitCount: 0\r\n },{\r\n timeSlot: '4:00PM',\r\n commitCount: 0\r\n },{\r\n timeSlot: '5:00PM',\r\n commitCount: 0\r\n },{\r\n timeSlot: '6:00PM',\r\n commitCount: 0\r\n },{\r\n timeSlot: '7:00PM',\r\n commitCount: 0\r\n },{\r\n timeSlot: '8:00PM',\r\n commitCount: 0\r\n },{\r\n timeSlot: '9:00PM',\r\n commitCount: 0\r\n },{\r\n timeSlot: '10:00PM',\r\n commitCount: 0\r\n },{\r\n timeSlot: '11:00PM',\r\n commitCount: 0\r\n }];\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n commitActivities: this.initialCommitActivities,\r\n commitActivitiesLookupErrorMessage: null,\r\n commitActiviesLookupErrorStack: null,\r\n commitActivitiesLookupIsInProgress: false\r\n };\r\n\r\n am4core.useTheme(am4themes_animated);\r\n }\r\n\r\n componentDidMount() {\r\n this.lookUpCommits(this.props.userLogin);\r\n }\r\n\r\n lookUpCommits(userLogin) {\r\n this.setState({\r\n commits: this.initialCommitActivities,\r\n commitActivitiesLookupErrorMessage: null,\r\n commitActivitiesLookupErrorStack: null,\r\n commitActivitiesLookupIsInProgress: true\r\n });\r\n\r\n axios.get(\r\n `https://api.github.com/users/${userLogin}/repos`, {\r\n headers: {\r\n Authorization: 'Bearer ' + this.githubPersonalAccessToken\r\n }\r\n })\r\n .then(\r\n res => {\r\n let currentCommits = [];\r\n let reposToProcess = res.data.length;\r\n\r\n res.data.map(repo => {\r\n if (this.state.commitActivitiesLookupIsInProgress) {\r\n axios.get(\r\n repo.commits_url.replace('{/sha}', ''), {\r\n headers: {\r\n Authorization: 'Bearer ' + this.githubPersonalAccessToken\r\n }\r\n }\r\n )\r\n .then(\r\n commitsRes => {\r\n commitsRes.data.map(commit => {\r\n if (commit && commit.committer && commit.committer.login === this.props.userLogin) {\r\n currentCommits.push({\r\n committer: commit.committer.login,\r\n date: new Date(commit.commit.committer.date)\r\n });\r\n }\r\n });\r\n\r\n reposToProcess--;\r\n\r\n if (reposToProcess === 0) {\r\n let currentCommitActivities = this.initialCommitActivities;\r\n\r\n currentCommits.map(commit => {\r\n currentCommitActivities[commit.date.getHours()].commitCount++;\r\n });\r\n\r\n console.dir(currentCommitActivities);\r\n\r\n this.setState({\r\n commitActivities: currentCommitActivities,\r\n commitActivitiesLookupIsInProgress: false\r\n });\r\n }\r\n },\r\n commitsErr => {\r\n this.setState({\r\n commitActivitiesLookupErrorMessage: commitsErr.message,\r\n commitActivitiesLookupErrorStack: commitsErr.stack,\r\n commitActivitiesLookupIsInProgress: false\r\n });\r\n }\r\n )\r\n }\r\n });\r\n },\r\n err => {\r\n this.setState({\r\n commitActivitiesLookupErrorMessage: err.message,\r\n commitActivitiesLookupErrorStack: err.stack,\r\n commitActivitiesLookupIsInProgress: false\r\n });\r\n });\r\n }\r\n\r\n render() {\r\n const commitActivitiesLookupIsInProgress = this.state.commitActivitiesLookupIsInProgress;\r\n\r\n const commitActivities = this.state.commitActivities;\r\n\r\n const commitActivitiesLookupErrorMessage = this.state.commitActivitiesLookupErrorMessage;\r\n const commitActivitiesLookupErrorStack = this.state.commitActivitiesLookupErrorStack;\r\n\r\n let cardContent;\r\n\r\n const cardContentToLookup = 'user commit activity information.';\r\n\r\n let displayChart = false;\r\n\r\n if (commitActivitiesLookupIsInProgress) {\r\n cardContent = User has no public commit information.
;\r\n }\r\n }\r\n\r\n return (\r\n\r\n {cardContent}\r\n \r\n
\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default CommitsActivityCard;","import React from 'react';\r\nimport axios from 'axios';\r\n\r\nimport UserLookup from './UserLookup';\r\nimport UserLookupLoading from './UserLookupLoading';\r\nimport UserLookupError from './UserLookupError';\r\nimport UserInfoCard from './UserInfoCard';\r\nimport CommitsInfoCard from './CommitsInfoCard';\r\nimport RepoLanguagesCard from './RepoLanguagesCard';\r\nimport CommitsActivityCard from './CommitsActivityCard';\r\n\r\nimport './Dashboard.css';\r\n\r\nclass Dashboard extends React.Component {\r\n githubPersonalAccessToken = '0d7a6ac0c75fa178712a5e4cd8d7667695cdb7f3';\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.handleSearch = this.handleSearch.bind(this);\r\n\r\n this.state = {\r\n userName: null,\r\n user: null,\r\n userLookupErrorMessage: null,\r\n userLookupErrorStack: null,\r\n userLookupIsInProgress: false\r\n };\r\n }\r\n\r\n handleSearch(userLogin) {\r\n this.setState({\r\n user: null,\r\n userLookupErrorMessage: null,\r\n userLookupErrorStack: null,\r\n userLookupIsInProgress: true\r\n });\r\n\r\n axios.get(\r\n `https://api.github.com/users/${userLogin}`, {\r\n headers: {\r\n Authorization: 'Bearer ' + this.githubPersonalAccessToken\r\n }\r\n })\r\n .then(\r\n res => {\r\n this.setState({\r\n user: {\r\n id: res.data.id,\r\n login: res.data.login,\r\n name: res.data.name,\r\n avatarUrl: res.data.avatar_url,\r\n numberOfRepos: res.data.public_repos,\r\n numberOfFollowers: res.data.followers,\r\n numberOfFollowing: res.data.following\r\n },\r\n userLookupIsInProgress: false\r\n });\r\n },\r\n err => {\r\n this.setState({\r\n userLookupErrorMessage: err.message,\r\n userLookupErrorStack: err.stack,\r\n userLookupIsInProgress: false\r\n })\r\n });\r\n }\r\n\r\n render() {\r\n const userLookupIsInProgress = this.state.userLookupIsInProgress;\r\n\r\n const user = this.state.user;\r\n\r\n const userLookupErrorMessage = this.state.userLookupErrorMessage;\r\n const userLookupErrorStack = this.state.userLookupErrorStack;\r\n\r\n let dashboardContent;\r\n\r\n if (userLookupIsInProgress) {\r\n dashboardContent = \r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default Dashboard;","import React from 'react';\r\n\r\nclass About extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n {dashboardContent}\r\n
\r\n The GitHub Dashboard retrieves information about a GitHub user and displays it, along with other insights about the user and their GitHub activity that GitHub itself does not necessarily provide.
\r\nThe Dashboard is written in React.js v16.12.0, and uses the GitHub API to retrieve information.
\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n