fix loading state of modal button

airqo-platform · Nov 23, 2023 · 1a2b5bb · 1a2b5bb
1 parent ecc4183
commit 1a2b5bb
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 33 deletions.
diff --git a/platform/src/common/components/Collocation/DeviceStatus/Table/DataTable.jsx b/platform/src/common/components/Collocation/DeviceStatus/Table/DataTable.jsx
@@ -45,6 +45,7 @@ const DataTable = ({ filteredData, collocationDevices, isLoading }) => {
   const [collocationInput, setCollocationInput] = useState({
     devices: null,
     batchId: '',
+    batchName: '',
   });
   const [skip, setSkip] = useState(true);
   const [clickedRowIndex, setClickedRowIndex] = useState(null);
@@ -107,17 +108,17 @@ const DataTable = ({ filteredData, collocationDevices, isLoading }) => {
 
   // This function is to delete batch
   const deleteBatch = async () => {
-    const { device, batchId } = collocationInput;
+    const { device, batchId, batchName } = collocationInput;
     const data = {
       batchId: batchId,
     };
 
-    createAxiosInstance()
+    await createAxiosInstance()
       .delete(DELETE_COLLOCATION_DEVICE, { params: data })
       .then((response) => {
-        dispatch(getDeviceStatusSummary());
         setVisible(false);
-        setSuccessMessage(`Succesfully deleted batch ${batchId}`);
+        dispatch(getDeviceStatusSummary());
+        setSuccessMessage(`Succesfully deleted batch ${batchName}`);
       })
       .catch((error) => {
         setVisible(false);
@@ -127,18 +128,18 @@ const DataTable = ({ filteredData, collocationDevices, isLoading }) => {
 
   // This function is to delete device
   const deleteDevice = async () => {
-    const { device, batchId } = collocationInput;
+    const { device, batchId, batchName } = collocationInput;
     const data = {
       batchId: batchId,
       devices: device,
     };
 
-    createAxiosInstance()
+    await createAxiosInstance()
       .delete(DELETE_COLLOCATION_DEVICE, { params: data })
       .then((response) => {
-        dispatch(getDeviceStatusSummary());
         setVisibleDeleteDevice(false);
-        setSuccessMessage(`Succesfully deleted device ${device}`);
+        dispatch(getDeviceStatusSummary());
+        setSuccessMessage(`Succesfully deleted device ${device} from batch ${batchName}`);
       })
       .catch((error) => {
         setVisibleDeleteDevice(false);
@@ -163,7 +164,7 @@ const DataTable = ({ filteredData, collocationDevices, isLoading }) => {
   ]);
 
   const handleItemClick = (id, device, index) => {
-    const { device_name, batch_id } = device;
+    const { device_name, batch_id, batch_name } = device;
     switch (id) {
       case 1:
         openMonitorReport(device_name, batch_id, index);
@@ -173,13 +174,15 @@ const DataTable = ({ filteredData, collocationDevices, isLoading }) => {
         setCollocationInput({
           device: device_name,
           batchId: batch_id,
+          batchName: batch_name,
         });
         break;
       case 3:
         setVisibleDeleteDevice(true);
         setCollocationInput({
           device: device_name,
           batchId: batch_id,
+          batchName: batch_name,
         });
         break;
       default:
@@ -337,9 +340,9 @@ const DataTable = ({ filteredData, collocationDevices, isLoading }) => {
         <div data-testid='delete_modal'>
           <Modal
             display={visible}
-            handleConfirm={deleteBatch}
+            handleConfirm={() => deleteBatch()}
             closeModal={() => setVisible(false)}
-            description={`Are you sure you want to delete this collocation batch ${collocationInput.batchId}?`}
+            description={`Are you sure you want to delete this collocation batch ${collocationInput.batchName}?`}
             confirmButton='Delete'
           />
         </div>
@@ -363,7 +366,7 @@ const DataTable = ({ filteredData, collocationDevices, isLoading }) => {
         <div data-testid='delete_modal'>
           <Modal
             display={visibleDeleteDevice}
-            handleConfirm={deleteDevice}
+            handleConfirm={() => deleteDevice()}
             closeModal={() => setVisibleDeleteDevice(false)}
             description={`Are you sure you want to delete ${collocationInput.device} from the collocation batch?`}
             confirmButton='Delete'

diff --git a/platform/src/common/components/Modal/Modal.jsx b/platform/src/common/components/Modal/Modal.jsx
@@ -1,20 +1,19 @@
 import React, { useState } from 'react';
-
 import Close from '@/icons/Actions/close.svg';
-import Exclamation from '@/icons/Actions/exclamation.svg';
-import Image from 'next/image';
+import Button from '@/components/Button';
 
 const Modal = ({ description, confirmButton, handleConfirm, display, closeModal }) => {
   const [loading, setLoading] = useState(false);
+  console.log(loading);
   const handleClick = async () => {
     setLoading(true);
     try {
       await handleConfirm();
     } catch (error) {
       throw error;
-    } finally {
-      setLoading(false);
     }
+
+    setLoading(false);
   };
 
   return (
@@ -40,28 +39,26 @@ const Modal = ({ description, confirmButton, handleConfirm, display, closeModal
             <h3 className='mb-5 text-lg font-normal text-gray-500 dark:text-gray-400'>
               {description}
             </h3>
-            <div>
+            <div className='flex space-x-3'>
               {confirmButton && (
-                <button
-                  onClick={handleClick}
+                <Button
+                  className='text-sm font-medium capitalize'
+                  variant={loading ? 'disabled' : 'filled'}
                   disabled={loading}
-                  type='button'
-                  className={`${
-                    loading
-                      ? 'text-secondary-neutral-light-900 bg-secondary-neutral-light-25'
-                      : 'text-white bg-red-600 hover:bg-red-800 focus:ring-red-300'
-                  } focus:ring-opacity-50 focus:outline-none font-medium rounded-lg text-sm inline-flex items-center px-5 py-2.5 text-center mr-2 cursor-pointer transform transition hover:scale-[1.05]`}
+                  onClick={handleClick}
                 >
-                  {confirmButton}
-                </button>
+                  {loading ? 'Loading...' : 'Delete'}
+                </Button>
               )}
-              <button
+
+              <Button
+                className='text-sm font-medium capitalize'
+                variant='outlined'
+                disabled={loading}
                 onClick={closeModal}
-                type='button'
-                className='text-gray-500 bg-white hover:bg-gray-100 focus:ring-gray-200 focus:ring-opacity-50 focus:outline-none rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 cursor-pointer transform transition hover:scale-[1.05]'
               >
                 Cancel
-              </button>
+              </Button>
             </div>
           </div>
         </div>

diff --git a/platform/src/core/urls/deviceMonitoring.js b/platform/src/core/urls/deviceMonitoring.js
@@ -5,4 +5,4 @@ const BASE_DEVICE_MONITORING_URL = stripTrailingSlash(process.env.NEXT_PUBLIC_AP
 
 export const COLLOCATION = `${BASE_DEVICE_MONITORING_URL}/monitor/collocation`;
 
-export const DELETE_COLLOCATION_DEVICE = `${COLLOCATION}?TOKEN=${NEXT_PUBLIC_API_TOKEN}`;
+export const DELETE_COLLOCATION_DEVICE = `${COLLOCATION}`;
Original file line number	Diff line number	Diff line change
Expand Up		@@ -5,4 +5,4 @@ const BASE_DEVICE_MONITORING_URL = stripTrailingSlash(process.env.NEXT_PUBLIC_AP

		export const COLLOCATION = `${BASE_DEVICE_MONITORING_URL}/monitor/collocation`;

		export const DELETE_COLLOCATION_DEVICE = `${COLLOCATION}?TOKEN=${NEXT_PUBLIC_API_TOKEN}`;
		export const DELETE_COLLOCATION_DEVICE = `${COLLOCATION}`;