From cc09649fe748f0517c5f743c29576d09b02e20a9 Mon Sep 17 00:00:00 2001
From: Chi-Hsuan Huang <chihsuan.tw@gmail.com>
Date: Wed, 31 Jan 2024 14:54:32 +0800
Subject: [PATCH] [WooCommerce] Fix unable to review Installed Themes in
 MyTheme tab (#86944)

* Remove the hidden Store filter for My Themes query and do not increment the page if number is greater than 20

* Disable the active state when filter selected key is not found

* Reformat

* Do not incrementPage when isRequesting or isLastPage

* Update client/state/themes/selectors/get-theme-hidden-filters.js

Co-authored-by: Ilyas Foo <foo.ilyas@gmail.com>

---------

Co-authored-by: Ilyas Foo <foo.ilyas@gmail.com>
---
 client/my-sites/themes/themes-selection.jsx         |  6 +++++-
 .../my-sites/themes/themes-toolbar-group/index.tsx  | 13 +++++--------
 .../themes/selectors/get-theme-hidden-filters.js    |  7 +++++--
 3 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/client/my-sites/themes/themes-selection.jsx b/client/my-sites/themes/themes-selection.jsx
index ee19e9f100e01b..1bc8cc55dba035 100644
--- a/client/my-sites/themes/themes-selection.jsx
+++ b/client/my-sites/themes/themes-selection.jsx
@@ -75,6 +75,10 @@ class ThemesSelection extends Component {
 	};
 
 	componentDidMount() {
+		if ( this.props.isRequesting || this.props.isLastPage ) {
+			return;
+		}
+
 		// Create "buffer zone" to prevent overscrolling too early bugging pagination requests.
 		const { query } = this.props;
 		if ( ! query.search && ! query.filter && ! query.tier ) {
@@ -311,7 +315,7 @@ export const ConnectedThemesSelection = connect(
 	) => {
 		const isAtomic = isSiteAutomatedTransfer( state, siteId );
 		const premiumThemesEnabled = arePremiumThemesEnabled( state, siteId );
-		const hiddenFilters = getThemeHiddenFilters( state, siteId );
+		const hiddenFilters = getThemeHiddenFilters( state, siteId, tabFilter );
 		const hasUnlimitedPremiumThemes = siteHasFeature(
 			state,
 			siteId,
diff --git a/client/my-sites/themes/themes-toolbar-group/index.tsx b/client/my-sites/themes/themes-toolbar-group/index.tsx
index a636d3258bcbfc..ae004dfb744465 100644
--- a/client/my-sites/themes/themes-toolbar-group/index.tsx
+++ b/client/my-sites/themes/themes-toolbar-group/index.tsx
@@ -14,14 +14,11 @@ const ThemesToolbarGroup: React.FC< ThemesToolbarGroupProps > = ( {
 	selectedKey,
 	onSelect,
 } ) => {
-	const activeIndex = useMemo(
-		() =>
-			Math.max(
-				items.findIndex( ( { key } ) => key === selectedKey ),
-				0
-			),
-		[ items, selectedKey ]
-	);
+	const activeIndex = useMemo( () => {
+		const index = items.findIndex( ( { key } ) => key === selectedKey );
+		// If the selected key is not found, return undefined to disable the active state.
+		return index >= 0 ? index : undefined;
+	}, [ items, selectedKey ] );
 
 	return (
 		<ResponsiveToolbarGroup
diff --git a/client/state/themes/selectors/get-theme-hidden-filters.js b/client/state/themes/selectors/get-theme-hidden-filters.js
index f18c4bd8de0249..d1c3b83e0c3613 100644
--- a/client/state/themes/selectors/get-theme-hidden-filters.js
+++ b/client/state/themes/selectors/get-theme-hidden-filters.js
@@ -4,12 +4,15 @@ import { isSiteOnECommerceTrial, isSiteOnWooExpress } from 'calypso/state/sites/
  * Returns theme filters that are not shown in the UI nor navigation URL.
  * @param  {Object}  state   Global state tree
  * @param  {?number} siteId  Site ID to optionally use as context
+ * @param  {?string} tabFilter Tab filter to optionally use as context
  * @returns {Array}          Array of filter slugs
  */
-export function getThemeHiddenFilters( state, siteId ) {
+export function getThemeHiddenFilters( state, siteId, tabFilter ) {
 	const filters = [];
+	const isECommerceTrialOrWooExpress =
+		isSiteOnECommerceTrial( state, siteId ) || isSiteOnWooExpress( state, siteId );
 
-	if ( isSiteOnECommerceTrial( state, siteId ) || isSiteOnWooExpress( state, siteId ) ) {
+	if ( isECommerceTrialOrWooExpress && tabFilter === 'recommended' ) {
 		filters.push( 'store' );
 	}