Merge pull request #12870 from kuangp/feat/playlists

feat(playlists): implement playlist plugin

plugins/search-react/package.json

@@ -40,6 +40,7 @@
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "4.0.0-alpha.57",
+    "lodash": "^4.17.21",
     "qs": "^6.9.4",
     "react-use": "^17.3.2"
   },

plugins/search-react/src/context/SearchContext.test.tsx

@@ -160,6 +160,60 @@ describe('SearchContext', () => {
 
       expect(result.current.pageCursor).toBeUndefined();
     });
+
+    it('When filters are cleared', async () => {
+      const { result, waitForNextUpdate } = renderHook(() => useSearch(), {
+        wrapper,
+        initialProps: {
+          initialState: {
+            ...initialState,
+            filters: { foo: 'bar' },
+            term: 'first term',
+            pageCursor: 'SOMEPAGE',
+          },
+        },
+      });
+
+      await waitForNextUpdate();
+
+      expect(result.current.filters).toEqual({ foo: 'bar' });
+      expect(result.current.pageCursor).toEqual('SOMEPAGE');
+
+      act(() => {
+        result.current.setFilters({});
+      });
+
+      await waitForNextUpdate();
+
+      expect(result.current.pageCursor).toBeUndefined();
+    });
+
+    it('When filters are set (and different from previous)', async () => {
+      const { result, waitForNextUpdate } = renderHook(() => useSearch(), {
+        wrapper,
+        initialProps: {
+          initialState: {
+            ...initialState,
+            filters: { foo: 'bar' },
+            term: 'first term',
+            pageCursor: 'SOMEPAGE',
+          },
+        },
+      });
+
+      await waitForNextUpdate();
+
+      expect(result.current.filters).toEqual({ foo: 'bar' });
+      expect(result.current.pageCursor).toEqual('SOMEPAGE');
+
+      act(() => {
+        result.current.setFilters({ foo: 'test' });
+      });
+
+      await waitForNextUpdate();
+
+      expect(result.current.pageCursor).toBeUndefined();
+    });
   });
 
   describe('Performs search (and sets results)', () => {

plugins/search-react/src/context/SearchContext.tsx

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+import { isEqual } from 'lodash';
 import React, {
   PropsWithChildren,
   useCallback,
@@ -115,6 +116,7 @@ const useSearchContextValue = (
   );
 
   const prevTerm = usePrevious(term);
+  const prevFilters = usePrevious(filters);
 
   const result = useAsync(
     () =>
@@ -146,6 +148,14 @@ const useSearchContextValue = (
     }
   }, [term, prevTerm, setPageCursor]);
 
+  useEffect(() => {
+    // Any time filters is reset, we want to start from page 0.
+    // Only reset the page if it has been modified by the user at least once, the initial state must not reset the page.
+    if (prevFilters !== undefined && !isEqual(filters, prevFilters)) {
+      setPageCursor(undefined);
+    }
+  }, [filters, prevFilters, setPageCursor]);
+
   const value: SearchContextValue = {
     result,
     filters,