Modularized Github page better

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 <div className="language" key={language}>{language}</div>; // 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 (
-            <div className="repo" key={repo.id}>
-
-              <a href={repo.html_url} target="_blank" rel="noreferrer" className="title">{repo.name}</a>
-
-              <div className="content">
-                <p className="description">{repo.description ? repo.description : "No Description"}</p>
-
-                { 
-                  repo.homepage ? // If the repo has a homepage, render a button
-                    <a href={repo.homepage} target="_blank" rel="noreferrer" className="website"> Project Website </a>:
-                    ""
-                }
-              </div>
-
-              <div className="languages">
-                Languages:
-                  
-                  {
-                    this.renderLanguages(repo.name) // Render each language for the repo
-                  }
-              </div>
-              <div className="times">
-                  Last Updated: {updated}
-                  <br/>
-                  Created: {created}
-              </div>
-            </div>
-            
-          );
-        });
-
-        return <div className="repo-list">{render}</div>; // display the repo list with the rendered repos
-      
-      } else {
-
-        return <div className="loading">User doesn't have any repositories</div>
-      
-      }
-
-    }
-
-    // Return nothing if repos haven't been received
-
-    return <div className="loading"> Loading Repositories... </div>; // 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 (
       <div className="Github">
 
@@ -133,7 +35,7 @@ class Github extends React.Component {
         />
 
         <div className="content">
-          {this.renderRepos()}
+          <GithubRepos username={this.username} />
         </div>
 
       </div>
@@ -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);
+export default connect(mapStateToProps, {})(Github);

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 <div className="language" key={language}>{language}</div>; // 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 (
+            <div className="repo" key={repo.id}>
+
+              <a href={repo.html_url} target="_blank" rel="noreferrer" className="title">{repo.name}</a>
+
+              <div className="content">
+                <p className="description">{repo.description ? repo.description : "No Description"}</p>
+
+                { 
+                  repo.homepage ? // If the repo has a homepage, render a button
+                    <a href={repo.homepage} target="_blank" rel="noreferrer" className="website"> Project Website </a>:
+                    ""
+                }
+              </div>
+
+              <div className="languages">
+                Languages:
+                  
+                  {
+                    this.renderLanguages(repo.name) // Render each language for the repo
+                  }
+              </div>
+              <div className="times">
+                  Last Updated: {updated}
+                  <br/>
+                  Created: {created}
+              </div>
+            </div>
+            
+          );
+        });
+
+        return <div className="repo-list">{render}</div>; // display the repo list with the rendered repos
+      
+      } else {
+
+        return <div className="loading">User doesn't have any repositories</div>
+      
+      }
+
+    }
+
+    // Return nothing if repos haven't been received
+
+    return <div className="loading"> Loading Repositories... </div>; // 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 (<div>{this.renderRepos()}</div>);
+    }
+
+}
+
+
+const mapStateToProps = (state) => {
+    return { repos: state.github.repos, repoLanguages: state.github.repoLanguages};
+}
+  
+export default connect(mapStateToProps, { getRepos, getRepoLanguages, getUser })(GithubRepos);