Dashboard: Incorporate the rest of the filters into FiltersProvider

packages/dashboard/src/app/views/exploreTemplates/content/index.js

@@ -42,7 +42,6 @@ import {
 import {
   ViewPropTypes,
   PagePropTypes,
-  SearchPropTypes,
 } from '../../../../utils/useTemplateView';
 import { TemplatesPropType, TemplateActionsPropType } from '../../../../types';
 import { EmptyContentMessage } from '../../shared';
@@ -90,18 +89,18 @@ function Content({
     ) : (
       <EmptyContentMessage>
         <Headline size={THEME_CONSTANTS.TYPOGRAPHY.PRESET_SIZES.SMALL} as="h3">
-          {search?.keyword
+          {search
             ? sprintf(
                 /* translators: %s: search term. */
                 __(
                   'Sorry, we couldn\'t find any results matching "%s"',
                   'web-stories'
                 ),
-                search.keyword
+                search
               )
             : __('No templates currently available.', 'web-stories')}
         </Headline>
-        {!search?.keyword && (
+        {!search && (
           <Button
             type={BUTTON_TYPES.PRIMARY}
             size={BUTTON_SIZES.MEDIUM}
@@ -118,8 +117,8 @@ function Content({
     isLoading,
     newStoryURL,
     page.requestNextPage,
-    search.keyword,
     templateActions,
+    search,
     templates,
     totalTemplates,
     view.pageSize,
@@ -138,7 +137,7 @@ Content.propTypes = {
   page: PagePropTypes,
   templates: TemplatesPropType,
   totalTemplates: PropTypes.number,
-  search: SearchPropTypes,
+  search: PropTypes.string,
   templateActions: TemplateActionsPropType,
   view: ViewPropTypes,
 };

packages/dashboard/src/app/views/exploreTemplates/content/test/content.js

@@ -22,11 +22,16 @@ import { screen } from '@testing-library/react';
 /**
  * Internal dependencies
  */
-import { TEMPLATES_GALLERY_STATUS, VIEW_STYLE } from '../../../../../constants';
+import {
+  TEMPLATES_GALLERY_SORT_OPTIONS,
+  TEMPLATES_GALLERY_STATUS,
+  VIEW_STYLE,
+} from '../../../../../constants';
 import { renderWithProviders } from '../../../../../testUtils';
 import LayoutProvider from '../../../../../components/layout/provider';
 import Content from '..';
 import { ConfigProvider } from '../../../../config';
+import useTemplateFilters from '../../filters/useTemplateFilters';
 
 const fakeTemplates = [
   {
@@ -61,14 +66,49 @@ const fakeTemplates = [
   },
 ];
 
+jest.mock('../../filters/useTemplateFilters', () => ({
+  ...jest.requireActual('../../filters/useTemplateFilters'),
+  __esModule: true,
+  default: jest.fn(),
+}));
+
+const mockUseTemplateFilters = useTemplateFilters;
+
+const updateSort = jest.fn();
+const updateFilter = jest.fn();
+
+const mockFilterState = {
+  filters: [
+    {
+      key: 'search',
+      filterId: null,
+    },
+    {
+      key: 'status',
+      filterId: TEMPLATES_GALLERY_STATUS.ALL,
+    },
+  ],
+  filtersObject: {
+    status: TEMPLATES_GALLERY_STATUS.ALL,
+  },
+  sortObject: {
+    orderby: TEMPLATES_GALLERY_SORT_OPTIONS.POPULAR,
+  },
+  registerFilters: () => {},
+  updateFilter,
+  updateSort,
+};
+
 describe('Explore Templates <Content />', function () {
+  beforeEach(() => {
+    mockUseTemplateFilters.mockImplementation(() => mockFilterState);
+  });
+
   it('should render the content grid with the correct template count.', function () {
     renderWithProviders(
       <ConfigProvider config={{ cdnURL: 'cdn.example.com' }}>
         <LayoutProvider>
           <Content
-            filter={{ view: TEMPLATES_GALLERY_STATUS.ALL }}
-            search={{ keyword: '' }}
             templates={fakeTemplates}
             totalTemplates={3}
             page={{
@@ -92,8 +132,6 @@ describe('Explore Templates <Content />', function () {
     renderWithProviders(
       <LayoutProvider>
         <Content
-          filter={{ view: TEMPLATES_GALLERY_STATUS.ALL }}
-          search={{ keyword: '' }}
           templates={[]}
           totalTemplates={0}
           page={{
@@ -115,8 +153,7 @@ describe('Explore Templates <Content />', function () {
     renderWithProviders(
       <LayoutProvider>
         <Content
-          filter={{ view: TEMPLATES_GALLERY_STATUS.ALL }}
-          search={{ keyword: 'scooby dooby doo' }}
+          search={'scooby dooby doo'}
           templates={[]}
           totalTemplates={0}
           page={{

packages/dashboard/src/app/views/exploreTemplates/filters/TemplateFiltersProvider/index.js

@@ -0,0 +1,104 @@
+/*
+ * Copyright 2022 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * External dependencies
+ */
+import {
+  createContext,
+  useReducer,
+  useCallback,
+  useMemo,
+} from '@googleforcreators/react';
+import PropTypes from 'prop-types';
+
+/**
+ * Internal dependencies
+ */
+import {
+  DEFAULT_TEMPLATE_FILTERS,
+  TEMPLATES_GALLERY_STATUS,
+} from '../../../../../constants/templates';
+import reducer from '../../../filters/reducer';
+import * as types from '../../../filters/types';
+
+export const filterContext = createContext({
+  state: {},
+  actions: {},
+});
+
+const { filters: defaultTemplateFilters, sort: defaultTemplateSort } =
+  DEFAULT_TEMPLATE_FILTERS;
+
+export default function TemplateFiltersProvider({ children }) {
+  const [state, dispatch] = useReducer(reducer, {
+    filters: [
+      { key: 'search', filterId: null },
+      { key: 'status', filterId: TEMPLATES_GALLERY_STATUS.ALL },
+    ],
+    filtersObject: defaultTemplateFilters,
+    sortObject: defaultTemplateSort,
+  });
+
+  /**
+   * Dispatch UPDATE_FILTER with new data for a given filter
+   *
+   * @param {string} key key property on one of the filter objects
+   * @param {Object} value the properties with updated values
+   * @return {void}
+   */
+  const updateFilter = useCallback((key, value) => {
+    dispatch({ type: types.UPDATE_FILTER, payload: { key, value } });
+  }, []);
+
+  /**
+   * Dispatch UPDATE_SORT with new data to update sort
+   *
+   * @param {string} key key property on one of the sort objects
+   * @param {Object} value the properties with updated values
+   * @return {void}
+   */
+  const updateSort = useCallback((values) => {
+    dispatch({
+      type: types.UPDATE_SORT,
+      payload: { type: 'template', values },
+    });
+  }, []);
+
+  /**
+   * Dispatch REGISTER_FILTERS with all the filters data
+   *
+   * @param {Array} payload array of filters data
+   * @return {void}
+   */
+  const registerFilters = useCallback((value) => {
+    dispatch({ type: types.REGISTER_FILTERS, payload: { value } });
+  }, []);
+
+  const contextValue = useMemo(() => {
+    return { state, actions: { updateSort, updateFilter, registerFilters } };
+  }, [state, updateSort, updateFilter, registerFilters]);
+
+  return (
+    <filterContext.Provider value={contextValue}>
+      {children}
+    </filterContext.Provider>
+  );
+}
+
+TemplateFiltersProvider.propTypes = {
+  children: PropTypes.node,
+};

packages/dashboard/src/app/views/exploreTemplates/filters/useTemplateFilters.js

@@ -0,0 +1,28 @@
+/*
+ * Copyright 2022 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * External dependencies
+ */
+import { identity, useContextSelector } from '@googleforcreators/react';
+/**
+ * Internal dependencies
+ */
+import { filterContext } from './TemplateFiltersProvider';
+
+export default function useStoryFilters(selector = identity) {
+  return useContextSelector(filterContext, selector);
+}

packages/dashboard/src/app/views/exploreTemplates/header/index.js

@@ -22,7 +22,11 @@ import { __ } from '@googleforcreators/i18n';
 /**
  * External dependencies
  */
-import { useDebouncedCallback, useCallback } from '@googleforcreators/react';
+import {
+  useDebouncedCallback,
+  useCallback,
+  useMemo,
+} from '@googleforcreators/react';
 import PropTypes from 'prop-types';
 import { useFeature } from 'flagged';
 
@@ -32,40 +36,49 @@ import { useFeature } from 'flagged';
 import {
   DASHBOARD_VIEWS,
   TEMPLATES_GALLERY_SORT_MENU_ITEMS,
+  TEMPLATES_GALLERY_SORT_OPTIONS,
   TEXT_INPUT_DEBOUNCE,
 } from '../../../../constants';
-import {
-  FilterPropTypes,
-  SortPropTypes,
-  ViewPropTypes,
-  SearchPropTypes,
-} from '../../../../utils/useTemplateView';
+import { ViewPropTypes } from '../../../../utils/useTemplateView';
+import useTemplateFilters from '../filters/useTemplateFilters';
 import { useDashboardResultsLabel } from '../../../../utils';
 import { PageHeading, BodyViewOptions } from '../../shared';
 
-function Header({
-  filter,
-  isLoading,
-  totalTemplates,
-  sort,
-  view,
-  search,
-  searchOptions = [],
-}) {
+function Header({ isLoading, totalTemplates, view, searchOptions = [] }) {
   const enableInProgressTemplateActions = useFeature(
     'enableInProgressTemplateActions'
   );
 
-  const { setKeyword } = search;
+  const { filters, sortObject, updateFilter, updateSort } = useTemplateFilters(
+    ({
+      state: { filters, sortObject },
+      actions: { updateFilter, updateSort },
+    }) => ({
+      filters,
+      sortObject,
+      updateFilter,
+      updateSort,
+    })
+  );
+
+  const [statusFilterValue, searchFilterValue] = useMemo(() => {
+    const status = filters.find(({ key }) => key === 'status');
+    const search = filters.find(({ key }) => key === 'search');
+    return [status?.filterId, search?.filterId];
+  }, [filters]);
+
   const debouncedSearchChange = useDebouncedCallback((value) => {
-    setKeyword(value);
+    updateFilter('search', { filterId: value });
   }, TEXT_INPUT_DEBOUNCE);
 
-  const clearSearch = useCallback(() => setKeyword(''), [setKeyword]);
+  const clearSearch = useCallback(
+    () => updateFilter('search', { filterId: null }),
+    [updateFilter]
+  );
 
   const resultsLabel = useDashboardResultsLabel({
     totalResults: totalTemplates,
-    currentFilter: filter.value,
+    currentFilter: statusFilterValue,
     view: DASHBOARD_VIEWS.TEMPLATES_GALLERY,
   });
 
@@ -76,19 +89,20 @@ function Header({
         searchPlaceholder={__('Search Templates', 'web-stories')}
         showSearch
         searchOptions={searchOptions}
-        searchValue={search.keyword}
+        searchValue={searchFilterValue}
         handleSearchChange={debouncedSearchChange}
         onClear={clearSearch}
       />
       <BodyViewOptions
         resultsLabel={resultsLabel}
         layoutStyle={view.style}
         handleLayoutSelect={view.toggleStyle}
-        currentSort={sort.value}
         isLoading={isLoading}
         pageSortOptions={TEMPLATES_GALLERY_SORT_MENU_ITEMS}
+        pageSortDefaultOption={TEMPLATES_GALLERY_SORT_OPTIONS.POPULAR}
+        currentSort={sortObject}
+        handleSortChange={updateSort}
         showSortDropdown={enableInProgressTemplateActions}
-        handleSortChange={enableInProgressTemplateActions ? sort.set : () => {}}
         sortDropdownAriaLabel={__(
           'Choose sort option for display',
           'web-stories'
@@ -99,12 +113,9 @@ function Header({
 }
 
 Header.propTypes = {
-  filter: FilterPropTypes.isRequired,
   isLoading: PropTypes.bool,
-  sort: SortPropTypes.isRequired,
   totalTemplates: PropTypes.number,
   view: ViewPropTypes.isRequired,
-  search: SearchPropTypes.isRequired,
   searchOptions: PropTypes.arrayOf(PropTypes.object),
 };