fix(app-page-builder): fix Broken sort settings field for List of Pag…

…es (#1997) * fix(app-page-builder): starting point to fix #1994 `Broken sort settings field for List of Pages` * fix(app-page-builder): implement pagination for `list of pages`
webiny · Nov 5, 2021 · 61225b3 · 61225b3
1 parent b09fb30
commit 61225b3
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 32 deletions.
diff --git a/packages/app-page-builder/src/editor/plugins/elements/pagesList/PagesList.tsx b/packages/app-page-builder/src/editor/plugins/elements/pagesList/PagesList.tsx
@@ -15,7 +15,8 @@ const PagesList = props => {
     );
     const pageList = components.find(cmp => cmp.componentName === component);
     const { theme } = usePageBuilder();
-    const [page, setPage] = useState(1);
+    const [cursors, setCursors] = useState([null]);
+    const [page, setPage] = useState(0);
     const pageAtomValue = useRecoilValue(pageAtom);
 
     if (!pageList) {
@@ -26,7 +27,7 @@ const PagesList = props => {
 
     let sort = null;
     if (vars.sortBy && vars.sortDirection) {
-        sort = { [vars.sortBy]: vars.sortDirection };
+        sort = `${vars.sortBy}_${vars.sortDirection.toUpperCase()}`;
     }
 
     const variables = {
@@ -39,7 +40,7 @@ const PagesList = props => {
             }
         },
         limit: parseInt(vars.resultsPerPage),
-        page,
+        after: cursors[page],
         exclude: [pageAtomValue.path]
     };
 
@@ -65,13 +66,18 @@ const PagesList = props => {
     const listPublishedPages = get(data, "pageBuilder.listPublishedPages");
 
     let prevPage = null;
-    if (listPublishedPages.meta.previousPage) {
-        prevPage = () => setPage(listPublishedPages.meta.previousPage);
+    if (page >= 1) {
+        prevPage = () => {
+            setPage(page => page - 1);
+        };
     }
 
     let nextPage = null;
-    if (listPublishedPages.meta.nextPage) {
-        nextPage = () => setPage(listPublishedPages.meta.nextPage);
+    if (listPublishedPages.meta.cursor) {
+        nextPage = () => {
+            setCursors(cursors => [...cursors, listPublishedPages.meta.cursor]);
+            setPage(page => page + 1);
+        };
     }
 
     return (

diff --git a/packages/app-page-builder/src/editor/plugins/elements/pagesList/graphql.ts b/packages/app-page-builder/src/editor/plugins/elements/pagesList/graphql.ts
@@ -3,18 +3,18 @@ import gql from "graphql-tag";
 export const LIST_PUBLISHED_PAGES = gql`
     query ListPublishedPages(
         $where: PbListPublishedPagesWhereInput
-        $sort: PbListPagesSortInput
         $limit: Int
-        $page: Int
+        $sort: [PbListPagesSort!]
+        $after: String
         $exclude: [String]
     ) {
         pageBuilder {
             listPublishedPages(
                 where: $where
                 sort: $sort
                 limit: $limit
-                page: $page
                 exclude: $exclude
+                after: $after
             ) {
                 data {
                     id
@@ -39,13 +39,9 @@ export const LIST_PUBLISHED_PAGES = gql`
                     }
                 }
                 meta {
-                    from
-                    to
-                    page
-                    nextPage
-                    previousPage
                     totalCount
-                    totalPages
+                    cursor
+                    hasMoreItems
                 }
             }
         }

diff --git a/packages/app-page-builder/src/render/plugins/elements/pagesList/PagesList.tsx b/packages/app-page-builder/src/render/plugins/elements/pagesList/PagesList.tsx
@@ -29,7 +29,8 @@ const PagesListRender = props => {
     );
     const pageList = components.find(cmp => cmp.componentName === component);
     const { theme } = usePageBuilder();
-    const [page, setPage] = useState(1);
+    const [cursors, setCursors] = useState([null]);
+    const [page, setPage] = useState(0);
     const { location } = useRouter();
 
     // Extract page id from URL.
@@ -47,7 +48,7 @@ const PagesListRender = props => {
 
     let sort = null;
     if (vars.sortBy && vars.sortDirection) {
-        sort = { [vars.sortBy]: vars.sortDirection };
+        sort = `${vars.sortBy}_${vars.sortDirection.toUpperCase()}`;
     }
 
     // Lets ensure the trailing "/" is removed.
@@ -63,7 +64,7 @@ const PagesListRender = props => {
             }
         },
         limit: parseInt(vars.resultsPerPage),
-        page,
+        after: cursors[page],
         /**
          * When rendering page preview inside admin app there will be no page path/slug present in URL.
          * In that case we'll use the extracted page id from URL.
@@ -92,13 +93,18 @@ const PagesListRender = props => {
     const listPublishedPages = get(data, "pageBuilder.listPublishedPages");
 
     let prevPage = null;
-    if (listPublishedPages.meta.previousPage) {
-        prevPage = () => setPage(listPublishedPages.meta.previousPage);
+    if (page >= 1) {
+        prevPage = () => {
+            setPage(page => page - 1);
+        };
     }
 
     let nextPage = null;
-    if (listPublishedPages.meta.nextPage) {
-        nextPage = () => setPage(listPublishedPages.meta.nextPage);
+    if (listPublishedPages.meta.cursor) {
+        nextPage = () => {
+            setCursors(cursors => [...cursors, listPublishedPages.meta.cursor]);
+            setPage(page => page + 1);
+        };
     }
 
     return (

diff --git a/packages/app-page-builder/src/render/plugins/elements/pagesList/graphql.ts b/packages/app-page-builder/src/render/plugins/elements/pagesList/graphql.ts
@@ -3,18 +3,18 @@ import gql from "graphql-tag";
 export const LIST_PUBLISHED_PAGES = gql`
     query ListPublishedPages(
         $where: PbListPublishedPagesWhereInput
-        $sort: PbListPagesSortInput
         $limit: Int
-        $page: Int
+        $sort: [PbListPagesSort!]
+        $after: String
         $exclude: [String]
     ) {
         pageBuilder {
             listPublishedPages(
                 where: $where
                 sort: $sort
                 limit: $limit
-                page: $page
                 exclude: $exclude
+                after: $after
             ) {
                 data {
                     id
@@ -39,13 +39,9 @@ export const LIST_PUBLISHED_PAGES = gql`
                     }
                 }
                 meta {
-                    from
-                    to
-                    page
-                    nextPage
-                    previousPage
                     totalCount
-                    totalPages
+                    cursor
+                    hasMoreItems
                 }
             }
         }