Perspective view better pagination -- https://github.com/ispras/lingvodoc-react/issues/1133

src/components/LexicalEntry/index.js

@@ -128,7 +128,7 @@ class Entities extends React.Component {
   update_check() {
     /* Checking if we need to manually update perspective data. */
 
-    const { entry, client, perspectiveId, entitiesMode } = this.props;
+    const { entry, client, perspectiveId, entitiesMode, queryArgs } = this.props;
 
     const data_entities = client.readQuery({
       query: lexicalEntryQuery,
@@ -138,16 +138,15 @@ class Entities extends React.Component {
       }
     });
 
-    const data_perspective = client.readQuery({
+    const data_perspective = queryArgs
+    ? client.readQuery({
       query: queryLexicalEntries,
-      variables: {
-        id: perspectiveId,
-        entitiesMode
-      }
-    });
+      variables: queryArgs
+    })
+    : { perspective: { perspective_page: { lexical_entries: [] }}};
 
     const {
-      perspective: { lexical_entries }
+      perspective: { perspective_page: { lexical_entries } }
     } = data_perspective;
 
     const entry_id_str = id2str(entry.id);
@@ -179,15 +178,12 @@ class Entities extends React.Component {
         /* If for some reason queryLexicalEntries failed to update (e.g. when there are several thousand
          * entries and Apollo GraphQL cache glitches), we update it manually. */
 
-        if (change_flag) {
+        if (change_flag && queryArgs) {
           lexical_entry.entities = data_entities.lexicalentry.entities;
 
           client.writeQuery({
             query: queryLexicalEntries,
-            variables: {
-              id: perspectiveId,
-              entitiesMode
-            },
+            variables: queryArgs,
             data: data_perspective
           });
         }
@@ -481,11 +477,13 @@ Entities.propTypes = {
   resetCheckedRow: PropTypes.func,
   resetCheckedColumn: PropTypes.func,
   resetCheckedAll: PropTypes.func,
-  reRender: PropTypes.func
+  reRender: PropTypes.func,
+  queryArgs: PropTypes.object
 };
 
 Entities.defaultProps = {
-  parentEntity: null
+  parentEntity: null,
+  queryArgs: null
 };
 
 export default compose(

src/components/LexicalEntryByIds/component.js

@@ -144,7 +144,7 @@ class Perspective extends PureComponent {
           mode={mode}
           id={id}
           entriesIds={entriesIds}
-          filter={perspective.filter}
+          filter={perspective.filter.value}
           submitFilter={submitFilter}
           toggleMode={this.toggleMode}
         />
@@ -154,7 +154,7 @@ class Perspective extends PureComponent {
           entitiesMode={entitiesMode}
           entriesIds={entriesIds}
           page={page}
-          filter={perspective.filter}
+          filter={perspective.filter.value}
           className="content"
           changePage={this.changePage}
         />

src/components/Merge/Settings.js

@@ -99,7 +99,7 @@ class MergeSettings extends React.Component {
 
     const {
       dataLexicalEntries: {
-        perspective: { lexical_entries: entries }
+        perspective: { perspective_page: { lexical_entries: entries }}
       }
     } = this.props;
 

src/components/PerspectiveView/Cell.js

@@ -24,7 +24,8 @@ const Cell = ({
   mode,
   entitiesMode,
   disabled,
-  reRender
+  reRender,
+  queryArgs
   // eslint-disable-next-line arrow-body-style
 }) => {
   return (
@@ -46,6 +47,7 @@ const Cell = ({
         entitiesMode={entitiesMode}
         disabled={disabled}
         reRender={reRender}
+        queryArgs={queryArgs}
       />
     </Table.Cell>
   );
@@ -66,11 +68,13 @@ Cell.propTypes = {
   resetCheckedRow: PropTypes.func,
   resetCheckedColumn: PropTypes.func,
   resetCheckedAll: PropTypes.func,
-  reRender: PropTypes.func
+  reRender: PropTypes.func,
+  queryArgs: PropTypes.object
 };
 
 Cell.defaultProps = {
-  disabled: undefined
+  disabled: undefined,
+  queryArgs: null
 };
 
 export default onlyUpdateForKeys([
@@ -81,5 +85,6 @@ export default onlyUpdateForKeys([
   "column",
   "checkedRow",
   "checkedColumn",
-  "checkedAll"
+  "checkedAll",
+  "queryArgs"
 ])(Cell);

src/components/PerspectiveView/Row.js

@@ -29,6 +29,7 @@ const Row = ({
   resetCheckedColumn,
   resetCheckedAll,
   reRender,
+  queryArgs,
   /* eslint-disable react/prop-types */
   showEntryId,
   selectDisabled,
@@ -97,6 +98,7 @@ const Row = ({
           entitiesMode={entitiesMode}
           disabled={disabled_flag}
           reRender={reRender}
+          queryArgs={queryArgs}
         />
       ))}
 
@@ -149,7 +151,8 @@ Row.propTypes = {
   resetCheckedRow: PropTypes.func,
   resetCheckedColumn: PropTypes.func,
   resetCheckedAll: PropTypes.func,
-  reRender: PropTypes.func
+  reRender: PropTypes.func,
+  queryArgs: PropTypes.object
 };
 
 Row.defaultProps = {
@@ -166,7 +169,8 @@ Row.defaultProps = {
   resetCheckedRow: () => {},
   resetCheckedColumn: () => {},
   resetCheckedAll: () => {},
-  reRender: () => console.debug('Fake refetch')
+  reRender: () => console.debug('Fake refetch'),
+  queryArgs: null
 };
 
 export default onlyUpdateForKeys([
@@ -178,5 +182,6 @@ export default onlyUpdateForKeys([
   "checkedRow",
   "checkedColumn",
   "checkedAll",
-  "columns"
+  "columns",
+  "queryArgs"
 ])(Row);

src/components/PerspectiveView/TableBody.js

@@ -32,7 +32,8 @@ TableBody.propTypes = {
   resetCheckedRow: PropTypes.func,
   resetCheckedColumn: PropTypes.func,
   resetCheckedAll: PropTypes.func,
-  reRender: PropTypes.func
+  reRender: PropTypes.func,
+  queryArgs: PropTypes.object
 };
 
 TableBody.defaultProps = {
@@ -49,7 +50,8 @@ TableBody.defaultProps = {
   resetCheckedRow: () => {},
   resetCheckedColumn: () => {},
   resetCheckedAll: () => {},
-  reRender: () => console.log('Fake refetch')
+  reRender: () => console.log('Fake refetch'),
+  queryArgs: null
 };
 
 export default onlyUpdateForKeys([
@@ -60,5 +62,6 @@ export default onlyUpdateForKeys([
   "selectedRows",
   "checkedRow",
   "checkedColumn",
-  "checkedAll"
+  "checkedAll",
+  "queryArgs"
 ])(TableBody);