Skip to content

Commit d8514f6

Browse files
aayushis12aayushis12
committed
pagination for comments
1 parent c465178 commit d8514f6

File tree

6 files changed

+107
-20
lines changed

6 files changed

+107
-20
lines changed

‎src/api/index.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,8 @@ export const v3 = {
8383
performDeleteRequest: async(url, accessToken) => {
8484
const response = await v3.call(url, v3.parameters(accessToken, METHOD.DELETE));
8585

86+
console.log('from api----------', response);
87+
8688
return response.status;
8789
},
8890
};
@@ -120,7 +122,7 @@ export const requestPublicGists = async(accessToken, pageNo) => await v3.getJson
120122

121123
export const fetchFileContent = async(accessToken, fileContentUrl) => await v3.getRaw(fileContentUrl, accessToken);
122124

123-
export const requestGistComments = async(accessToken, gistId) => await v3.getJsonWithHeader(`/gists/${gistId}/comments`, accessToken);
125+
export const requestGistComments = async(accessToken, gistId, pageNo) => await v3.getJsonWithHeader(`/gists/${gistId}/comments?page=${pageNo}`, accessToken);
124126

125127
export const requestStarGist = async(accessToken, gistId) => v3.getDataFromPutRequest(`/gists/${gistId}/star`, accessToken);
126128

‎src/gists/gists.reducer.js

+17-3
Original file line numberDiff line numberDiff line change
@@ -42,16 +42,29 @@ const clearCache = () => ({
4242
gists: [],
4343
hasMoreData: true,
4444
nextPageNo: 1,
45+
comments: [],
4546
});
4647

4748
const setGistComments = (state, { payload }) => {
48-
const { data, error } = payload;
49+
const { data, error, links } = payload;
50+
51+
const isLinkAvailable = links && links.next;
52+
let newComments = data;
53+
54+
console.log('isLinkAvailable', links, !!isLinkAvailable, 'nextPageno', state.nextPageNo);
55+
if (state.nextPageNo > 1) {
56+
newComments = array.concat(state.comments, data);
57+
}
58+
console.log('data******************', data, newComments);
4959

5060
return {
5161
...state,
5262
inProgress: false,
63+
linkToNextPage: isLinkAvailable ? links.next.url : '',
64+
hasMoreComments: !!isLinkAvailable,
65+
nextPageNo: isLinkAvailable ? links.next.page : state.nextPageNo,
66+
comments: newComments,
5367
error,
54-
comments: data,
5568
};
5669
};
5770

@@ -95,9 +108,10 @@ export default {
95108
[fetchGistComments.progressType]: setInProgressState,
96109
[fetchGistComments.successType]: setGistComments,
97110
[fetchGistComments.errorType]: setError,
111+
CLEAR_CACHE: clearCache,
98112
},
99113
{
100-
comments: [], inProgress: false, // hasMoreComments: true,
114+
comments: [], inProgress: false, hasMoreComments: true, nextPageNo: 1,
101115
}
102116
),
103117
initialFavoriteValue: createReducer({

‎src/gists/gists.saga.js

+19-6
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import {
2121
requestDeleteComment,
2222
requestAddComment,
2323
} from '../api';
24+
import { clearCache } from '../../src/cache/cache.actionType';
2425

2526
const tokenSelector = state => state.auth.access_token;
2627
const userNameSelector = state => state.loggedInUser.userName;
@@ -79,13 +80,23 @@ function* fetchPublicGists() {
7980

8081
function* fetchCommentsForGist(action) {
8182
try {
82-
yield put(fetchGistComments.progress());
83-
const token = yield select(tokenSelector);
84-
const { data } = yield call(requestGistComments, token, action.payload);
83+
const moreDataAvailabe = yield select(state => state.gistComments.hasMoreComments);
8584

86-
yield put(fetchGistComments.success({ data }));
85+
// yield call(clearCache);
86+
console.log('here');
87+
// console.o;
88+
// if (moreDataAvailabe) {
89+
yield put(fetchGistComments.progress());
90+
// const token = yield select(tokenSelector);
91+
const requestData = yield all([select(tokenSelector), select(state => state.gistComments.nextPageNo)]);
92+
const { data, headers } = yield call(requestGistComments, requestData[0], action.payload, requestData[1]);
93+
const links = headerparser(headers.link);
94+
95+
console.log('linkssssssssssssssssssssssssssssssssssssss', links);
96+
yield put(fetchGistComments.success({ data, links }));
97+
// }
8798
} catch (err) {
88-
console.log(err);
99+
console.log('comments fetch', err);
89100
yield put(publicGistsFetch.error(err));
90101
}
91102
}
@@ -126,10 +137,12 @@ function* deleteAComment(action) {
126137
const comments = yield select(commentsSelector);
127138
const data = comments.filter(comment => comment.id !== commentId);
128139

140+
console.log('status-------------------------------------------', data);
141+
// yield call(fetchCommentsForGist, { payload: gistId });
129142
yield put(fetchGistComments.success({ data }));
130143
}
131144
} catch (err) {
132-
console.log(err);
145+
console.log('comments delete', err);
133146
}
134147
}
135148

‎src/gists/screens/components/GistContent.js

+1
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,7 @@ class GistListContent extends React.Component {
7272

7373
const toAppendData = hasMoreData ? getGistItem('preloader') : getGistItem('noData');
7474

75+
console.log('toAppendData', toAppendData);
7576
const uniqGists = uniqBy(concat(gistList, toAppendData), ({ id }) => (id));
7677

7778
return (

‎src/gists/screens/gistComments.screen.js

+66-10
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React from 'react';
2+
import PropTypes from 'prop-types';
23
import { connect } from 'react-redux';
34
import {
45
FlatList,
@@ -12,6 +13,8 @@ import {
1213
import styled from 'styled-components';
1314
import CardView from 'react-native-cardview';
1415
import TimeAgo from 'time-ago';
16+
import concat from 'lodash/concat';
17+
import uniqBy from 'lodash/uniqBy';
1518
import { fetchGistComments, deleteComment, addComment } from '../gists.actiontype';
1619
import ListEmptyComponent from './components/EmptyListComponent';
1720
import { colors } from '../../config';
@@ -75,6 +78,16 @@ const ActivityIndicatorContainer = styled.View`
7578
justify-content: center;
7679
align-items: center;
7780
`;
81+
// padding: 20;
82+
const EndOfViewStyle = styled.View`
83+
flex: 1;
84+
justify-content: center;
85+
align-items: center;
86+
margin-bottom: 20;
87+
margin-top: 20;
88+
`;
89+
90+
const getGistComments = item => ({ type: item, id: item });
7891

7992
class GistCommentsScreen extends React.Component {
8093
constructor() {
@@ -121,7 +134,31 @@ class GistCommentsScreen extends React.Component {
121134
});
122135
}
123136

137+
handleOnEndReached = () => {
138+
this.props.fetchComments(this.props.navigation.getParam('gistData').id);
139+
}
140+
124141
renderItem = ({ item }) => {
142+
console.log('item type=============', item.type);
143+
switch (item.type) {
144+
case 'preloader':
145+
return (
146+
<EndOfViewStyle>
147+
<ActivityIndicator
148+
size="large"
149+
color="#33B5E5"
150+
/>
151+
</EndOfViewStyle>
152+
);
153+
case 'noData':
154+
return (
155+
<EndOfViewStyle>
156+
<ListEmptyComponent
157+
message="No more comments found for this gist"
158+
/>
159+
</EndOfViewStyle>
160+
);
161+
default:
125162
return (
126163
<TouchableOpacity
127164
style={{ flex: 1 }}
@@ -141,28 +178,36 @@ class GistCommentsScreen extends React.Component {
141178
<Comment>{item.body}</Comment>
142179
</CardContainer>
143180
</TouchableOpacity>
144-
);
181+
);
182+
}
145183
}
146184

147185
render() {
148-
const { comments, inProgress } = this.props;
186+
const { inProgress, hasMoreComments, comments } = this.props;
149187

150-
if (inProgress) {
151-
return (
152-
<ActivityIndicatorContainer>
153-
<ActivityIndicator size="large" color="#33B5E5" />
154-
</ActivityIndicatorContainer>
155-
);
156-
}
188+
console.log('hasMoreComments', hasMoreComments);
189+
const toAppendData = hasMoreComments ? getGistComments('preloader') : getGistComments('noData');
190+
191+
const uniqComments = uniqBy(concat(comments, toAppendData), ({ id }) => (id));
192+
193+
// if (inProgress) {
194+
// return (
195+
// <ActivityIndicatorContainer>
196+
// <ActivityIndicator size="large" color="#33B5E5" />
197+
// </ActivityIndicatorContainer>
198+
// );
199+
// }
157200

158201
return (
159202
<React.Fragment>
160203
<FlatList
161204
style={{ marginBottom: '11%', flexGrow: 1 }}
162205
keyExtractor={item => item.id}
163-
data={this.props.comments}
206+
data={uniqComments}
164207
renderItem={this.renderItem}
165208
ListEmptyComponent={() => <ListEmptyComponent message="No comments found" />}
209+
onEndReachedThreshold={0.01}
210+
onEndReached={this.handleOnEndReached}
166211
extraData={this.props}
167212
/>
168213
<InputContainer>
@@ -199,6 +244,17 @@ const mapStateToProps = ({ gistComments, loggedInUser }) => ({
199244
comments: gistComments.comments,
200245
currentUserId: loggedInUser.userId,
201246
inProgress: gistComments.inProgress,
247+
hasMoreComments: gistComments.hasMoreComments,
202248
});
203249

250+
GistCommentsScreen.propTypes = {
251+
// comments: PropTypes.arrayOf(React.PropTypes.object).isRequired,
252+
inProgress: PropTypes.bool.isRequired,
253+
fetchComments: PropTypes.func.isRequired,
254+
addThisComment: PropTypes.func.isRequired,
255+
deleteThisComment: PropTypes.func.isRequired,
256+
currentUserId: PropTypes.number.isRequired,
257+
// navigation: PropTypes.object.isRequired,
258+
};
259+
204260
export default connect(mapStateToProps, mapDispatchToProps)(GistCommentsScreen);

‎src/root.store.js

+1
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ const getEnhancers = () => {
2828
const persistConfig = {
2929
key: 'root',
3030
storage: AsyncStorage,
31+
// blacklist: ['gistReducer'],
3132
};
3233

3334
export default async() => {

0 commit comments

Comments
 (0)