From aa9ea4bcfe40683923c98ca43b23f6ff22a06a2f Mon Sep 17 00:00:00 2001 From: Olga Bulat Date: Sat, 30 Mar 2024 07:02:56 +0300 Subject: [PATCH] Reset the media store state if collection state changes (#3979) * Reset the media store state if collection state changes Signed-off-by: Olga Bulat * Remove unrelated change * Improve comparisons Signed-off-by: Olga Bulat --------- Signed-off-by: Olga Bulat --- frontend/src/middleware/collection.ts | 13 ++++++++++++- frontend/src/stores/search.ts | 5 ++++- 2 files changed, 16 insertions(+), 2 deletions(-) diff --git a/frontend/src/middleware/collection.ts b/frontend/src/middleware/collection.ts index 773dcdd257a..0b852accfc3 100644 --- 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 index c03c6daf29d..6ba3460e6d3 100644 --- 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