Added github profile information to Github.js

src/actions/index.js

@@ -1,7 +1,18 @@
 import github from '../apis/github';
 
-export const getRepos = () => async (dispatch, getState) => {
-  const response = await github.get('/users/RaspberryProgramming/repos');
+export const getUser = (username) => async (dispatch, getState) => {
+  const response = await github.get(`/users/${username}`);
+
+  console.log(response.data);
+
+  dispatch({
+    type: 'GET_USER',
+    payload: response.data,
+  })
+};
+
+export const getRepos = (username) => async (dispatch, getState) => {
+  const response = await github.get(`/users/${username}/repos`); // axios request for repositories
 
   dispatch({
     type: 'GET_REPOS',
@@ -10,6 +21,8 @@ export const getRepos = () => async (dispatch, getState) => {
 };
 
 export const updateEmailBody = (event) => async (dispatch, getState) => {
+  // Update the email body
+
   dispatch({
     type: 'UPDATE_EMAIL_BODY',
     payload: event.target.value,
@@ -17,15 +30,16 @@ export const updateEmailBody = (event) => async (dispatch, getState) => {
 };
 
 export const toggleContactModal = () => async (dispatch, getState) => {
+  // Toggle the contact modal
 
   dispatch({
     type: 'TOGGLE_CONTACT_MODAL',
   });
 };
 
-export const getRepoLanguages = (repoName) => async (dispatch, getState) => {
+export const getRepoLanguages = (username, repoName) => async (dispatch, getState) => {
 
-  const response = await github.get(`/repos/RaspberryProgramming/${repoName}/languages`); // Request languages for the repo
+  const response = await github.get(`/repos/${username}/${repoName}/languages`); // Request languages for the repo
 
   // Each repo will have it's own object with it's languages
   let payload = {};

src/components/App.js

@@ -13,7 +13,7 @@ const App = (props) => {
         <Navigation />
         <Switch>
           <Route path="/" exact component={Home} />
-          <Route path="/github" component={Github} />
+          <Route path="/github" render={(props) => <Github {...props} />} />
           <Route path="/about" component={About} />
         </Switch>
       </div>

src/components/Github.js

@@ -1,9 +1,10 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import './css/Github.css';
-import {getRepos, getRepoLanguages} from '../actions';
+import {getRepos, getUser, getRepoLanguages} from '../actions';
 import Theater from './subcomponents/Theater';
 import _ from 'lodash';
+
 class Github extends React.Component {
   /**
    * Github - github repository list of a specific user.
@@ -13,13 +14,17 @@ class Github extends React.Component {
    * Each language is requested once and listed for each repository.
    */
 
+  username = "RaspberryProgramming";
+
   componentDidMount() {
 
     document.title = "Github Repos";
 
     if (!this.props.repos) {
 
-      this.props.getRepos(); // Receive the repos at start
+      this.props.getUser(this.username); // Receive the repos at start
+      this.props.getRepos(this.username); // Receive the repos at start
+
     }
     
   }
@@ -43,37 +48,50 @@ class Github extends React.Component {
 
     if (this.props.repos) { // If the repos have been received
 
-      // Render each repo
-      const render = this.props.repos.map((repo) =>{
+      if (this.props.repos.length > 0) {
+        // Render each repo
+        const render = this.props.repos.map((repo) =>{
 
-        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:
+          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>
 
                 { 
-                  this.renderLanguages(repo.name) // Render each language for the repo
+                  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>
+              </div>
+
+              <div className="languages">
+                Languages:
+                  
+                  {
+                    this.renderLanguages(repo.name) // Render each language for the repo
+                  }
+              </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 <div className="repo-list">{render}</div>;
     }
 
     // Return nothing if repos haven't been received
 
-    return <div></div>;
+    return <div className="loading"> Loading Repositories... </div>; // Return nothing if repos haven't been collected
   }
 
   render() {
@@ -84,7 +102,7 @@ class Github extends React.Component {
       // Attempt to request languages for all repos once the list of repos is received
       this.props.repos.map((repo) => {
 
-        this.props.getRepoLanguages(repo.name);
+        this.props.getRepoLanguages(this.username, repo.name);
   
         return true;
   
@@ -96,16 +114,18 @@ class Github extends React.Component {
       <div className="Github">
 
         <Theater
-          title="Github"
-          description="This is a list of projects that I've uploaded to github. 
-            You can check them out, fork them, and maybe give them a 
-            star. Any projects that have a website will have a button 
-            that will bring you right to the site"
+          title={this.username}
+          description={
+            <div>
+              <img alt='avatar_pic' className="avatar" src={this.props.user ? this.props.user.avatar_url:''} />
+              {this.props.user ? this.props.user.bio : ''}
+            </div>
+            }
           background="/img/space.webp"
           extraClasses="peak"
         />
 
-        <div>
+        <div className="content">
           {this.renderRepos()}
         </div>
 
@@ -115,7 +135,7 @@ class Github extends React.Component {
 }
 
 const mapStateToProps = (state) => {
-  return { repos: state.github.repos, repoLanguages: state.github.repoLanguages};
+  return { repos: state.github.repos, repoLanguages: state.github.repoLanguages, user: state.github.user};
 }
 
-export default connect(mapStateToProps, { getRepos, getRepoLanguages })(Github);
+export default connect(mapStateToProps, { getRepos, getRepoLanguages, getUser })(Github);

src/components/css/Github.css

@@ -80,3 +80,18 @@
     background-color: #756B6A;
     color: #DAD4DF;
 }
+
+.content {
+    margin: 25px;
+    text-align: center;
+}
+
+.loading {
+    font-size: xxx-large;
+}
+
+.avatar {
+    border-radius: 10rem;
+    height: 10rem;
+    width: 10rem;
+}

src/reducers/githubReducer.js

@@ -4,6 +4,8 @@ let githubReducer = (state={repoLanguages: {}}, action) => {
         return { ...state, repos: action.payload };
       case 'GET_LANGUAGES':
         return {...state, repoLanguages: {...state.repoLanguages, ...action.payload}}
+      case 'GET_USER':
+        return {...state, user: action.payload};
       default:
         return state;
     }