diff --git a/src/actions/index.js b/src/actions/index.js index d5ee098..ea474b0 100644 --- a/src/actions/index.js +++ b/src/actions/index.js @@ -53,17 +53,21 @@ export const toggleContactModal = () => async (dispatch, getState) => { }; export const getRepoLanguages = (username, repoName) => async (dispatch, getState) => { + let languages = (await getState()).github.repoLanguages[repoName]; - const response = await github.get(`/repos/${username}/${repoName}/languages`); // Request languages for the repo + if (languages === undefined) { + 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 = {}; - payload[repoName] = response.data; + // Each repo will have it's own object with it's languages + let payload = {}; + payload[repoName] = response.data; - dispatch({ - type: 'GET_LANGUAGES', - payload: payload, - }); + dispatch({ + type: 'GET_LANGUAGES', + payload: payload, + }); + + } } export const setIntro = (start=true) => async (dispatch, getState) => { @@ -132,3 +136,12 @@ export const predict = (image) => async (dispatch, getState) => { return prediction; }; + +export const nextPage = () => async (dispatch, getState) => { + let page = getState().github.page; + page++; + dispatch({ + type: 'SET_PAGE', + payload: page + }); +}; \ No newline at end of file diff --git a/src/components/subcomponents/GithubRepos.js b/src/components/subcomponents/GithubRepos.js index 29aaca1..fe5441b 100644 --- a/src/components/subcomponents/GithubRepos.js +++ b/src/components/subcomponents/GithubRepos.js @@ -1,9 +1,9 @@ import React from 'react'; import { connect } from 'react-redux'; -import {getRepos, getUser, getRepoLanguages} from '../../actions'; -import _ from 'lodash'; +import {getRepos, getUser, getRepoLanguages, nextPage} from '../../actions'; class GithubRepos extends React.Component { + perPage = 5; componentDidMount() { @@ -19,6 +19,7 @@ class GithubRepos extends React.Component { } renderLanguages(name) { + this.props.getRepoLanguages(this.props.username, name); // Given that we've already received the repo's languages if (this.props.repoLanguages && this.props.repoLanguages[name]) { @@ -33,6 +34,10 @@ class GithubRepos extends React.Component { } + roundUp(num) { + return num%1 === 0? num : num-(num%1)+1 + } + renderRepos() { if (this.props.repos) { // If the repos have been received @@ -41,7 +46,9 @@ class GithubRepos extends React.Component { // Render each repo let repos = this.props.single ? [this.props.repos[0]] : this.props.repos - const render = repos.map((repo) =>{ + let pages = this.roundUp(repos.length/this.perPage); + + const render = repos.slice(0, this.props.page*this.perPage).map((repo) =>{ let updated = (new Date (repo.updated_at)).toLocaleString(); let created = (new Date (repo.created_at)).toLocaleString(); @@ -76,8 +83,16 @@ class GithubRepos extends React.Component { ); }); - - return
{render}
; // display the repo list with the rendered repos + + return ( +
+ {render} + {this.props.page < pages ? +
this.props.nextPage()}>Load More ({this.props.page}/{pages})
+ : "" + } +
+ ); // display the repo list with the rendered repos } else { @@ -92,29 +107,15 @@ class GithubRepos extends React.Component { 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.props.username, repo.name); - - return true; - - }); - - } - - return (
{this.renderRepos()}
); - } + render = () => { + return (
{this.renderRepos()}
); + } } const mapStateToProps = (state) => { - return { repos: state.github.repos, repoLanguages: state.github.repoLanguages}; + return { repos: state.github.repos, repoLanguages: state.github.repoLanguages, page: state.github.page}; } -export default connect(mapStateToProps, { getRepos, getRepoLanguages, getUser })(GithubRepos); \ No newline at end of file +export default connect(mapStateToProps, { getRepos, getRepoLanguages, getUser, nextPage})(GithubRepos); \ No newline at end of file diff --git a/src/reducers/githubReducer.js b/src/reducers/githubReducer.js index ab70dbc..e92c9c6 100644 --- a/src/reducers/githubReducer.js +++ b/src/reducers/githubReducer.js @@ -1,4 +1,4 @@ -let githubReducer = (state={repoLanguages: {}}, action) => { +let githubReducer = (state={repoLanguages: {}, page: 1}, action) => { switch(action.type) { case 'GET_REPOS': return { ...state, repos: action.payload }; @@ -6,6 +6,8 @@ let githubReducer = (state={repoLanguages: {}}, action) => { return {...state, repoLanguages: {...state.repoLanguages, ...action.payload}} case 'GET_USER': return {...state, user: action.payload}; + case 'SET_PAGE': + return {...state, page: action.payload}; default: return state; }