From 4c63b97bd6eeaf7ea25f215f295921d77537c658 Mon Sep 17 00:00:00 2001 From: Camerin Date: Sat, 8 Jan 2022 13:08:15 -0500 Subject: [PATCH] Modularized Github page better --- src/components/Github.js | 110 +----------------- src/components/subcomponents/GithubRepos.js | 117 ++++++++++++++++++++ 2 files changed, 123 insertions(+), 104 deletions(-) create mode 100644 src/components/subcomponents/GithubRepos.js diff --git a/src/components/Github.js b/src/components/Github.js index aa33e0d..4139547 100644 --- a/src/components/Github.js +++ b/src/components/Github.js @@ -1,9 +1,9 @@ import React from 'react'; import { connect } from 'react-redux'; import './css/Github.css'; -import {getRepos, getUser, getRepoLanguages} from '../actions'; import Theater from './subcomponents/Theater'; -import _ from 'lodash'; +import GithubRepos from './subcomponents/GithubRepos'; + class Github extends React.Component { /** @@ -16,107 +16,9 @@ class Github extends React.Component { username = "RaspberryProgramming"; - componentDidMount() { - - document.title = "Github Repos"; - - if (!this.props.repos) { - - this.props.getUser(this.username); // Receive the repos at start - this.props.getRepos(this.username); // Receive the repos at start - - } - - } - - renderLanguages(name) { - - // Given that we've already received the repo's languages - if (this.props.repoLanguages && this.props.repoLanguages[name]) { - - // Create a bubble for each language - return Object.keys(this.props.repoLanguages[name]).map(language=>{ - - return
{language}
; // Language bubble JSX - - }); - } - - } - - renderRepos() { - - if (this.props.repos) { // If the repos have been received - - if (this.props.repos.length > 0) { - // Render each repo - const render = this.props.repos.map((repo) =>{ - let updated = (new Date (repo.updated_at)).toLocaleString(); - let created = (new Date (repo.created_at)).toLocaleString(); - - return ( -
- - {repo.name} - -
-

{repo.description ? repo.description : "No Description"}

- - { - repo.homepage ? // If the repo has a homepage, render a button - Project Website : - "" - } -
- -
- Languages: - - { - this.renderLanguages(repo.name) // Render each language for the repo - } -
-
- Last Updated: {updated} -
- Created: {created} -
-
- - ); - }); - - return
{render}
; // display the repo list with the rendered repos - - } else { - - return
User doesn't have any repositories
- - } - - } - - // Return nothing if repos haven't been received - - return
Loading Repositories...
; // Return nothing if repos haven't been collected - } + render() { - - if (_.isEmpty(this.props.repoLanguages) && this.props.repos) { - - - // Attempt to request languages for all repos once the list of repos is received - this.props.repos.map((repo) => { - - this.props.getRepoLanguages(this.username, repo.name); - - return true; - - }); - - } - return (
@@ -133,7 +35,7 @@ class Github extends React.Component { />
- {this.renderRepos()} +
@@ -142,7 +44,7 @@ class Github extends React.Component { } const mapStateToProps = (state) => { - return { repos: state.github.repos, repoLanguages: state.github.repoLanguages, user: state.github.user}; + return {user: state.github.user}; } -export default connect(mapStateToProps, { getRepos, getRepoLanguages, getUser })(Github); \ No newline at end of file +export default connect(mapStateToProps, {})(Github); \ No newline at end of file diff --git a/src/components/subcomponents/GithubRepos.js b/src/components/subcomponents/GithubRepos.js new file mode 100644 index 0000000..4b7d341 --- /dev/null +++ b/src/components/subcomponents/GithubRepos.js @@ -0,0 +1,117 @@ +import React from 'react'; +import { connect } from 'react-redux'; +import {getRepos, getUser, getRepoLanguages} from '../../actions'; +import _ from 'lodash'; + +class GithubRepos extends React.Component { + + componentDidMount() { + + document.title = "Github Repos"; + + if (!this.props.repos) { + + this.props.getUser(this.props.username); // Receive the repos at start + this.props.getRepos(this.props.username); // Receive the repos at start + + } + + } + + renderLanguages(name) { + + // Given that we've already received the repo's languages + if (this.props.repoLanguages && this.props.repoLanguages[name]) { + + // Create a bubble for each language + return Object.keys(this.props.repoLanguages[name]).map(language=>{ + + return
{language}
; // Language bubble JSX + + }); + } + + } + + renderRepos() { + + if (this.props.repos) { // If the repos have been received + + if (this.props.repos.length > 0) { + // Render each repo + const render = this.props.repos.map((repo) =>{ + let updated = (new Date (repo.updated_at)).toLocaleString(); + let created = (new Date (repo.created_at)).toLocaleString(); + + return ( +
+ + {repo.name} + +
+

{repo.description ? repo.description : "No Description"}

+ + { + repo.homepage ? // If the repo has a homepage, render a button + Project Website : + "" + } +
+ +
+ Languages: + + { + this.renderLanguages(repo.name) // Render each language for the repo + } +
+
+ Last Updated: {updated} +
+ Created: {created} +
+
+ + ); + }); + + return
{render}
; // display the repo list with the rendered repos + + } else { + + return
User doesn't have any repositories
+ + } + + } + + // Return nothing if repos haven't been received + + return
Loading Repositories...
; // Return nothing if repos haven't been collected + } + + render() { + if (_.isEmpty(this.props.repoLanguages) && this.props.repos) { + + + // Attempt to request languages for all repos once the list of repos is received + this.props.repos.map((repo) => { + + this.props.getRepoLanguages(this.username, repo.name); + + return true; + + }); + + } + return (
{this.renderRepos()}
); + } + +} + + +const mapStateToProps = (state) => { + return { repos: state.github.repos, repoLanguages: state.github.repoLanguages}; +} + +export default connect(mapStateToProps, { getRepos, getRepoLanguages, getUser })(GithubRepos); \ No newline at end of file