Merge pull request #3100 from glific/fix/contacts-add

Fix: Unable to find contacts in add to collection
glific · Sep 27, 2024 · 6998192 · 6998192
2 parents 7523e69 + cfcb973
commit 6998192
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 124 deletions.
diff --git a/src/containers/Collection/CollectionContact/CollectionContactList/CollectionContactList.tsx b/src/containers/Collection/CollectionContact/CollectionContactList/CollectionContactList.tsx
@@ -1,25 +1,20 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom';
 
-import {
-  CONTACT_SEARCH_QUERY,
-  GET_CONTACTS_LIST,
-  GET_CONTACT_COUNT,
-} from 'graphql/queries/Contact';
+import { CONTACT_SEARCH_QUERY, GET_CONTACT_COUNT } from 'graphql/queries/Contact';
 import { UPDATE_COLLECTION_CONTACTS } from 'graphql/mutations/Collection';
 import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
 import DeleteIcon from 'assets/images/icons/Delete/Red.svg?react';
 import CollectionIcon from 'assets/images/icons/Collection/Dark.svg?react';
 import { List } from 'containers/List/List';
 import styles from './CollectionContactList.module.css';
-import { useLazyQuery, useMutation } from '@apollo/client';
-import { setVariables } from 'common/constants';
-import { SearchDialogBox } from 'components/UI/SearchDialogBox/SearchDialogBox';
+import { useMutation } from '@apollo/client';
 import { Button } from 'components/UI/Form/Button/Button';
 import { getContactStatus, getDisplayName } from 'common/utils';
 import { DialogBox } from 'components/UI/DialogBox/DialogBox';
 import { setNotification } from 'common/notification';
+import AddToCollection from 'containers/Chat/ChatMessages/AddToCollection/AddToCollection';
 
 export interface CollectionContactListProps {
   title: string;
@@ -72,43 +67,18 @@ export const CollectionContactList = ({
 }: CollectionContactListProps) => {
   const [addContactsDialogShow, setAddContactsDialogShow] = useState(false);
   const [removeContactsDialogShow, setRemoveContactsDialogShow] = useState(false);
-  const [contactSearchTerm, setContactSearchTerm] = useState('');
   const [selectedContacts, setSelectedContact] = useState<any>([]);
   const [contactsToRemove, setContactsToRemove] = useState<any>([]);
-  const [contactOptions, setContactOptions] = useState<any>([]);
+  const [updateCollection, setUpdateCollection] = useState(false);
 
   const { t } = useTranslation();
   const params = useParams();
 
   const collectionId = params.id;
   let dialog;
 
-  const [getContacts, { data: contactsData }] = useLazyQuery(GET_CONTACTS_LIST, {
-    fetchPolicy: 'cache-and-network',
-  });
-
   const [updateCollectionContacts] = useMutation(UPDATE_COLLECTION_CONTACTS);
 
-  const handleCollectionAdd = (selectedContacts: any) => {
-    if (selectedContacts.length === 0) {
-      setAddContactsDialogShow(false);
-    } else {
-      updateCollectionContacts({
-        variables: {
-          input: {
-            addContactIds: selectedContacts,
-            groupId: collectionId,
-            deleteContactIds: [],
-          },
-        },
-        onCompleted: () => {
-          setNotification(t('Contact has been added successfully to the collection.'), 'success');
-        },
-      });
-    }
-    setAddContactsDialogShow(false);
-  };
-
   const handleCollectionRemove = () => {
     const idsToRemove = selectedContacts.map((collection: any) => collection.id);
     updateCollectionContacts({
@@ -121,6 +91,7 @@ export const CollectionContactList = ({
       },
       onCompleted: () => {
         setNotification(t('Contact has been removed successfully from the collection.'), 'success');
+        setUpdateCollection(!updateCollection);
       },
     });
     setRemoveContactsDialogShow(false);
@@ -132,36 +103,14 @@ export const CollectionContactList = ({
     setSelectedContact(selectedContacts);
   };
 
-  useEffect(() => {
-    if (contactsData) {
-      setContactOptions(contactsData.contacts);
-    }
-  }, [contactsData]);
-
   if (addContactsDialogShow) {
     dialog = (
-      <SearchDialogBox
-        title={t('Add contacts to collection')}
-        handleOk={handleCollectionAdd}
-        handleCancel={() => setAddContactsDialogShow(false)}
-        options={contactOptions}
-        optionLabel="name"
-        additionalOptionLabel="phone"
-        asyncSearch
-        colorOk="primary"
-        buttonOk="Add"
-        disableClearable
-        searchLabel="Search contacts"
-        textFieldPlaceholder="Type here"
-        onChange={(value: any) => {
-          if (typeof value === 'string') {
-            setContactSearchTerm(value);
-          }
+      <AddToCollection
+        collectionId={collectionId}
+        setDialog={setAddContactsDialogShow}
+        afterAdd={() => {
+          setUpdateCollection(!updateCollection);
         }}
-        selectedOptions={[]}
-        fullWidth={true}
-        showTags={false}
-        placeholder="Select contacts"
       />
     );
   }
@@ -193,9 +142,6 @@ export const CollectionContactList = ({
       color="primary"
       data-testid="addBtn"
       onClick={() => {
-        getContacts({
-          variables: setVariables({ name: contactSearchTerm, excludeGroups: collectionId }, 50),
-        });
         setAddContactsDialogShow(true);
       }}
     >
@@ -245,6 +191,7 @@ export const CollectionContactList = ({
         }}
         {...queries}
         {...columnAttributes}
+        refreshList={updateCollection}
       />
     </>
   );

diff --git a/src/containers/WaGroups/GroupCollections/GroupCollectionList.test.tsx b/src/containers/WaGroups/GroupCollections/GroupCollectionList.test.tsx
@@ -32,7 +32,7 @@ const mocks = [
   countGroups,
   getGroupsCollectionList(getCollectionsVariables),
   getGroupsCollectionList(getCollectionsVariables),
-  getGroupsSearchQuery(setVariables({ excludeGroups: '1' }, 50)),
+  getGroupsSearchQuery(setVariables({ excludeGroups: '1', term: '' }, 50)),
   getGroupsSearchQuery(setVariables({ excludeGroups: '1' }, 50)),
   updateCollectionWaGroupQuery({
     input: { addWaGroupIds: ['1'], groupId: '1', deleteWaGroupIds: [] },

diff --git a/src/containers/WaGroups/GroupCollections/GroupCollectionList.tsx b/src/containers/WaGroups/GroupCollections/GroupCollectionList.tsx
@@ -1,7 +1,7 @@
 import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom';
 
-import { GET_GROUP_COUNT, GET_WA_GROUPS } from 'graphql/queries/WaGroups';
+import { GET_GROUP_COUNT } from 'graphql/queries/WaGroups';
 import {
   UPDATE_COLLECTION_WA_GROUP,
   UPDATE_WA_GROUP_COLLECTION,
@@ -13,13 +13,12 @@ import { List } from 'containers/List/List';
 import styles from './GroupCollectionList.module.css';
 
 import { GET_COLLECTION, GROUP_GET_COLLECTION } from 'graphql/queries/Collection';
-import { useLazyQuery, useMutation, useQuery } from '@apollo/client';
+import { useMutation, useQuery } from '@apollo/client';
 import { useState } from 'react';
-import { setVariables } from 'common/constants';
 import { setNotification } from 'common/notification';
-import { SearchDialogBox } from 'components/UI/SearchDialogBox/SearchDialogBox';
 import { Button } from 'components/UI/Form/Button/Button';
 import { DialogBox } from 'components/UI/DialogBox/DialogBox';
+import AddToCollection from 'containers/Chat/ChatMessages/AddToCollection/AddToCollection';
 
 const getName = (label: string) => (
   <div>
@@ -51,9 +50,9 @@ const columnAttributes = {
 export const GroupCollectionList = () => {
   const [addGroupsDialogShow, setAddGroupsDialogShow] = useState(false);
   const [removeGroupsDialogShow, setRemoveGroupsDialogShow] = useState(false);
-  const [groupSearchTerm, setGroupSearchTerm] = useState('');
   const [selectedGroups, setSelectedGroup] = useState<any>([]);
   const [groupsToRemove, setGroupsToRemove] = useState<any>([]);
+  const [updateCollection, setUpdateCollection] = useState(false);
   const { t } = useTranslation();
   const params = useParams();
 
@@ -63,32 +62,8 @@ export const GroupCollectionList = () => {
     fetchPolicy: 'cache-and-network',
   });
 
-  const [getGroups, { data: groupsData }] = useLazyQuery(GET_WA_GROUPS, {
-    fetchPolicy: 'cache-and-network',
-  });
-
   const [updateCollectionGroups] = useMutation(UPDATE_COLLECTION_WA_GROUP);
 
-  const handleCollectionAdd = (selectedGroups: any) => {
-    if (selectedGroups.length === 0) {
-      setAddGroupsDialogShow(false);
-    } else {
-      updateCollectionGroups({
-        variables: {
-          input: {
-            addWaGroupIds: selectedGroups,
-            groupId: collectionId,
-            deleteWaGroupIds: [],
-          },
-        },
-        onCompleted: () => {
-          setNotification(t('Group has been added successfully to the collection.'), 'success');
-        },
-      });
-    }
-    setAddGroupsDialogShow(false);
-  };
-
   const handleCollectionRemove = () => {
     const idsToRemove = selectedGroups.map((collection: any) => collection.id);
     updateCollectionGroups({
@@ -101,6 +76,7 @@ export const GroupCollectionList = () => {
       },
       onCompleted: () => {
         setNotification(t('Group has been removed successfully from the collection.'), 'success');
+        setUpdateCollection(!updateCollection);
       },
     });
     setRemoveGroupsDialogShow(false);
@@ -115,34 +91,14 @@ export const GroupCollectionList = () => {
   let dialog;
 
   if (addGroupsDialogShow) {
-    let groupsOptions: any = [];
-    if (groupsData) {
-      groupsOptions = groupsData.waGroups;
-    }
-
     dialog = (
-      <SearchDialogBox
-        title={t('Add groups to collection')}
-        handleOk={handleCollectionAdd}
-        handleCancel={() => setAddGroupsDialogShow(false)}
-        options={groupsOptions}
-        optionLabel="name"
-        additionalOptionLabel="phone"
-        asyncSearch
-        colorOk="primary"
-        buttonOk="Add"
-        disableClearable={true}
-        searchLabel="Search groups"
-        textFieldPlaceholder="Type here"
-        onChange={(value: any) => {
-          if (typeof value === 'string') {
-            setGroupSearchTerm(value);
-          }
+      <AddToCollection
+        groups
+        collectionId={collectionId}
+        setDialog={setAddGroupsDialogShow}
+        afterAdd={() => {
+          setUpdateCollection(!updateCollection);
         }}
-        selectedOptions={[]}
-        fullWidth={true}
-        showTags={false}
-        placeholder="Select groups"
       />
     );
   }
@@ -153,9 +109,6 @@ export const GroupCollectionList = () => {
       color="primary"
       data-testid="addBtn"
       onClick={() => {
-        getGroups({
-          variables: setVariables({ excludeGroups: collectionId }, 50),
-        });
         setAddGroupsDialogShow(true);
       }}
     >
@@ -223,6 +176,7 @@ export const GroupCollectionList = () => {
         }}
         {...queries}
         {...columnAttributes}
+        refreshList={updateCollection}
       />
     </>
   );