[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

@@ -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,

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

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' );
 	}