diff --git a/src/actions/index.js b/src/actions/index.js
index f866607..a651d41 100644
--- a/src/actions/index.js
+++ b/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 = {};
diff --git a/src/components/App.js b/src/components/App.js
index a2e9496..60b8fca 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -13,7 +13,7 @@ const App = (props) => {
-
+ } />
diff --git a/src/components/Github.js b/src/components/Github.js
index 0f4ac14..15abaaf 100644
--- a/src/components/Github.js
+++ b/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 (
-
-
{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
+ 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
+ }
+
-
-
- );
- });
- return
{render}
;
+
+ );
+ });
+
+ 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
;
+ return
Loading Repositories...
; // 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 {
+
+ {this.props.user ? this.props.user.bio : ''}
+
+ }
background="/img/space.webp"
extraClasses="peak"
/>
-
+
{this.renderRepos()}
@@ -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);
\ No newline at end of file
+export default connect(mapStateToProps, { getRepos, getRepoLanguages, getUser })(Github);
\ No newline at end of file
diff --git a/src/components/css/Github.css b/src/components/css/Github.css
index a90ac4e..9ddd34a 100644
--- a/src/components/css/Github.css
+++ b/src/components/css/Github.css
@@ -79,4 +79,19 @@
border-radius: 10px;
background-color: #756B6A;
color: #DAD4DF;
+}
+
+.content {
+ margin: 25px;
+ text-align: center;
+}
+
+.loading {
+ font-size: xxx-large;
+}
+
+.avatar {
+ border-radius: 10rem;
+ height: 10rem;
+ width: 10rem;
}
\ No newline at end of file
diff --git a/src/reducers/githubReducer.js b/src/reducers/githubReducer.js
index 36653a4..ab70dbc 100644
--- a/src/reducers/githubReducer.js
+++ b/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;
}