Preserve the active filters when switching to map view

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

src/components/Contacts/ContactsContext/ContactsContext.tsx

@@ -161,18 +161,14 @@ export const ContactsProvider: React.FC<ContactsContextProps> = ({
     }
   }, [contactsView]);
 
-  const contactsFilters = useMemo(() => {
-    // Remove filters in the map view
-    const viewFilters =
-      viewMode === TableViewModeEnum.Map
-        ? { ids: sanitizedFilters.ids }
-        : sanitizedFilters;
-    return {
-      ...viewFilters,
+  const contactsFilters = useMemo(
+    () => ({
+      ...sanitizedFilters,
       ...starredFilter,
       wildcardSearch: searchTerm as string,
-    };
-  }, [sanitizedFilters, viewMode, starredFilter, searchTerm]);
+    }),
+    [sanitizedFilters, starredFilter, searchTerm],
+  );
 
   const contactsQueryResult = useContactsQuery({
     variables: {
@@ -262,12 +258,9 @@ export const ContactsProvider: React.FC<ContactsContextProps> = ({
   ) => {
     const newViewMode = view as TableViewModeEnum;
     saveContactsView(newViewMode);
-    if (newViewMode === TableViewModeEnum.Map) {
+    if (newViewMode === TableViewModeEnum.Map && ids.length) {
       // When switching to the map, make the filter only show the selected contacts, if any
-      setActiveFilters({ ids });
-    } else if (viewMode === TableViewModeEnum.Map) {
-      // When switching away from the map, reset the filter to show all contacts
-      setActiveFilters({});
+      setActiveFilters({ ...activeFilters, ids });
     }
   };
   //#endregion