Added toast on delete action (#1170)

* Added toast on delete action

* Achieved 100% test coverage

* add confirm model and updated the test

* a small commit

* added other language

public/locales/en.json

@@ -679,7 +679,11 @@
     "EXname": "Ex. Cookie Shop",
     "EXlink": "Ex. http://yourwebsite.com/photo",
     "register": "Create Advertisement",
-    "close": "Close "
+    "close": "Close ",
+    "deleteAdvertisement": "Delete Advertisement",
+    "deleteAdvertisementMsg": "Do you want to remove this advertisement?",
+    "no": "No",
+    "yes": "Yes"
   },
   "userChat": {
     "chat": "Chat",

public/locales/fr.json

@@ -657,7 +657,12 @@
     "activeAds": "Campagnes actives",
     "archievedAds": "Campagnes terminées",
     "pMessage": "Aucune publicité n'est présente pour cette campagne.",
-    "delete": "Supprimer"
+    "delete": "Supprimer",
+    "close": "Fermer",
+    "deleteAdvertisement": "Supprimer l'annonce",
+    "deleteAdvertisementMsg": "Voulez-vous supprimer cette annonce ?",
+    "no": "Non",
+    "yes": "Oui"
   },
   "userChat": {
     "chat": "Chat",

public/locales/hi.json

@@ -657,7 +657,12 @@
     "activeAds": "सक्रिय अभियान",
     "archievedAds": "संपन्न अभियान",
     "pMessage": "इस अभियान के लिए कोई विज्ञापन नहीं हैं।",
-    "delete": "हटाएँ"
+    "delete": "हटाएँ",
+    "close": "बंद करें",
+    "deleteAdvertisement": "विज्ञापन हटाएं",
+    "deleteAdvertisementMsg": "क्या आप इस विज्ञापन को हटाना चाहते हैं?",
+    "no": "नहीं",
+    "yes": "हाँ"
   },
   "userChat": {
     "chat": "बात",

public/locales/sp.json

@@ -657,7 +657,12 @@
     "activeAds": "Campañas activas",
     "archievedAds": "Campañas completadas",
     "pMessage": "No hay anuncios disponibles para esta campaña.",
-    "delete": "Eliminar"
+    "delete": "Eliminar",
+    "close": "Cerrar",
+    "deleteAdvertisement": "Eliminar anuncio",
+    "deleteAdvertisementMsg": "¿Desea eliminar este anuncio?",
+    "no": "No",
+    "yes": "Sí"
   },
   "userChat": {
     "chat": "Charlar",

public/locales/zh.json

@@ -657,7 +657,12 @@
     "activeAds": "活动广告",
     "archievedAds": "已完成的广告活动",
     "pMessage": "此广告活动没有相关广告。",
-    "delete": "删除"
+    "delete": "删除",
+    "close": "关闭",
+    "deleteAdvertisement": "删除广告",
+    "deleteAdvertisementMsg": "您是否要删除此广告？",
+    "no": "不",
+    "yes": "是"
   },
   "userChat": {
     "chat": "聊天",

src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, fireEvent, waitFor, screen } from '@testing-library/react';
 
 import {
   ApolloClient,
@@ -29,8 +29,20 @@ const client: ApolloClient<NormalizedCacheObject> = new ApolloClient({
   cache: new InMemoryCache(),
   link: ApolloLink.from([httpLink]),
 });
+
+const mockUseMutation = jest.fn();
+jest.mock('@apollo/client', () => {
+  const originalModule = jest.requireActual('@apollo/client');
+  return {
+    ...originalModule,
+    useMutation: () => mockUseMutation(),
+  };
+});
+
 describe('Testing Advertisement Entry Component', () => {
-  test('Temporary test for Advertisement Entry', () => {
+  test('Temporary test for Advertisement Entry', async () => {
+    const deleteAdByIdMock = jest.fn();
+    mockUseMutation.mockReturnValue([deleteAdByIdMock]);
     const { getByTestId, getAllByText } = render(
       <ApolloProvider client={client}>
         <Provider store={store}>
@@ -56,5 +68,49 @@ describe('Testing Advertisement Entry Component', () => {
     expect(getByTestId('AdEntry')).toBeInTheDocument();
     expect(getAllByText('POPUP')[0]).toBeInTheDocument();
     expect(getAllByText('Advert1')[0]).toBeInTheDocument();
+
+    fireEvent.click(getByTestId('AddOnEntry_btn_install'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('delete_title')).toBeInTheDocument();
+      expect(screen.getByTestId('delete_body')).toBeInTheDocument();
+    });
+
+    fireEvent.click(getByTestId('AddOnEntry_btn_install'));
+
+    fireEvent.click(getByTestId('AddOnEntry_btn_install'));
+
+    fireEvent.click(getByTestId('delete_yes'));
+
+    await waitFor(() => {
+      expect(deleteAdByIdMock).toHaveBeenCalledWith({
+        variables: {
+          id: '1',
+        },
+      });
+      const deletedMessage = screen.queryByText('Advertisement Deleted');
+      expect(deletedMessage).toBeNull();
+    });
+
+    deleteAdByIdMock.mockRejectedValueOnce(new Error('Deletion Failed'));
+
+    fireEvent.click(getByTestId('AddOnEntry_btn_install'));
+
+    fireEvent.click(getByTestId('delete_yes'));
+
+    await waitFor(() => {
+      expect(deleteAdByIdMock).toHaveBeenCalledWith({
+        variables: {
+          id: '1',
+        },
+      });
+      const deletionFailedText = screen.queryByText((content, element) => {
+        return (
+          element?.textContent === 'Deletion Failed' &&
+          element.tagName.toLowerCase() === 'div'
+        );
+      });
+      expect(deletionFailedText).toBeNull();
+    });
   });
 });

src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.tsx

@@ -1,11 +1,12 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import styles from './AdvertisementEntry.module.css';
-import { Button, Card, Col, Row, Spinner } from 'react-bootstrap';
+import { Button, Card, Col, Row, Spinner, Modal } from 'react-bootstrap';
 import { DELETE_ADVERTISEMENT_BY_ID } from 'GraphQl/Mutations/mutations';
 import { useMutation } from '@apollo/client';
 import { useTranslation } from 'react-i18next';
 import { ADVERTISEMENTS_GET } from 'GraphQl/Queries/Queries';
+import { toast } from 'react-toastify';
 interface InterfaceAddOnEntryProps {
   id: string;
   name: string;
@@ -28,18 +29,27 @@ function advertisementEntry({
 }: InterfaceAddOnEntryProps): JSX.Element {
   const { t } = useTranslation('translation', { keyPrefix: 'advertisement' });
   const [buttonLoading, setButtonLoading] = useState(false);
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
+
   const [deleteAdById] = useMutation(DELETE_ADVERTISEMENT_BY_ID, {
     refetchQueries: [ADVERTISEMENTS_GET],
   });
 
+  const toggleShowDeleteModal = (): void => setShowDeleteModal((prev) => !prev);
   const onDelete = async (): Promise<void> => {
     setButtonLoading(true);
-    await deleteAdById({
-      variables: {
-        id: id.toString(),
-      },
-    });
-    setButtonLoading(false);
+    try {
+      await deleteAdById({
+        variables: {
+          id: id.toString(),
+        },
+      });
+      toast.error('Advertisement Deleted');
+      setButtonLoading(false);
+    } catch (error: any) {
+      toast.error(error.message);
+      setButtonLoading(false);
+    }
   };
   return (
     <>
@@ -59,15 +69,13 @@ function advertisementEntry({
                 <Card.Subtitle className="mb-2 text-muted author">
                   {type}
                 </Card.Subtitle>
-                <Card.Text>{link} </Card.Text>
+                <Card.Text>{link}</Card.Text>
                 <Button
                   className={styles.entryaction}
-                  variant="primary"
+                  variant="danger"
                   disabled={buttonLoading}
                   data-testid="AddOnEntry_btn_install"
-                  onClick={(): void => {
-                    onDelete();
-                  }}
+                  onClick={toggleShowDeleteModal}
                 >
                   {buttonLoading ? (
                     <Spinner animation="grow" />
@@ -76,6 +84,34 @@ function advertisementEntry({
                   )}
                   {t('delete')}
                 </Button>
+                <Modal show={showDeleteModal} onHide={toggleShowDeleteModal}>
+                  <Modal.Header>
+                    <h5 data-testid="delete_title">
+                      {t('deleteAdvertisement')}
+                    </h5>
+                    <Button variant="danger" onClick={toggleShowDeleteModal}>
+                      <i className="fa fa-times"></i>
+                    </Button>
+                  </Modal.Header>
+                  <Modal.Body data-testid="delete_body">
+                    {t('deleteAdvertisementMsg')}
+                  </Modal.Body>
+                  <Modal.Footer>
+                    <Button variant="danger" onClick={toggleShowDeleteModal}>
+                      {t('no')}
+                    </Button>
+                    <Button
+                      type="button"
+                      className="btn btn-success"
+                      onClick={(): void => {
+                        onDelete();
+                      }}
+                      data-testid="delete_yes"
+                    >
+                      {t('yes')}
+                    </Button>
+                  </Modal.Footer>
+                </Modal>
               </Card.Body>
             </Card>
           </Col>