Merge pull request #1154 from CruGlobal/8405-filter-map

[MPDX-8405] Fix filtering the map by selected contacts

Author: canac

pages/accountLists/[accountListId]/contacts/ContactsWrapper.tsx

@@ -1,6 +1,7 @@
 import { ParsedUrlQuery } from 'node:querystring';
 import { useRouter } from 'next/router';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { omit } from 'lodash';
 import { ContactsProvider } from 'src/components/Contacts/ContactsContext/ContactsContext';
 import { TableViewModeEnum } from 'src/components/Shared/Header/ListHeader';
 import {
@@ -66,7 +67,7 @@ export const ContactsWrapper: React.FC<Props> = ({
     }
   });
 
-  const [activeFilters, setActiveFilters] = useState<
+  const [activeFiltersRaw, setActiveFilters] = useState<
     ContactFilterSetInput & TaskFilterSetInput
   >(JSON.parse(decodeURIComponent(getQueryParam(query, 'filters') ?? '{}')));
   const [starredFilter, setStarredFilter] = useState<
@@ -77,12 +78,21 @@ export const ContactsWrapper: React.FC<Props> = ({
   );
   const [filterPanelOpen, setFilterPanelOpen] = useState(true);
 
+  // Only allow the ids filter in map view, and remove the ids filter in other views
+  const activeFilters = useMemo(() => {
+    if (viewMode === TableViewModeEnum.Map) {
+      return activeFiltersRaw;
+    } else {
+      return omit(activeFiltersRaw, 'ids');
+    }
+  }, [viewMode, activeFiltersRaw]);
+
   const getContactHrefObject: GetContactHrefObject = useCallback(
     (contactId) => {
       // Omit the filters and searchTerm from the previous query because we don't want them in the URL
       // if they are empty and Next.js will still add them to the URL query even if they are undefined.
       // i.e. { filters: undefined, searchTerm: '' } results in a querystring of ?filters=&searchTerm
-      const { filters: _filters, searchTerm: _searchTerm, ...newQuery } = query;
+      const newQuery = omit(query, ['filters', 'searchTerm']);
 
       const queryContactId: string[] = [];
       if (addViewMode && viewMode !== TableViewModeEnum.List) {
@@ -94,10 +104,7 @@ export const ContactsWrapper: React.FC<Props> = ({
       newQuery.contactId = queryContactId;
 
       const sanitizedFilters = sanitizeFilters(activeFilters);
-      if (
-        viewMode !== TableViewModeEnum.Map &&
-        Object.keys(sanitizedFilters).length
-      ) {
+      if (Object.keys(sanitizedFilters).length) {
         newQuery.filters = encodeURIComponent(JSON.stringify(sanitizedFilters));
       }