#1222 Filters (Layered Navigation) - Add keyboard focus and adjust the way tab order should work

packages/peregrine/lib/talons/FilterModal/useFilterModal.js

@@ -10,6 +10,8 @@ import { getSearchFromState, getStateFromSearch, stripHtml } from './helpers';
 
 import DEFAULT_OPERATIONS from './filterModal.gql';
 
+const DRAWER_NAME = 'filter';
+
 /**
  * Filter Modal talon.
  *
@@ -27,10 +29,10 @@ export const useFilterModal = props => {
     const { getFilterInputsQuery } = operations;
 
     const [isApplying, setIsApplying] = useState(false);
-    const [{ drawer }, { closeDrawer }] = useAppContext();
+    const [{ drawer }, { toggleDrawer, closeDrawer }] = useAppContext();
     const [filterState, filterApi] = useFilterState();
     const prevDrawer = useRef(null);
-    const isOpen = drawer === 'filter';
+    const isOpen = drawer === DRAWER_NAME;
 
     const history = useHistory();
     const { pathname, search } = useLocation();
@@ -123,11 +125,48 @@ export const useFilterModal = props => {
         }
     }, [filterKeys, filterState, history, isApplying, pathname, search]);
 
-    // on drawer toggle, read filter state from location
+    const handleOpen = useCallback(() => {
+        toggleDrawer(DRAWER_NAME);
+    }, [toggleDrawer]);
+
+    const handleClose = useCallback(() => {
+        closeDrawer();
+    }, [closeDrawer]);
+
+    const handleApply = useCallback(() => {
+        setIsApplying(true);
+        handleClose();
+    }, [handleClose]);
+
+    const handleReset = useCallback(() => {
+        filterApi.clear();
+        setIsApplying(true);
+    }, [filterApi, setIsApplying]);
+
+    const handleKeyDownActions = useCallback(
+        event => {
+            // do not handle keyboard actions when the modal is closed
+            if (!isOpen) {
+                return;
+            }
+
+            switch (event.keyCode) {
+                // when "Esc" key fired -> close the modal
+                case 27:
+                    handleClose();
+                    break;
+            }
+        },
+        [isOpen, handleClose]
+    );
+
     useEffect(() => {
-        const justOpened = prevDrawer.current === null && drawer === 'filter';
-        const justClosed = prevDrawer.current === 'filter' && drawer === null;
+        const justOpened =
+            prevDrawer.current === null && drawer === DRAWER_NAME;
+        const justClosed =
+            prevDrawer.current === DRAWER_NAME && drawer === null;
 
+        // on drawer toggle, read filter state from location
         if (justOpened || justClosed) {
             const nextState = getStateFromSearch(
                 search,
@@ -137,22 +176,14 @@ export const useFilterModal = props => {
 
             filterApi.setItems(nextState);
         }
-        prevDrawer.current = drawer;
-    }, [drawer, filterApi, filterItems, filterKeys, search]);
 
-    const handleApply = useCallback(() => {
-        setIsApplying(true);
-        closeDrawer();
-    }, [closeDrawer]);
-
-    const handleClose = useCallback(() => {
-        closeDrawer();
-    }, [closeDrawer]);
+        // on drawer close, update the modal visibility state
+        if (justClosed) {
+            handleClose();
+        }
 
-    const handleReset = useCallback(() => {
-        filterApi.clear();
-        setIsApplying(true);
-    }, [filterApi, setIsApplying]);
+        prevDrawer.current = drawer;
+    }, [drawer, filterApi, filterItems, filterKeys, search, handleClose]);
 
     return {
         filterApi,
@@ -161,8 +192,10 @@ export const useFilterModal = props => {
         filterNames,
         filterState,
         handleApply,
+        handleOpen,
         handleClose,
         handleReset,
+        handleKeyDownActions,
         isApplying,
         isOpen
     };

packages/peregrine/lib/talons/RootComponents/Category/__tests__/__snapshots__/useCategoryContent.spec.js.snap

@@ -2,11 +2,9 @@
 
 exports[`handles no data prop 1`] = `
 Object {
-  "categoryDescription": null,
-  "categoryName": null,
+  "categoryDescription": "Jewelry category",
+  "categoryName": "Jewelry",
   "filters": null,
-  "handleLoadFilters": [Function],
-  "handleOpenFilters": [Function],
   "items": Array [
     null,
     null,
@@ -18,7 +16,6 @@ Object {
     null,
     null,
   ],
-  "loadFilters": false,
   "totalPagesFromData": null,
 }
 `;
@@ -32,8 +29,6 @@ Object {
       "label": "Label",
     },
   ],
-  "handleLoadFilters": [Function],
-  "handleOpenFilters": [Function],
   "items": Array [
     Object {
       "id": 1,
@@ -44,7 +39,6 @@ Object {
       "name": "Necklace",
     },
   ],
-  "loadFilters": false,
   "totalPagesFromData": 1,
 }
 `;

packages/peregrine/lib/talons/RootComponents/Category/__tests__/useCategoryContent.spec.js

@@ -2,10 +2,7 @@ import React from 'react';
 import { createTestInstance } from '@magento/peregrine';
 
 import { useCategoryContent } from '../useCategoryContent';
-import { useLazyQuery } from '@apollo/client';
-import { act } from 'react-test-renderer';
-
-import { useAppContext } from '../../../../context/app';
+import { useLazyQuery, useQuery } from '@apollo/client';
 
 global.STORE_NAME = 'Venia';
 
@@ -23,7 +20,8 @@ jest.mock('@apollo/client', () => {
     const apolloClient = jest.requireActual('@apollo/client');
     return {
         ...apolloClient,
-        useLazyQuery: jest.fn()
+        useLazyQuery: jest.fn(),
+        useQuery: jest.fn()
     };
 });
 const Component = props => {
@@ -35,10 +33,6 @@ const Component = props => {
 const mockProps = {
     categoryId: 3,
     data: {
-        category: {
-            name: 'Jewelry',
-            description: 'Jewelry category'
-        },
         products: {
             page_info: {
                 total_pages: 1
@@ -66,6 +60,12 @@ const mockProductFiltersByCategoryData = {
         ]
     }
 };
+const mockCategoryData = {
+    category: {
+        name: 'Jewelry',
+        description: 'Jewelry category'
+    }
+}
 
 const mockGetFilters = jest.fn();
 
@@ -74,60 +74,20 @@ useLazyQuery.mockReturnValue([
     { data: mockProductFiltersByCategoryData }
 ]);
 
+useQuery.mockReturnValue(
+    { data: mockCategoryData }
+);
+
 it('returns the proper shape', () => {
     const rendered = createTestInstance(<Component {...mockProps} />);
 
     const talonProps = rendered.root.findByType('i').props;
 
     expect(mockGetFilters).toHaveBeenCalled();
+    expect(useQuery).toHaveBeenCalled();
     expect(talonProps).toMatchSnapshot();
 });
 
-it('sets the filter loading state', () => {
-    const rendered = createTestInstance(<Component {...mockProps} />);
-
-    const talonProps = rendered.root.findByType('i').props;
-
-    const { loadFilters, handleLoadFilters } = talonProps;
-
-    expect(loadFilters).toBeFalsy();
-
-    act(() => {
-        handleLoadFilters();
-    });
-
-    const updatedProps = rendered.root.findByType('i').props;
-
-    expect(updatedProps.loadFilters).toBeTruthy();
-});
-
-it('toggles drawer when opening filters', () => {
-    const mockToggleDrawer = jest.fn();
-    useAppContext.mockReturnValue([
-        {},
-        {
-            toggleDrawer: mockToggleDrawer
-        }
-    ]);
-
-    const rendered = createTestInstance(<Component {...mockProps} />);
-
-    const talonProps = rendered.root.findByType('i').props;
-
-    const { loadFilters, handleOpenFilters } = talonProps;
-
-    expect(loadFilters).toBeFalsy();
-
-    act(() => {
-        handleOpenFilters();
-    });
-
-    const updatedProps = rendered.root.findByType('i').props;
-
-    expect(updatedProps.loadFilters).toBeTruthy();
-    expect(mockToggleDrawer).toHaveBeenCalled();
-});
-
 it('handles default category id', () => {
     const testProps = Object.assign({}, mockProps, {
         categoryId: 0
@@ -153,6 +113,10 @@ it('handles no data prop', () => {
         data: null,
         pageSize: 9
     };
+    useLazyQuery.mockReturnValue([
+        mockGetFilters,
+        { data: null }
+    ]);
 
     const rendered = createTestInstance(<Component {...testProps} />);
 

packages/peregrine/lib/talons/RootComponents/Category/categoryContent.gql.js

@@ -18,6 +18,17 @@ export const GET_PRODUCT_FILTERS_BY_CATEGORY = gql`
     }
 `;
 
+export const GET_CATEGORY_CONTENT = gql`
+    query getCategoryData($id: Int!) {
+        category(id: $id) {
+            id
+            name
+            description
+        }
+    }
+`;
+
 export default {
+    getCategoryContentQuery: GET_CATEGORY_CONTENT,
     getProductFiltersByCategoryQuery: GET_PRODUCT_FILTERS_BY_CATEGORY
 };

packages/peregrine/lib/talons/RootComponents/Category/categoryFragments.gql.js

@@ -3,9 +3,6 @@ import { gql } from '@apollo/client';
 export const CategoryFragment = gql`
     fragment CategoryFragment on CategoryTree {
         id
-        description
-        name
-        product_count
         meta_title
         meta_keywords
         meta_description

packages/peregrine/lib/talons/RootComponents/Category/useCategoryContent.js

@@ -1,13 +1,10 @@
-import { useCallback, useEffect, useState } from 'react';
-import { useLazyQuery } from '@apollo/client';
+import { useEffect } from 'react';
+import { useLazyQuery, useQuery } from '@apollo/client';
 
 import mergeOperations from '../../../util/shallowMerge';
-import { useAppContext } from '../../../context/app';
 
 import DEFAULT_OPERATIONS from './categoryContent.gql';
 
-const DRAWER_NAME = 'filter';
-
 /**
  * Returns props necessary to render the categoryContent component.
  *
@@ -17,28 +14,20 @@ const DRAWER_NAME = 'filter';
  * @returns {number} result.categoryId - This category's ID.
  * @returns {string} result.categoryName - This category's name.
  * @returns {object} result.filters - The filters object.
- * @returns {func}   result.handleLoadFilters - A callback function to signal the user's intent to interact with the filters.
- * @returns {func}   result.handleOpenFilters - A callback function that actually opens the filter drawer.
  * @returns {object} result.items - The items in this category.
  * @returns {bool}   result.loadFilters - Whether or not the user has signalled their intent to interact with the filters.
  */
 export const useCategoryContent = props => {
     const { categoryId, data, pageSize = 6 } = props;
 
     const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
-    const { getProductFiltersByCategoryQuery } = operations;
 
-    const placeholderItems = Array.from({ length: pageSize }).fill(null);
-    const [loadFilters, setLoadFilters] = useState(false);
-    const [, { toggleDrawer }] = useAppContext();
+    const {
+        getCategoryContentQuery,
+        getProductFiltersByCategoryQuery
+    } = operations;
 
-    const handleLoadFilters = useCallback(() => {
-        setLoadFilters(true);
-    }, [setLoadFilters]);
-    const handleOpenFilters = useCallback(() => {
-        setLoadFilters(true);
-        toggleDrawer(DRAWER_NAME);
-    }, [setLoadFilters, toggleDrawer]);
+    const placeholderItems = Array.from({ length: pageSize }).fill(null);
 
     const [getFilters, { data: filterData }] = useLazyQuery(
         getProductFiltersByCategoryQuery,
@@ -48,6 +37,15 @@ export const useCategoryContent = props => {
         }
     );
 
+    const { data: categoryData } = useQuery(getCategoryContentQuery, {
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'cache-first',
+        skip: !categoryId,
+        variables: {
+            id: categoryId
+        }
+    });
+
     useEffect(() => {
         if (categoryId) {
             getFilters({
@@ -65,17 +63,16 @@ export const useCategoryContent = props => {
     const totalPagesFromData = data
         ? data.products.page_info.total_pages
         : null;
-    const categoryName = data ? data.category.name : null;
-    const categoryDescription = data ? data.category.description : null;
+    const categoryName = categoryData ? categoryData.category.name : null;
+    const categoryDescription = categoryData
+        ? categoryData.category.description
+        : null;
 
     return {
         categoryName,
         categoryDescription,
         filters,
-        handleLoadFilters,
-        handleOpenFilters,
         items,
-        loadFilters,
         totalPagesFromData
     };
 };