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 {
+ avatar_pic + {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; }