Make sure filter count is correct when using multiple filters

2 files changed, 32 insertions, 18 deletions

diff --git a/gui/src/renderer/components/Filter.tsx b/gui/src/renderer/components/Filter.tsx
index 6b369aa39b..dc6da483fc 100644
--- a/gui/src/renderer/components/Filter.tsx
+++ b/gui/src/renderer/components/Filter.tsx
@@ -61,9 +61,10 @@ export default function Filter() {
   const [ownership, setOwnership] = useState<Ownership>(initialOwnership);
 
   // Available providers are used to only show compatible options after activating a filter.
-  const { availableProviders, availableOwnershipOptions } = useFilteredFilters(
+  const availableProviders = useFilteredProviders([], ownership);
+  const availableOwnershipOptions = useFilteredOwnershipOptions(
     formattedProviderList,
-    ownership,
+    Ownership.any,
   );
 
   // Applies the changes by sending them to the daemon.
@@ -113,31 +114,21 @@ export default function Filter() {
   );
 }
 
-// Returns only the options for each filter that are compatible with current filter selection.
-function useFilteredFilters(providers: string[], ownership: Ownership) {
+// Returns only the ownership options that are compatible with the other filters
+function useFilteredOwnershipOptions(providers: string[], ownership: Ownership): Ownership[] {
   const relaySettings = useNormalRelaySettings();
   const bridgeState = useSelector((state) => state.settings.bridgeState);
   const locations = useSelector((state) => state.settings.relayLocations);
 
   const endpointType = bridgeState === 'on' ? EndpointType.any : EndpointType.exit;
 
-  const availableProviders = useMemo(() => {
-    const relayListForEndpointType = filterLocationsByEndPointType(
-      locations,
-      endpointType,
-      relaySettings,
-    );
-    const relaylistForFilters = filterLocations(relayListForEndpointType, ownership, []);
-    return providersFromRelays(relaylistForFilters);
-  }, [locations, ownership]);
-
   const availableOwnershipOptions = useMemo(() => {
     const relayListForEndpointType = filterLocationsByEndPointType(
       locations,
       endpointType,
       relaySettings,
     );
-    const relaylistForFilters = filterLocations(relayListForEndpointType, Ownership.any, providers);
+    const relaylistForFilters = filterLocations(relayListForEndpointType, ownership, providers);
 
     const filteredRelayOwnership = relaylistForFilters.flatMap((country) =>
       country.cities.flatMap((city) => city.relays.map((relay) => relay.owned)),
@@ -152,9 +143,30 @@ function useFilteredFilters(providers: string[], ownership: Ownership) {
     }
 
     return ownershipOptions;
-  }, [locations, providers]);
+  }, [locations, providers, ownership]);
+
+  return availableOwnershipOptions;
+}
+
+// Returns only the providers that are compatible with the other filters
+export function useFilteredProviders(providers: string[], ownership: Ownership): string[] {
+  const relaySettings = useNormalRelaySettings();
+  const bridgeState = useSelector((state) => state.settings.bridgeState);
+  const locations = useSelector((state) => state.settings.relayLocations);
+
+  const endpointType = bridgeState === 'on' ? EndpointType.any : EndpointType.exit;
+
+  const availableProviders = useMemo(() => {
+    const relayListForEndpointType = filterLocationsByEndPointType(
+      locations,
+      endpointType,
+      relaySettings,
+    );
+    const relaylistForFilters = filterLocations(relayListForEndpointType, ownership, providers);
+    return providersFromRelays(relaylistForFilters);
+  }, [locations, ownership]);
 
-  return { availableProviders, availableOwnershipOptions };
+  return availableProviders;
 }
 
 // Returns all available providers in the provided relay list.
diff --git a/gui/src/renderer/components/select-location/SelectLocation.tsx b/gui/src/renderer/components/select-location/SelectLocation.tsx
index 1ea7aeb5aa..c812d84835 100644
--- a/gui/src/renderer/components/select-location/SelectLocation.tsx
+++ b/gui/src/renderer/components/select-location/SelectLocation.tsx
@@ -12,6 +12,7 @@ import { RoutePath } from '../../lib/routes';
 import { useNormalBridgeSettings, useNormalRelaySettings } from '../../lib/utilityHooks';
 import { useSelector } from '../../redux/store';
 import * as Cell from '../cell';
+import { useFilteredProviders } from '../Filter';
 import ImageView from '../ImageView';
 import { BackAction } from '../KeyboardNavigation';
 import { Layout, SettingsContainer } from '../Layout';
@@ -69,6 +70,7 @@ export default function SelectLocation() {
   const relaySettings = useNormalRelaySettings();
   const ownership = relaySettings?.ownership ?? Ownership.any;
   const providers = relaySettings?.providers ?? [];
+  const filteredProviders = useFilteredProviders(providers, ownership);
 
   const [searchValue, setSearchValue] = useState('');
 
@@ -201,7 +203,7 @@ export default function SelectLocation() {
                           'select-location-view',
                           'Providers: %(numberOfProviders)d',
                         ),
-                        { numberOfProviders: providers.length },
+                        { numberOfProviders: filteredProviders.length },
                       )}
                       <StyledClearFilterButton
                         aria-label={messages.gettext('Clear')}