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,98 @@
+/*
+ * 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 } 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: [],
+    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,
+};