Category RootComponent Simple Re-Factor

packages/peregrine/src/hooks/usePagination.js

@@ -0,0 +1,14 @@
+import { useMemo, useState } from 'react';
+
+export const usePagination = () => {
+    const [currentPage, setCurrentPage] = useState(0);
+    const [totalPages, setTotalPages] = useState(null);
+
+    const paginationState = { currentPage, totalPages };
+    const api = useMemo(() => ({ setCurrentPage, setTotalPages }), [
+        setCurrentPage,
+        setTotalPages
+    ]);
+
+    return [paginationState, api];
+};

packages/peregrine/src/index.js

@@ -5,6 +5,7 @@ import * as Util from './util';
 export { useApolloContext } from './hooks/useApolloContext';
 export { useEventListener } from './hooks/useEventListener';
 export { useDropdown } from './hooks/useDropdown';
+export { usePagination } from './hooks/usePagination';
 export { useQuery } from './hooks/useQuery';
 export { useQueryResult } from './hooks/useQueryResult';
 export { useSearchParam } from './hooks/useSearchParam';

packages/venia-concept/src/RootComponents/Category/category.js

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import { string, number, shape } from 'prop-types';
-import { useQuery } from '@magento/peregrine';
+import { usePagination, useQuery } from '@magento/peregrine';
 
 import { mergeClasses } from 'src/classify';
 import categoryQuery from 'src/queries/getCategory.graphql';
@@ -9,20 +9,17 @@ import { loadingIndicator } from 'src/components/LoadingIndicator';
 import defaultClasses from './category.css';
 
 const Category = props => {
-    const {
-        id,
-        currentPage,
-        pageSize,
-        prevPageTotal,
-        setCurrentPage,
-        setPrevPageTotal
-    } = props;
+    const { id, pageSize } = props;
+
+    const [paginationValues, paginationApi] = usePagination();
+    const { currentPage, totalPages } = paginationValues;
+    const { setCurrentPage, setTotalPages } = paginationApi;
 
     const pageControl = {
-        currentPage: currentPage,
+        currentPage,
         setPage: setCurrentPage,
-        updateTotalPages: setPrevPageTotal,
-        totalPages: prevPageTotal
+        updateTotalPages: setTotalPages,
+        totalPages
     };
 
     const [queryResult, queryApi] = useQuery(categoryQuery);
@@ -40,7 +37,7 @@ const Category = props => {
                 currentPage: Number(currentPage)
             }
         });
-    }, [id, pageSize, currentPage, runQuery, setLoading]);
+    }, [id, pageSize, currentPage]);
 
     useEffect(() => {
         window.scrollTo({
@@ -50,30 +47,21 @@ const Category = props => {
         });
     }, [currentPage]);
 
-    if (error) return <div>Data Fetch Error</div>;
-    // If our pagination component has mounted, then we have
-    // a total page count in the store, so we continue to render
-    // with our last known total
-    if (loading || !data)
-        return pageControl.totalPages ? (
-            <CategoryContent pageControl={pageControl} pageSize={pageSize} />
-        ) : (
-            loadingIndicator
-        );
+    useEffect(() => {
+        if (data) {
+            setTotalPages(data.category.products.page_info.total_pages);
+        }
+    }, [data]);
 
-    // TODO: Retrieve the page total from GraphQL when ready
-    const pageCount = data.category.products.total_count / pageSize;
-    const totalPages = Math.ceil(pageCount);
-    const totalWrapper = {
-        ...pageControl,
-        totalPages: totalPages
-    };
+    if (error) return <div>Data Fetch Error</div>;
+    if (loading && !totalPages) return loadingIndicator;
 
+    // if our data is still loading, we want to reset our data state to null
     return (
         <CategoryContent
             classes={classes}
-            pageControl={totalWrapper}
-            data={data}
+            pageControl={pageControl}
+            data={loading ? null : data}
         />
     );
 };
@@ -85,13 +73,12 @@ Category.propTypes = {
         root: string,
         title: string
     }),
-    currentPage: number,
-    pageSize: number,
-    prevPageTotal: number
+    pageSize: number
 };
 
 Category.defaultProps = {
-    id: 3
+    id: 3,
+    pageSize: 6
 };
 
 export default Category;

packages/venia-concept/src/RootComponents/Category/index.js

@@ -3,5 +3,4 @@
  * description = 'Basic Category Page'
  * pageTypes = CATEGORY
  */
-export { default as Category } from './category';
-export { default } from './container';
+export { default } from './category';

packages/venia-concept/src/queries/getCategory.graphql

@@ -21,6 +21,9 @@ query category($id: Int!, $pageSize: Int!, $currentPage: Int!, $onServer: Boolea
                         }
                     }
                 }
+                page_info {
+                    total_pages
+                }
                 total_count
             }
             meta_title @include(if: $onServer)