diff --git a/src/components/Contacts/ContactDetails/ContactDetailsTab/Tags/ContactTags.tsx b/src/components/Contacts/ContactDetails/ContactDetailsTab/Tags/ContactTags.tsx index bfced5220..204d294cf 100644 --- 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 = ({ 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 index 059c4ac43..32a47f141 100644 --- 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 index 5c278ae36..de9d69e39 100644 --- 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 = ({ 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 index c5cc52801..4a84613f7 100644 --- 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 = ({ 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 = ({ page, }, refetchQueries: [ - { - query: - page === 'contacts' ? ContactFiltersDocument : TaskFiltersDocument, - variables: { accountListId }, - }, + page === 'contacts' ? ContactFiltersDocument : TaskFiltersDocument, ], onCompleted: () => { enqueueSnackbar(t('Tag deleted!'), {