Skip to content

Commit 20d3172

Browse files
rwieruchrwieruch
committed
simplify fetch more abstraction
1 parent bf0c69e commit 20d3172

File tree

4 files changed

+114
-106
lines changed

4 files changed

+114
-106
lines changed

‎src/Comment/CommentList/index.js‎

Lines changed: 42 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -11,42 +11,43 @@ import FetchMore from '../../FetchMore';
1111

1212
import './style.css';
1313

14-
const doFetchMore = fetchMore => (
14+
const getConfiguration = (
1515
cursor,
16-
{ repositoryOwner, repositoryName, number },
17-
) =>
18-
fetchMore({
19-
variables: {
20-
cursor,
21-
repositoryOwner,
22-
repositoryName,
23-
number,
24-
},
25-
updateQuery: (previousResult, { fetchMoreResult }) => {
26-
if (!fetchMoreResult) {
27-
return previousResult;
28-
}
16+
repositoryOwner,
17+
repositoryName,
18+
number,
19+
) => ({
20+
variables: {
21+
cursor,
22+
repositoryOwner,
23+
repositoryName,
24+
number,
25+
},
26+
updateQuery: (previousResult, { fetchMoreResult }) => {
27+
if (!fetchMoreResult) {
28+
return previousResult;
29+
}
2930

30-
return {
31-
...previousResult,
32-
repository: {
33-
...previousResult.repository,
34-
issue: {
35-
...previousResult.repository.issue,
36-
...fetchMoreResult.repository.issue,
37-
comments: {
38-
...previousResult.repository.issue.comments,
39-
...fetchMoreResult.repository.issue.comments,
40-
edges: [
41-
...previousResult.repository.issue.comments.edges,
42-
...fetchMoreResult.repository.issue.comments.edges,
43-
],
44-
},
31+
return {
32+
...previousResult,
33+
repository: {
34+
...previousResult.repository,
35+
issue: {
36+
...previousResult.repository.issue,
37+
...fetchMoreResult.repository.issue,
38+
comments: {
39+
...previousResult.repository.issue.comments,
40+
...fetchMoreResult.repository.issue.comments,
41+
edges: [
42+
...previousResult.repository.issue.comments.edges,
43+
...fetchMoreResult.repository.issue.comments.edges,
44+
],
4545
},
4646
},
47-
};
48-
},
49-
});
47+
},
48+
};
49+
},
50+
});
5051

5152
const CommentList = ({ repositoryOwner, repositoryName, issue }) => (
5253
<Query
@@ -76,14 +77,17 @@ const CommentList = ({ repositoryOwner, repositoryName, issue }) => (
7677
))}
7778

7879
<FetchMore
79-
payload={{
80+
loading={loading}
81+
hasNextPage={
82+
repository.issue.comments.pageInfo.hasNextPage
83+
}
84+
fetchMoreConfiguration={getConfiguration(
85+
repository.issue.comments.pageInfo.endCursor,
8086
repositoryOwner,
8187
repositoryName,
82-
number: issue.number,
83-
}}
84-
loading={loading}
85-
pageInfo={repository.issue.comments.pageInfo}
86-
doFetchMore={doFetchMore(fetchMore)}
88+
issue.number,
89+
)}
90+
fetchMore={fetchMore}
8791
>
8892
Comments
8993
</FetchMore>

‎src/FetchMore/index.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,20 +6,20 @@ import { ButtonUnobtrusive } from '../Button';
66
import './style.css';
77

88
const FetchMore = ({
9-
children,
10-
payload,
119
loading,
12-
pageInfo,
13-
doFetchMore,
10+
hasNextPage,
11+
fetchMoreConfiguration,
12+
fetchMore,
13+
children,
1414
}) => (
1515
<div className="FetchMore">
1616
{loading ? (
1717
<Loading />
1818
) : (
19-
pageInfo.hasNextPage && (
19+
hasNextPage && (
2020
<ButtonUnobtrusive
2121
className="FetchMore-button"
22-
onClick={() => doFetchMore(pageInfo.endCursor, payload)}
22+
onClick={() => fetchMore(fetchMoreConfiguration)}
2323
>
2424
{`More ${children}`}
2525
</ButtonUnobtrusive>

‎src/Issue/IssueList/index.js‎

Lines changed: 37 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -57,38 +57,39 @@ const prefetchIssues = (
5757
}
5858
};
5959

60-
const doFetchMore = fetchMore => (
60+
const getConfiguration = (
6161
cursor,
62-
{ repositoryOwner, repositoryName, showState },
63-
) =>
64-
fetchMore({
65-
variables: {
66-
cursor,
67-
repositoryOwner,
68-
repositoryName,
69-
kindOfIssue: KIND_OF_ISSUES[showState],
70-
},
71-
updateQuery: (previousResult, { fetchMoreResult }) => {
72-
if (!fetchMoreResult) {
73-
return previousResult;
74-
}
75-
76-
return {
77-
...previousResult,
78-
repository: {
79-
...previousResult.repository,
80-
issues: {
81-
...previousResult.repository.issues,
82-
...fetchMoreResult.repository.issues,
83-
edges: [
84-
...previousResult.repository.issues.edges,
85-
...fetchMoreResult.repository.issues.edges,
86-
],
87-
},
62+
repositoryOwner,
63+
repositoryName,
64+
showState,
65+
) => ({
66+
variables: {
67+
cursor,
68+
repositoryOwner,
69+
repositoryName,
70+
kindOfIssue: KIND_OF_ISSUES[showState],
71+
},
72+
updateQuery: (previousResult, { fetchMoreResult }) => {
73+
if (!fetchMoreResult) {
74+
return previousResult;
75+
}
76+
77+
return {
78+
...previousResult,
79+
repository: {
80+
...previousResult.repository,
81+
issues: {
82+
...previousResult.repository.issues,
83+
...fetchMoreResult.repository.issues,
84+
edges: [
85+
...previousResult.repository.issues.edges,
86+
...fetchMoreResult.repository.issues.edges,
87+
],
8888
},
89-
};
90-
},
91-
});
89+
},
90+
};
91+
},
92+
});
9293

9394
const Issues = ({
9495
repositoryOwner,
@@ -182,14 +183,15 @@ const IssuesList = ({
182183
))}
183184

184185
<FetchMore
185-
payload={{
186+
loading={loading}
187+
hasNextPage={repository.issues.pageInfo.hasNextPage}
188+
fetchMoreConfiguration={getConfiguration(
189+
repository.issues.pageInfo.endCursor,
186190
repositoryOwner,
187191
repositoryName,
188192
showState,
189-
}}
190-
loading={loading}
191-
pageInfo={repository.issues.pageInfo}
192-
doFetchMore={doFetchMore(fetchMore)}
193+
)}
194+
fetchMore={fetchMore}
193195
>
194196
Issues
195197
</FetchMore>

‎src/Repository/RepositoryList/index.js‎

Lines changed: 29 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -7,32 +7,31 @@ import FetchMore from '../../FetchMore';
77

88
import '../style.css';
99

10-
const doFetchMore = fetchMore => (cursor, { entry }) =>
11-
fetchMore({
12-
variables: {
13-
cursor,
14-
},
15-
updateQuery: (previousResult, { fetchMoreResult }) => {
16-
if (!fetchMoreResult) {
17-
return previousResult;
18-
}
10+
const getConfiguration = (cursor, entry) => ({
11+
variables: {
12+
cursor,
13+
},
14+
updateQuery: (previousResult, { fetchMoreResult }) => {
15+
if (!fetchMoreResult) {
16+
return previousResult;
17+
}
1918

20-
return {
21-
...previousResult,
22-
[entry]: {
23-
...previousResult[entry],
24-
repositories: {
25-
...previousResult[entry].repositories,
26-
...fetchMoreResult[entry].repositories,
27-
edges: [
28-
...previousResult[entry].repositories.edges,
29-
...fetchMoreResult[entry].repositories.edges,
30-
],
31-
},
19+
return {
20+
...previousResult,
21+
[entry]: {
22+
...previousResult[entry],
23+
repositories: {
24+
...previousResult[entry].repositories,
25+
...fetchMoreResult[entry].repositories,
26+
edges: [
27+
...previousResult[entry].repositories.edges,
28+
...fetchMoreResult[entry].repositories.edges,
29+
],
3230
},
33-
};
34-
},
35-
});
31+
},
32+
};
33+
},
34+
});
3635

3736
const RepositoryList = ({
3837
entry,
@@ -53,10 +52,13 @@ const RepositoryList = ({
5352
))}
5453

5554
<FetchMore
56-
payload={{ entry }}
5755
loading={loading}
58-
pageInfo={repositories.pageInfo}
59-
doFetchMore={doFetchMore(fetchMore)}
56+
hasNextPage={repositories.pageInfo.hasNextPage}
57+
fetchMoreConfiguration={getConfiguration(
58+
repositories.pageInfo.endCursor,
59+
entry,
60+
)}
61+
fetchMore={fetchMore}
6062
>
6163
Repositories
6264
</FetchMore>

0 commit comments

Comments
 (0)