next button config

app.js

@@ -19,14 +19,15 @@ if (!dev) {
 
 //------- COMMITS END-POINT -------
 
-function commitReq(sha) {
+function commitReq(sha, page) {
 	var repos = {
 		uri: 'https://api.github.com/repos/reactos/reactos/commits',
 		resolveWithFullResponse: true,
 		qs: {
 			access_token: key, // -> uri + '?access_token=xxxxx%20xxxxx'
 			sha: sha,
-			per_page: 5
+			per_page: 10,
+			page: page
 		},
 		headers: {
 			'User-Agent': 'Request-Promise'
@@ -38,7 +39,7 @@ function commitReq(sha) {
 }
 
 app.get('/api/commits', (req, res) => {
-	rp(commitReq(req.query.sha))
+	rp(commitReq(req.query.sha, req.query.page))
 		.then(body => {
 			let link = body.headers.link;
 			let parsed = parse(link);

client/src/components/Branches.js

@@ -6,7 +6,12 @@ import {
 	DropdownMenu,
 	DropdownItem
 } from 'reactstrap';
-import { loadBranches, loadCommits, currBranch } from '../redux/actions';
+import {
+	loadBranches,
+	loadCommits,
+	currBranch
+	// setPages
+} from '../redux/actions';
 
 class Branches extends React.Component {
 	constructor(props) {
@@ -26,7 +31,7 @@ class Branches extends React.Component {
 			<DropdownItem
 				onClick={() => {
 					this.props.currBranch(branch.name);
-					this.props.loadCommits();
+					this.props.loadCommits(1);
 				}}
 				key={branch.name}
 			>
@@ -44,7 +49,7 @@ class Branches extends React.Component {
 		return (
 			<Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
 				<DropdownToggle caret>
-					<i className="fa fa-sitemap" />
+					<i className='fa fa-sitemap' />
 					Branches
 				</DropdownToggle>
 				<DropdownMenu
@@ -77,9 +82,10 @@ const mapStateToProps = ({ branches }) => ({
 });
 
 const mapDispatchToProps = dispatch => ({
-	loadCommits: () => dispatch(loadCommits()),
+	loadCommits: next => dispatch(loadCommits(next)),
 	loadBranches: () => dispatch(loadBranches()),
 	currBranch: branch => dispatch(currBranch(branch))
+	// setPages: commitPage => dispatch(setPages(commitPage))
 });
 
 export default connect(

client/src/components/Commit.js

@@ -17,7 +17,7 @@ class CommitsGrid extends React.Component {
 		let author = encodeURIComponent(commit.commit.author.name);
 		let committer = encodeURIComponent(commit.commit.committer.name);
 		return (
-			<div key={commit.sha}>
+			<div className='panel-margin' key={commit.sha}>
 				<Card>
 					<CardHeader className='new' type='button' id={tog}>
 						<div className='row'>
@@ -106,7 +106,7 @@ class CommitsGrid extends React.Component {
 	render() {
 		return (
 			<div>
-				<div className='container'>
+				<div className='container margin'>
 					<Branches />
 					<h6>Current Branch:{this.props.branch}</h6>
 					<h3>Latest Commits</h3>
@@ -130,21 +130,34 @@ class CommitsGrid extends React.Component {
 							Err:{this.props.commitError}
 						</div>
 					)}
+					<div>
+						<button
+							type='button'
+							onClick={() => {
+								this.props.loadCommits(this.props.commitPage.next);
+							}}
+							className='btn btn-primary'
+						>
+							next
+						</button>
+					</div>
 				</div>
 			</div>
 		);
 	}
 }
 
-const mapStateToProps = ({ isLoading, commits, commitError, branch }) => ({
+// prettier-ignore
+const mapStateToProps = ({ isLoading, commits, commitError, branch,commitPage }) => ({
 	isLoading,
 	commits,
 	commitError,
-	branch
+	branch,
+	commitPage
 });
 
 const mapDispatchToProps = dispatch => ({
-	loadCommits: () => dispatch(loadCommits())
+	loadCommits: next => dispatch(loadCommits(next))
 });
 
 export default connect(

client/src/components/styles/Commit.css

@@ -4,7 +4,12 @@
 	border-radius: 4px;
 	border: 1px solid tomato;
 }
-
+.margin {
+	margin-bottom: 5em;
+}
+.panel-margin {
+	margin-bottom: 5px;
+}
 .new {
 	background-color: white;
 }

client/src/redux/actions/index.js

@@ -14,6 +14,11 @@ const setCommitsError = error => ({
 	error
 });
 
+const setPages = (next, prev) => ({
+	type: 'PAGE_LOAD_SUCCESS',
+	next,
+	prev
+});
 const loadBranches = () => ({
 	type: BRANCHES.LOAD
 });
@@ -50,6 +55,7 @@ export {
 	loadCommits,
 	setCommits,
 	setCommitsError,
+	setPages,
 	loadBranches,
 	setBranches,
 	setBranchesError,

client/src/redux/api/index.js

@@ -1,10 +1,10 @@
-const fetchCommits = async sha => {
-	const response = await fetch(`/api/commits?sha=${sha}`);
+const fetchCommits = async (sha, page) => {
+	const response = await fetch(`/api/commits?sha=${sha}&page=${page}`);
 	const data = await response.json();
 	if (response.status >= 400) {
 		throw new Error(data.errors);
 	}
-	return data.commits.body;
+	return data;
 };
 
 const fetchBranches = async () => {

client/src/redux/reducers/commitPageReducer.js

@@ -0,0 +1,19 @@
+import { BRANCHES } from '../constants';
+const commitPageReducer = (state = { next: 1, prev: 0 }, action) => {
+	switch (action.type) {
+		case BRANCHES.CURRENT:
+			return {
+				next: 1,
+				prev: 0
+			};
+		case 'PAGE_LOAD_SUCCESS':
+			return {
+				next: action.next,
+				prev: action.prev
+			};
+		default:
+			return state;
+	}
+};
+
+export default commitPageReducer;

client/src/redux/reducers/commitsReducer.js

@@ -4,6 +4,7 @@ const commitsReducer = (state = [], action) => {
 	if (action.type === COMMITS.LOAD_SUCCESS) {
 		return [...action.commits];
 	}
+
 	return state;
 };
 

client/src/redux/reducers/index.js

@@ -6,6 +6,7 @@ import commitErrorReducer from './commitErrorReducer';
 import branchReducer from './branchReducer';
 import selectedBranchReducer from './selectedBranchReducer';
 import pullsReducer from './pullsReducer';
+import commitPageReducer from './commitPageReducer';
 
 const rootReducer = combineReducers({
 	isLoading: loadingReducer,
@@ -13,7 +14,8 @@ const rootReducer = combineReducers({
 	commitError: commitErrorReducer,
 	branches: branchReducer,
 	branch: selectedBranchReducer,
-	pulls: pullsReducer
+	pulls: pullsReducer,
+	commitPage: commitPageReducer
 });
 
 export default rootReducer;

client/src/redux/sagas/commitsSaga.js

@@ -1,14 +1,22 @@
 import { takeEvery, call, put, select } from 'redux-saga/effects';
 import { COMMITS } from '../constants';
 import { fetchCommits } from '../api';
-import { setCommits, setCommitsError } from '../actions';
+import { setCommits, setCommitsError, setPages } from '../actions';
 export const getBranch = state => state.branch;
+export const getPage = state => parseInt(state.commitPage.next, 10);
 
 function* handleCommitsLoad() {
 	try {
 		const branch = yield select(getBranch);
-		const commits = yield call(fetchCommits, branch);
-		yield put(setCommits(commits));
+		const nextPage = yield select(getPage);
+		const commits = yield call(fetchCommits, branch, nextPage);
+		yield put(setCommits(commits.commits.body));
+		yield put(
+			setPages(
+				commits.page.next !== undefined ? commits.page.next.page : null,
+				commits.page.prev !== undefined ? commits.page.prev.page : null
+			)
+		);
 	} catch (error) {
 		//dispatch error
 		yield put(setCommitsError(error.toString()));