Resolve conflicts with hooks refactor

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/__tests__/__snapshots__/categoryContent.spec.js.snap

@@ -0,0 +1,32 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the correct tree 1`] = `
+<article
+  className="a"
+>
+  <h1
+    className="b"
+  >
+    <div />
+  </h1>
+  <section
+    className="c"
+  >
+    <Classify(Gallery)
+      data={
+        Object {
+          "id": 1,
+        }
+      }
+      pageSize={6}
+    />
+  </section>
+  <div
+    className="d"
+  >
+    <withRouter(Classify(Pagination))
+      pageControl={Object {}}
+    />
+  </div>
+</article>
+`;

packages/venia-concept/src/RootComponents/Category/__tests__/categoryContent.spec.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import ShallowRenderer from 'react-test-renderer/shallow';
 
 import CategoryContent from '../categoryContent';
 
@@ -21,15 +21,16 @@ const data = {
     }
 };
 
-test('renders with props', () => {
-    const pageSize = 6;
-    const wrapper = shallow(
+test('renders the correct tree', () => {
+    const shallowRenderer = new ShallowRenderer();
+    const tree = shallowRenderer.render(
         <CategoryContent
             pageControl={{}}
             data={data}
-            pageSize={pageSize}
+            pageSize={6}
             classes={classes}
         />
-    ).dive();
-    expect(wrapper.hasClass(classes.root)).toBe(true);
+    );
+
+    expect(tree).toMatchSnapshot();
 });

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

@@ -1,130 +1,112 @@
-import React, { Component } from 'react';
-import { string, number, shape } from 'prop-types';
-import { compose } from 'redux';
-import { connect, Query } from 'src/drivers';
+import React, { useEffect } from 'react';
+import { number, shape, string } from 'prop-types';
+import { usePagination, useQuery } from '@magento/peregrine';
+
+import { toggleDrawer } from 'src/actions/app';
 import catalogActions from 'src/actions/catalog';
-import classify from 'src/classify';
-import isObjectEmpty from 'src/util/isObjectEmpty';
-import { setCurrentPage, setPrevPageTotal } from 'src/actions/catalog';
+import { mergeClasses } from 'src/classify';
 import { loadingIndicator } from 'src/components/LoadingIndicator';
-import CategoryContent from './categoryContentContainer';
-import defaultClasses from './category.css';
+import { connect } from 'src/drivers';
 import categoryQuery from 'src/queries/getCategory.graphql';
+import isObjectEmpty from 'src/util/isObjectEmpty';
 import { getFilterParams } from 'src/util/getFilterParamsFromUrl';
-class Category extends Component {
-    static propTypes = {
-        id: number,
-        classes: shape({
-            gallery: string,
-            root: string,
-            title: string
-        }),
-        currentPage: number,
-        prevPageTotal: number,
-        pageSize: number
-    };
+import CategoryContent from './categoryContent';
+import defaultClasses from './category.css';
 
-    // TODO: Should not be a default here, we just don't have
-    // the wiring in place to map route info down the tree (yet)
-    static defaultProps = {
-        id: 3
+const Category = props => {
+    const { filterClear, id, openDrawer, pageSize } = props;
+
+    const [paginationValues, paginationApi] = usePagination();
+    const { currentPage, totalPages } = paginationValues;
+    const { setCurrentPage, setTotalPages } = paginationApi;
+
+    const pageControl = {
+        currentPage,
+        setPage: setCurrentPage,
+        updateTotalPages: setTotalPages,
+        totalPages
     };
 
-    componentDidMount() {
-        isObjectEmpty(getFilterParams()) && this.props.filterClear();
-    }
+    const [queryResult, queryApi] = useQuery(categoryQuery);
+    const { data, error, loading } = queryResult;
+    const { runQuery, setLoading } = queryApi;
+    const classes = mergeClasses(defaultClasses, props.classes);
 
-    componentDidUpdate(prevProps) {
-        // If the current page has changed, scroll back up to the top.
-        if (this.props.currentPage !== prevProps.currentPage) {
-            window.scrollTo(0, 0);
+    // clear any stale filters
+    useEffect(() => {
+        if (isObjectEmpty(getFilterParams())) {
+            filterClear();
         }
-    }
-
-    render() {
-        const {
-            id,
-            classes,
-            currentPage,
-            prevPageTotal,
-            filterClear,
-            pageSize,
-            setCurrentPage,
-            setPrevPageTotal
-        } = this.props;
-
-        const pageControl = {
-            currentPage: currentPage,
-            setPage: setCurrentPage,
-            updateTotalPages: setPrevPageTotal,
-            totalPages: prevPageTotal
-        };
-
-        const queryVariables = {
-            id: Number(id),
-            onServer: false,
-            pageSize: Number(pageSize),
-            currentPage: Number(currentPage),
-            idString: String(id)
-        };
-
-        return (
-            <Query query={categoryQuery} variables={queryVariables}>
-                {({ loading, error, data }) => {
-                    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)
-                        return pageControl.totalPages ? (
-                            <CategoryContent
-                                pageControl={pageControl}
-                                pageSize={pageSize}
-                            />
-                        ) : (
-                            loadingIndicator
-                        );
-
-                    // Retrieve the total page count from GraphQL when ready
-                    const pageCount = data.products.total_count / pageSize;
-                    const totalPages = Math.ceil(pageCount);
-                    const totalWrapper = {
-                        ...pageControl,
-                        totalPages: totalPages
-                    };
-
-                    return (
-                        <CategoryContent
-                            classes={classes}
-                            filterClear={filterClear}
-                            pageControl={totalWrapper}
-                            data={data}
-                        />
-                    );
-                }}
-            </Query>
-        );
-    }
-}
-
-const mapStateToProps = ({ catalog }) => {
-    return {
-        currentPage: catalog.currentPage,
-        pageSize: catalog.pageSize,
-        prevPageTotal: catalog.prevPageTotal
-    };
+    }, []);
+
+    // run the category query
+    useEffect(() => {
+        setLoading(true);
+        runQuery({
+            variables: {
+                currentPage: Number(currentPage),
+                id: Number(id),
+                idString: String(id),
+                onServer: false,
+                pageSize: Number(pageSize)
+            }
+        });
+
+        window.scrollTo({
+            left: 0,
+            top: 0,
+            behavior: 'smooth'
+        });
+    }, [currentPage, id, pageSize]);
+
+    const totalPagesFromData = data
+        ? data.products.page_info.total_pages
+        : null;
+
+    useEffect(() => {
+        setTotalPages(totalPagesFromData);
+    }, [totalPagesFromData]);
+
+    if (error) return <div>Data Fetch Error</div>;
+
+    // show loading indicator until data has been fetched
+    // and pagination state has been updated
+    if (!totalPages) return loadingIndicator;
+
+    return (
+        <CategoryContent
+            classes={classes}
+            data={loading ? null : data}
+            filterClear={filterClear}
+            openDrawer={openDrawer}
+            pageControl={pageControl}
+        />
+    );
+};
+
+// export default Category;
+
+Category.propTypes = {
+    classes: shape({
+        gallery: string,
+        root: string,
+        title: string
+    }),
+    id: number,
+    pageSize: number
+};
+
+Category.defaultProps = {
+    id: 3,
+    pageSize: 6
 };
 
 const mapDispatchToProps = dispatch => ({
-    setCurrentPage: payload => dispatch(setCurrentPage(payload)),
-    setPrevPageTotal: payload => dispatch(setPrevPageTotal(payload)),
-    filterClear: () => dispatch(catalogActions.filterOption.clear())
+    filterClear: () => dispatch(catalogActions.filterOption.clear()),
+    openDrawer: () => dispatch(toggleDrawer('filter'))
 });
 
-export default compose(
-    classify(defaultClasses),
-    connect(
-        mapStateToProps,
-        mapDispatchToProps
-    )
+export default connect(
+    null,
+    mapDispatchToProps
 )(Category);