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