Merge pull request #1179 from CruGlobal/hs-1251563-tags-issues

[HS-1251563] Sort and refresh contact tags
CruGlobal · Nov 6, 2024 · d8e2ed0 · d8e2ed0
2 parents 5bd236b + 0c270a4
commit d8e2ed0
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 15 deletions.
diff --git a/src/components/Contacts/ContactDetails/ContactDetailsTab/Tags/ContactTags.tsx b/src/components/Contacts/ContactDetails/ContactDetailsTab/Tags/ContactTags.tsx
@@ -5,6 +5,7 @@ import { Formik, FormikHelpers } from 'formik';
 import { useSnackbar } from 'notistack';
 import { useTranslation } from 'react-i18next';
 import * as yup from 'yup';
+import { ContactFiltersDocument } from 'pages/accountLists/[accountListId]/contacts/Contacts.generated';
 import { ContactTagIcon, ContactTagInput } from 'src/components/Tags/Tags';
 import {
   useGetContactTagListQuery,
@@ -112,12 +113,19 @@ export const ContactTags: React.FC<ContactTagsProps> = ({
       return;
     }
 
+    // If a tag is in the list that isn't in contactTagList, it is a new tag, which means we need to
+    // refetch the contact filters
+    const newTag = tagList.some(
+      (tag) => !contactTagsList?.accountList.contactTagList.includes(tag),
+    );
+
     const { data } = await updateContactTags({
       variables: {
         accountListId,
         contactId,
         tagList: [...contactTags, ...tagList],
       },
+      refetchQueries: newTag ? [ContactFiltersDocument] : [],
       optimisticResponse: {
         updateContact: {
           __typename: 'ContactUpdateMutationPayload',

diff --git a/src/components/Contacts/MassActions/AddTags/MassActionsAddTagsModal.tsx b/src/components/Contacts/MassActions/AddTags/MassActionsAddTagsModal.tsx
@@ -14,7 +14,10 @@ import { Formik } from 'formik';
 import { useSnackbar } from 'notistack';
 import { useTranslation } from 'react-i18next';
 import * as yup from 'yup';
-import { ContactsDocument } from 'pages/accountLists/[accountListId]/contacts/Contacts.generated';
+import {
+  ContactFiltersDocument,
+  ContactsDocument,
+} from 'pages/accountLists/[accountListId]/contacts/Contacts.generated';
 import { ContactTagIcon, ContactTagInput } from 'src/components/Tags/Tags';
 import {
   CancelButton,
@@ -100,6 +103,13 @@ export const MassActionsAddTagsModal: React.FC<
         id: contact.id,
         tagList: [...new Set([...tags, ...contact.tagList])],
       })) ?? [];
+
+    // If a tag is in the list that isn't in contactTagList, it is a new tag, which means we need to
+    // refetch the contact filters
+    const newTag = tags.some(
+      (tag) => !contactTagsList?.accountList.contactTagList.includes(tag),
+    );
+
     await contactsAddTags({
       variables: {
         accountListId,
@@ -110,6 +120,7 @@ export const MassActionsAddTagsModal: React.FC<
           query: ContactsDocument,
           variables: { accountListId },
         },
+        ...(newTag ? [ContactFiltersDocument] : []),
       ],
     });
     enqueueSnackbar(t('Tags added to contacts!'), {

diff --git a/src/components/Shared/Filters/FilterPanel.tsx b/src/components/Shared/Filters/FilterPanel.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import Close from '@mui/icons-material/Close';
 import DeleteIcon from '@mui/icons-material/Delete';
 import ExpandMore from '@mui/icons-material/ExpandMore';
@@ -37,7 +37,6 @@ import {
   ContactFilterSetInput,
   ContactFilterStatusEnum,
   FilterGroup,
-  MultiselectFilter,
   ReportContactFilterSetInput,
   ResultEnum,
   TaskFilterSetInput,
@@ -590,11 +589,17 @@ export const FilterPanel: React.FC<FilterPanelProps & BoxProps> = ({
     clearSelectedFilter();
   };
 
-  const tagsFilters =
-    (
-      filters.find((filter) => filter?.filters[0]?.filterKey === 'tags')
-        ?.filters[0] as MultiselectFilter
-    )?.options ?? [];
+  const tagsFilters = useMemo(() => {
+    const tags = filters.find(
+      (filter) => filter?.filters[0]?.filterKey === 'tags',
+    )?.filters[0];
+    if (tags?.__typename === 'MultiselectFilter' && tags.options) {
+      return [...tags.options].sort((tag1, tag2) =>
+        tag1.name.localeCompare(tag2.name),
+      );
+    }
+    return [];
+  }, [filter]);
   const noSelectedFilters =
     Object.keys(sanitizeFilters(selectedFilters)).length === 0;
 

diff --git a/src/components/Shared/Filters/TagsSection/FilterTagDeleteModal.tsx b/src/components/Shared/Filters/TagsSection/FilterTagDeleteModal.tsx
@@ -7,7 +7,6 @@ import { ContactFiltersDocument } from 'pages/accountLists/[accountListId]/conta
 import { TaskFiltersDocument } from 'pages/accountLists/[accountListId]/tasks/Tasks.generated';
 import { DeleteButton } from 'src/components/common/Modal/ActionButtons/ActionButtons';
 import Modal from 'src/components/common/Modal/Modal';
-import { useAccountListId } from 'src/hooks/useAccountListId';
 import { useDeleteTagMutation } from './Chip/DeleteTag.generated';
 
 interface FilterTagDeleteModalProps {
@@ -24,7 +23,6 @@ export const FilterTagDeleteModal: React.FC<FilterTagDeleteModalProps> = ({
   const { t } = useTranslation();
   const { route } = useRouter();
   const [deleteTag, { loading: deleting }] = useDeleteTagMutation();
-  const accountListId = useAccountListId();
   const { enqueueSnackbar } = useSnackbar();
 
   const page = route.split('/')[3];
@@ -36,11 +34,7 @@ export const FilterTagDeleteModal: React.FC<FilterTagDeleteModalProps> = ({
         page,
       },
       refetchQueries: [
-        {
-          query:
-            page === 'contacts' ? ContactFiltersDocument : TaskFiltersDocument,
-          variables: { accountListId },
-        },
+        page === 'contacts' ? ContactFiltersDocument : TaskFiltersDocument,
       ],
       onCompleted: () => {
         enqueueSnackbar(t('Tag deleted!'), {