adding prev button

client/src/components/Commit.js

@@ -110,7 +110,7 @@ class CommitsGrid extends React.Component {
 					<Branches />
 					<h6>Current Branch:{this.props.branch}</h6>
 					<h3>Latest Commits</h3>
-					{this.props.isLoading ? (
+					{this.props.isLoading.load ? (
 						<div>
 							<div>
 								Fetching latest Commits of <strong>{this.props.branch} </strong>
@@ -131,14 +131,28 @@ class CommitsGrid extends React.Component {
 						</div>
 					)}
 					<div>
+						<button
+							type='button'
+							onClick={() => {
+								this.props.loadCommits(this.props.commitPage.prev);
+								console.log(`prev btn:${this.props.commitPage.prev}`);
+							}}
+							className='btn btn-primary '
+							disabled={this.props.commitPage.prev === null ? true : false}
+						>
+							<i className='fa fa-caret-left' aria-hidden='true' />
+							Previous Page{' '}
+						</button>{' '}
 						<button
 							type='button'
 							onClick={() => {
 								this.props.loadCommits(this.props.commitPage.next);
 							}}
 							className='btn btn-primary'
+							disabled={this.props.commitPage.next === null ? true : false}
 						>
-							next
+							Next Page{'	'}
+							<i className='fa fa-caret-right' aria-hidden='true' />
 						</button>
 					</div>
 				</div>
@@ -157,7 +171,9 @@ const mapStateToProps = ({ isLoading, commits, commitError, branch,commitPage })
 });
 
 const mapDispatchToProps = dispatch => ({
-	loadCommits: next => dispatch(loadCommits(next))
+	loadCommits: next => {
+		dispatch(loadCommits(next));
+	}
 });
 
 export default connect(

client/src/redux/actions/index.js

@@ -1,7 +1,8 @@
 import { COMMITS, BRANCHES, PULLS } from '../constants';
 
-const loadCommits = () => ({
+const loadCommits = newPage => ({
-	type: COMMITS.LOAD
+	type: COMMITS.LOAD,
+	newPage
 });
 
 const setCommits = commits => ({

client/src/redux/reducers/loadingReducer.js

@@ -1,16 +1,16 @@
 import { COMMITS } from '../constants';
 
-const loadingReducer = (state = false, action) => {
+const loadingReducer = (state = { newPage: null, load: false }, action) => {
 	switch (action.type) {
-	case COMMITS.LOAD:
+		case COMMITS.LOAD:
-		return true;
+			return { newPage: action.newPage, load: true };
-	case COMMITS.LOAD_SUCCESS:
+		case COMMITS.LOAD_SUCCESS:
-		return false;
+			return { ...state, load: false };
-	case COMMITS.LOAD_FAIL:
+		case COMMITS.LOAD_FAIL:
-		return false;
+			return state;
 
-	default:
+		default:
-		return state;
+			return state;
 	}
 };
 

client/src/redux/sagas/commitsSaga.js

@@ -3,13 +3,13 @@ import { COMMITS } from '../constants';
 import { fetchCommits } from '../api';
 import { setCommits, setCommitsError, setPages } from '../actions';
 export const getBranch = state => state.branch;
-export const getPage = state => parseInt(state.commitPage.next, 10);
+export const getNewPage = state => parseInt(state.isLoading.newPage, 10);
 
 function* handleCommitsLoad() {
 	try {
 		const branch = yield select(getBranch);
-		const nextPage = yield select(getPage);
+		const newPage = yield select(getNewPage);
-		const commits = yield call(fetchCommits, branch, nextPage);
+		let commits = yield call(fetchCommits, branch, newPage);
 		yield put(setCommits(commits.commits.body));
 		yield put(
 			setPages(