Reset the media store state if collection state changes (#3979)

* Reset the media store state if collection state changes Signed-off-by: Olga Bulat <[email protected]> * Remove unrelated change * Improve comparisons Signed-off-by: Olga Bulat <[email protected]> --------- Signed-off-by: Olga Bulat <[email protected]>
WordPress · Mar 30, 2024 · aa9ea4b · aa9ea4b
1 parent 6b31766
commit aa9ea4b
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 2 deletions.
diff --git a/frontend/src/middleware/collection.ts b/frontend/src/middleware/collection.ts
@@ -1,3 +1,5 @@
+import { isShallowEqualObjects } from "@wordpress/is-shallow-equal"
+
 import { useFeatureFlagStore } from "~/stores/feature-flag"
 import { useProviderStore } from "~/stores/provider"
 import { useSearchStore } from "~/stores/search"
@@ -95,5 +97,14 @@ export const collectionMiddleware: Middleware = async ({
     }
   }
 
-  searchStore.setCollectionState(collectionParams, mediaType)
+  // Update the search store with the new collection state
+  // This will also clear the media items in the media store,
+  // so we only call it if the collection state has changed.
+  if (
+    searchStore.collectionParams === null ||
+    !isShallowEqualObjects(searchStore.collectionParams, collectionParams) ||
+    searchStore.searchType !== mediaType
+  ) {
+    searchStore.setCollectionState(collectionParams, mediaType)
+  }
 }
diff --git a/frontend/src/stores/search.ts b/frontend/src/stores/search.ts
@@ -332,9 +332,10 @@ export const useSearchStore = defineStore("search", {
 
       this.addRecentSearch(formattedTerm)
     },
+
     /**
      * Sets the collectionParams and mediaType for the collection page.
-     * Resets the filters and search term.
+     * Resets the filters, search term and clears media in the media store.
      */
     setCollectionState(
       collectionParams: CollectionParams,
@@ -344,6 +345,8 @@ export const useSearchStore = defineStore("search", {
       this.strategy = collectionParams.collection
       this.setSearchType(mediaType)
       this.clearFilters()
+      const mediaStore = useMediaStore()
+      mediaStore.clearMedia()
     },
     /**
      * Called before navigating to a `/search` path, and when the