diff --git a/src/components/UI/SearchDialogBox/SearchDialogBox.tsx b/src/components/UI/SearchDialogBox/SearchDialogBox.tsx index aaf0330d5..669157db9 100644 --- a/src/components/UI/SearchDialogBox/SearchDialogBox.tsx +++ b/src/components/UI/SearchDialogBox/SearchDialogBox.tsx @@ -27,6 +27,7 @@ export interface SearchDialogBoxProps { fullWidth?: boolean; placeholder?: string; showTags?: boolean; + noOptionsText?: string; } export const SearchDialogBox = (props: SearchDialogBoxProps) => { @@ -51,6 +52,7 @@ export const SearchDialogBox = (props: SearchDialogBoxProps) => { fullWidth = false, showTags = true, placeholder, + noOptionsText, } = props; const [selectedOption, setSelectedOptions] = useState(multiple ? [] : null); @@ -71,12 +73,6 @@ export const SearchDialogBox = (props: SearchDialogBoxProps) => { } }, [selectedOptions, options]); - useEffect(() => { - if (asyncSearch === true) { - setAsyncSelectedOptions(selectedOptions); - } - }, [selectedOptions]); - const changeValue = (event: any, value: any) => { setSelectedOptions(value); if (multiple) { @@ -132,6 +128,7 @@ export const SearchDialogBox = (props: SearchDialogBoxProps) => { multiple={multiple} placeholder={placeholder} showTags={showTags} + noOptionsText={noOptionsText} />
diff --git a/src/containers/Chat/ChatMessages/AddToCollection/AddToCollection.test.tsx b/src/containers/Chat/ChatMessages/AddToCollection/AddToCollection.test.tsx index ea1f377f3..b0c980395 100644 --- a/src/containers/Chat/ChatMessages/AddToCollection/AddToCollection.test.tsx +++ b/src/containers/Chat/ChatMessages/AddToCollection/AddToCollection.test.tsx @@ -16,7 +16,10 @@ const mocks = [ getContactsSearchQuery, getContactsQuery, updateCollectionContactsQuery, - getExcludedContactsQuery('1'), + getExcludedContactsQuery({ + name: '', + excludeGroups: '1', + }), ]; setUserSession(JSON.stringify({ roles: ['Admin'] })); @@ -98,12 +101,11 @@ test('should add contact to collection', async () => { const groupsmocks = [ getCollectionContactsQuery, - getGroupsSearchQuery(setVariables({}, 50)), getGroupsQuery, updateCollectionWaGroupQuery({ input: { addWaGroupIds: ['5'], groupId: '1', deleteWaGroupIds: [] }, }), - getGroupsSearchQuery(setVariables({ excludeGroups: '1' }, 50)), + getGroupsSearchQuery(setVariables({ excludeGroups: '1', term: '' }, 50)), ]; const addGroups = ( diff --git a/src/containers/Chat/ChatMessages/AddToCollection/AddToCollection.tsx b/src/containers/Chat/ChatMessages/AddToCollection/AddToCollection.tsx index c4d01819b..0afefbec3 100644 --- a/src/containers/Chat/ChatMessages/AddToCollection/AddToCollection.tsx +++ b/src/containers/Chat/ChatMessages/AddToCollection/AddToCollection.tsx @@ -17,18 +17,24 @@ interface AddToCollectionProps { collectionId: string | undefined; setDialog: Function; groups?: boolean; + afterAdd?: Function; } -export const AddToCollection = ({ collectionId, setDialog, groups }: AddToCollectionProps) => { +export const AddToCollection = ({ + collectionId, + setDialog, + groups, + afterAdd, +}: AddToCollectionProps) => { const [contactSearchTerm, setContactSearchTerm] = useState(''); const { t } = useTranslation(); let searchquery = groups ? GET_WA_GROUPS : GET_CONTACTS_LIST; let updateMutation = groups ? UPDATE_COLLECTION_WA_GROUP : UPDATE_COLLECTION_CONTACTS; - const { data: entityData } = useQuery(searchquery, { + const { data: entityData, loading } = useQuery(searchquery, { variables: groups - ? setVariables({ excludeGroups: collectionId }, 50) + ? setVariables({ term: contactSearchTerm, excludeGroups: collectionId }, 50) : setVariables({ name: contactSearchTerm, excludeGroups: collectionId }, 50), fetchPolicy: 'cache-and-network', }); @@ -45,7 +51,9 @@ export const AddToCollection = ({ collectionId, setDialog, groups }: AddToCollec `${numberAdded} ${groups ? 'group' : 'contact'}${numberAdded === 1 ? '' : 's were'} added` ); } - + if (afterAdd) { + afterAdd(); + } setDialog(false); }, }); @@ -99,6 +107,7 @@ export const AddToCollection = ({ collectionId, setDialog, groups }: AddToCollec selectedOptions={[]} fullWidth={true} showTags={false} + noOptionsText={loading ? 'Loading...' : 'No options available'} onChange={(value: any) => { if (typeof value === 'string') { setContactSearchTerm(value); diff --git a/src/containers/Collection/CollectionContact/CollectionContactList/CollectionContactList.test.tsx b/src/containers/Collection/CollectionContact/CollectionContactList/CollectionContactList.test.tsx index 9d049ae58..48834420b 100644 --- a/src/containers/Collection/CollectionContact/CollectionContactList/CollectionContactList.test.tsx +++ b/src/containers/Collection/CollectionContact/CollectionContactList/CollectionContactList.test.tsx @@ -71,7 +71,10 @@ const mocks = [ orderWith: 'name', }, }), - getExcludedContactsQuery('1'), + getExcludedContactsQuery({ + name: '', + excludeGroups: '1', + }), ]; const wrapper = ( diff --git a/src/containers/Collection/CollectionList/CollectionList.test.tsx b/src/containers/Collection/CollectionList/CollectionList.test.tsx index cc8a4f107..22ea1ec3a 100644 --- a/src/containers/Collection/CollectionList/CollectionList.test.tsx +++ b/src/containers/Collection/CollectionList/CollectionList.test.tsx @@ -58,7 +58,14 @@ const mocks = [ updateCollectionWaGroupQuery({ input: { addWaGroupIds: ['1'], groupId: '1', deleteWaGroupIds: [] }, }), - getExcludedContactsQuery('1'), + getExcludedContactsQuery({ + name: '', + excludeGroups: '1', + }), + getExcludedContactsQuery({ + name: 'glific', + excludeGroups: '1', + }), ]; const wrapper = ( @@ -239,8 +246,7 @@ describe('', () => { filterCollectionQueryWAGroups, countCollectionQueryWAGroups, countCollectionQueryWAGroups, - getGroupsSearchQuery(setVariables({}, 50)), - getGroupsSearchQuery(setVariables({ label: '', excludeGroups: '1' }, 50)), + getGroupsSearchQuery(setVariables({ term: '', excludeGroups: '1' }, 50)), addGroupToCollectionList, filterCollectionQueryWAGroups, countCollectionQueryWAGroups, diff --git a/src/containers/Collection/CollectionList/CollectionList.tsx b/src/containers/Collection/CollectionList/CollectionList.tsx index 9318da541..e9a079aa0 100644 --- a/src/containers/Collection/CollectionList/CollectionList.tsx +++ b/src/containers/Collection/CollectionList/CollectionList.tsx @@ -1,24 +1,18 @@ import { useEffect, useState } from 'react'; -import { useLazyQuery, useMutation } from '@apollo/client'; +import { useLazyQuery } from '@apollo/client'; import { useTranslation } from 'react-i18next'; import CollectionIcon from 'assets/images/icons/Collection/Dark.svg?react'; import AddContactIcon from 'assets/images/icons/Contact/Add.svg?react'; import AddGroupIcon from 'assets/images/icons/AddGroupIcon.svg?react'; import ExportIcon from 'assets/images/icons/Flow/Export.svg?react'; -import { - DELETE_COLLECTION, - UPDATE_COLLECTION_CONTACTS, - UPDATE_COLLECTION_WA_GROUP, -} from 'graphql/mutations/Collection'; +import { DELETE_COLLECTION } from 'graphql/mutations/Collection'; import { GET_COLLECTIONS_COUNT, FILTER_COLLECTIONS, EXPORT_COLLECTION_DATA, } from 'graphql/queries/Collection'; -import { GET_CONTACTS_LIST } from 'graphql/queries/Contact'; import { List } from 'containers/List/List'; -import { SearchDialogBox } from 'components/UI/SearchDialogBox/SearchDialogBox'; import { getUserRolePermissions, getUserRole } from 'context/role'; import { setNotification } from 'common/notification'; import { @@ -26,15 +20,15 @@ import { CONTACTS_COLLECTION, GROUP_COLLECTION_SEARCH_QUERY_VARIABLES, WA_GROUPS_COLLECTION, - setVariables, } from 'common/constants'; import { CircularProgress, Modal } from '@mui/material'; import styles from './CollectionList.module.css'; import { exportCsvFile } from 'common/utils'; import { Link, useLocation, useNavigate } from 'react-router-dom'; import { collectionInfo } from 'common/HelpData'; -import { GET_WA_GROUPS, GROUP_SEARCH_QUERY } from 'graphql/queries/WaGroups'; +import { GROUP_SEARCH_QUERY } from 'graphql/queries/WaGroups'; import { SEARCH_QUERY } from 'graphql/queries/Search'; +import AddToCollection from 'containers/Chat/ChatMessages/AddToCollection/AddToCollection'; const getLabel = (label: string) =>
{label}
; @@ -61,29 +55,24 @@ const queries = { }; export const CollectionList = () => { - const navigate = useNavigate(); - const [updateCollection, setUpdateCollection] = useState(false); const [addContactsDialogShow, setAddContactsDialogShow] = useState(false); + const [updateCollection, setUpdateCollection] = useState(false); - const [contactSearchTerm, setContactSearchTerm] = useState(''); const [collectionId, setCollectionId] = useState(); const [exportData, setExportData] = useState(false); - const { t } = useTranslation(); const location = useLocation(); + const navigate = useNavigate(); + const { t } = useTranslation(); const groups: boolean = location.pathname.includes('group'); const [filter, setFilter] = useState<{ groupType: string; }>({ groupType: groups ? WA_GROUPS_COLLECTION : CONTACTS_COLLECTION }); - const entity = groups ? 'waGroups' : 'contacts'; - const entityQuery = groups ? GET_WA_GROUPS : GET_CONTACTS_LIST; - const searchQuery = groups ? GROUP_SEARCH_QUERY : SEARCH_QUERY; const searchVariables = groups ? GROUP_COLLECTION_SEARCH_QUERY_VARIABLES : COLLECTION_SEARCH_QUERY_VARIABLES; - const updateMutation = groups ? UPDATE_COLLECTION_WA_GROUP : UPDATE_COLLECTION_CONTACTS; useEffect(() => { setFilter({ groupType: groups ? WA_GROUPS_COLLECTION : CONTACTS_COLLECTION }); @@ -104,9 +93,6 @@ export const CollectionList = () => { columnStyles, }; - const [getContacts, { data: entityData }] = useLazyQuery(entityQuery, { - fetchPolicy: 'cache-and-network', - }); const [exportCollectionData] = useLazyQuery(EXPORT_COLLECTION_DATA, { onCompleted: (data) => { if (data.exportCollection.errors) { @@ -121,37 +107,11 @@ export const CollectionList = () => { }, }); - const [updateCollectionContacts] = useMutation(updateMutation, { - onCompleted: (data) => { - let updateVariable = groups ? 'updateCollectionWaGroup' : 'updateGroupContacts'; - const { groupContacts } = data[updateVariable]; - const numberAdded = groupContacts.length; - if (numberAdded > 0) { - setNotification( - `${numberAdded} ${groups ? 'group' : 'contact'}${numberAdded === 1 ? '' : 's were'} added` - ); - } - setUpdateCollection((updateCollection) => !updateCollection); - setAddContactsDialogShow(false); - }, - }); - const dialogMessage = t("You won't be able to use this collection again."); - let contactOptions: any = []; - - if (entityData) { - contactOptions = entityData[entity]; - } - let dialog = null; const setContactsDialog = (id: any) => { - getContacts({ - variables: groups - ? setVariables({ label: contactSearchTerm, excludeGroups: id }, 50) - : setVariables({ name: contactSearchTerm, excludeGroups: id }, 50), - }); setCollectionId(id); setAddContactsDialogShow(true); }; @@ -165,55 +125,15 @@ export const CollectionList = () => { }); }; - const handleCollectionAdd = (selectedContacts: any) => { - if (selectedContacts.length === 0) { - setAddContactsDialogShow(false); - } else { - const addvariable = groups ? 'addWaGroupIds' : 'addContactIds'; - const deletevariable = groups ? 'deleteWaGroupIds' : 'deleteContactIds'; - updateCollectionContacts({ - variables: { - input: { - [addvariable]: selectedContacts, - groupId: collectionId, - [deletevariable]: [], - }, - }, - }); - } - }; - - let searchDialogTitle = t('Add contacts to the collection'); - let selectPlaceHolder = t('Select contacts'); - - if (groups) { - searchDialogTitle = t('Add groups to the collection'); - selectPlaceHolder = t('Select groups'); - } - if (addContactsDialogShow) { dialog = ( - setAddContactsDialogShow(false)} - options={contactOptions} - optionLabel="name" - additionalOptionLabel="phone" - asyncSearch - disableClearable - selectedOptions={[]} - renderTags={false} - searchLabel="Search contacts" - textFieldPlaceholder="Type here" - onChange={(value: any) => { - if (typeof value === 'string') { - setContactSearchTerm(value); - } + { + setUpdateCollection((updateCollection) => !updateCollection); }} - fullWidth={true} - showTags={false} - placeholder={selectPlaceHolder} /> ); } diff --git a/src/mocks/Contact.tsx b/src/mocks/Contact.tsx index c2dd5866b..c1932e992 100644 --- a/src/mocks/Contact.tsx +++ b/src/mocks/Contact.tsx @@ -638,11 +638,11 @@ export const getGroupContact = { }, }; -export const getExcludedContactsQuery = (excludeGroups: any) => ({ +export const getExcludedContactsQuery = (filter?: any) => ({ request: { query: GET_CONTACTS_LIST, variables: { - filter: { name: '', excludeGroups }, + filter, opts: { limit: 50, offset: 0, order: 'ASC' }, }, },