align FetchMore component with fetchMore function

Author: rwieruch

src/Comment/CommentList/index.js

@@ -11,43 +11,30 @@ import FetchMore from '../../FetchMore';
 
 import './style.css';
 
-const getConfiguration = (
-  cursor,
-  repositoryOwner,
-  repositoryName,
-  number,
-) => ({
-  variables: {
-    cursor,
-    repositoryOwner,
-    repositoryName,
-    number,
-  },
-  updateQuery: (previousResult, { fetchMoreResult }) => {
-    if (!fetchMoreResult) {
-      return previousResult;
-    }
+const updateQuery = (previousResult, { fetchMoreResult }) => {
+  if (!fetchMoreResult) {
+    return previousResult;
+  }
 
-    return {
-      ...previousResult,
-      repository: {
-        ...previousResult.repository,
-        issue: {
-          ...previousResult.repository.issue,
-          ...fetchMoreResult.repository.issue,
-          comments: {
-            ...previousResult.repository.issue.comments,
-            ...fetchMoreResult.repository.issue.comments,
-            edges: [
-              ...previousResult.repository.issue.comments.edges,
-              ...fetchMoreResult.repository.issue.comments.edges,
-            ],
-          },
+  return {
+    ...previousResult,
+    repository: {
+      ...previousResult.repository,
+      issue: {
+        ...previousResult.repository.issue,
+        ...fetchMoreResult.repository.issue,
+        comments: {
+          ...previousResult.repository.issue.comments,
+          ...fetchMoreResult.repository.issue.comments,
+          edges: [
+            ...previousResult.repository.issue.comments.edges,
+            ...fetchMoreResult.repository.issue.comments.edges,
+          ],
         },
       },
-    };
-  },
-});
+    },
+  };
+};
 
 const CommentList = ({ repositoryOwner, repositoryName, issue }) => (
   <Query
@@ -81,12 +68,13 @@ const CommentList = ({ repositoryOwner, repositoryName, issue }) => (
             hasNextPage={
               repository.issue.comments.pageInfo.hasNextPage
             }
-            fetchMoreConfiguration={getConfiguration(
-              repository.issue.comments.pageInfo.endCursor,
+            variables={{
+              cursor: repository.issue.comments.pageInfo.endCursor,
               repositoryOwner,
               repositoryName,
-              issue.number,
-            )}
+              number: issue.number,
+            }}
+            updateQuery={updateQuery}
             fetchMore={fetchMore}
           >
             Comments

src/FetchMore/index.js

@@ -8,7 +8,8 @@ import './style.css';
 const FetchMore = ({
   loading,
   hasNextPage,
-  fetchMoreConfiguration,
+  variables,
+  updateQuery,
   fetchMore,
   children,
 }) => (
@@ -19,7 +20,7 @@ const FetchMore = ({
       hasNextPage && (
         <ButtonUnobtrusive
           className="FetchMore-button"
-          onClick={() => fetchMore(fetchMoreConfiguration)}
+          onClick={() => fetchMore({ variables, updateQuery })}
         >
           {`More ${children}`}
         </ButtonUnobtrusive>

src/Issue/IssueList/index.js

@@ -57,39 +57,26 @@ const prefetchIssues = (
   }
 };
 
-const getConfiguration = (
-  cursor,
-  repositoryOwner,
-  repositoryName,
-  showState,
-) => ({
-  variables: {
-    cursor,
-    repositoryOwner,
-    repositoryName,
-    kindOfIssue: KIND_OF_ISSUES[showState],
-  },
-  updateQuery: (previousResult, { fetchMoreResult }) => {
-    if (!fetchMoreResult) {
-      return previousResult;
-    }
-
-    return {
-      ...previousResult,
-      repository: {
-        ...previousResult.repository,
-        issues: {
-          ...previousResult.repository.issues,
-          ...fetchMoreResult.repository.issues,
-          edges: [
-            ...previousResult.repository.issues.edges,
-            ...fetchMoreResult.repository.issues.edges,
-          ],
-        },
+const updateQuery = (previousResult, { fetchMoreResult }) => {
+  if (!fetchMoreResult) {
+    return previousResult;
+  }
+
+  return {
+    ...previousResult,
+    repository: {
+      ...previousResult.repository,
+      issues: {
+        ...previousResult.repository.issues,
+        ...fetchMoreResult.repository.issues,
+        edges: [
+          ...previousResult.repository.issues.edges,
+          ...fetchMoreResult.repository.issues.edges,
+        ],
       },
-    };
-  },
-});
+    },
+  };
+};
 
 const Issues = ({
   repositoryOwner,
@@ -185,12 +172,13 @@ const IssuesList = ({
           <FetchMore
             loading={loading}
             hasNextPage={repository.issues.pageInfo.hasNextPage}
-            fetchMoreConfiguration={getConfiguration(
-              repository.issues.pageInfo.endCursor,
+            variables={{
+              cursor: repository.issues.pageInfo.endCursor,
               repositoryOwner,
               repositoryName,
-              showState,
-            )}
+              kindOfIssue: KIND_OF_ISSUES[showState],
+            }}
+            updateQuery={updateQuery}
             fetchMore={fetchMore}
           >
             Issues

src/Repository/RepositoryList/index.js

@@ -7,31 +7,29 @@ import FetchMore from '../../FetchMore';
 
 import '../style.css';
 
-const getConfiguration = (cursor, entry) => ({
-  variables: {
-    cursor,
-  },
-  updateQuery: (previousResult, { fetchMoreResult }) => {
-    if (!fetchMoreResult) {
-      return previousResult;
-    }
+const getUpdateQuery = entry => (
+  previousResult,
+  { fetchMoreResult },
+) => {
+  if (!fetchMoreResult) {
+    return previousResult;
+  }
 
-    return {
-      ...previousResult,
-      [entry]: {
-        ...previousResult[entry],
-        repositories: {
-          ...previousResult[entry].repositories,
-          ...fetchMoreResult[entry].repositories,
-          edges: [
-            ...previousResult[entry].repositories.edges,
-            ...fetchMoreResult[entry].repositories.edges,
-          ],
-        },
+  return {
+    ...previousResult,
+    [entry]: {
+      ...previousResult[entry],
+      repositories: {
+        ...previousResult[entry].repositories,
+        ...fetchMoreResult[entry].repositories,
+        edges: [
+          ...previousResult[entry].repositories.edges,
+          ...fetchMoreResult[entry].repositories.edges,
+        ],
       },
-    };
-  },
-});
+    },
+  };
+};
 
 const RepositoryList = ({
   entry,
@@ -54,10 +52,10 @@ const RepositoryList = ({
     <FetchMore
       loading={loading}
       hasNextPage={repositories.pageInfo.hasNextPage}
-      fetchMoreConfiguration={getConfiguration(
-        repositories.pageInfo.endCursor,
-        entry,
-      )}
+      variables={{
+        cursor: repositories.pageInfo.endCursor,
+      }}
+      updateQuery={getUpdateQuery(entry)}
       fetchMore={fetchMore}
     >
       Repositories