reloads card list on successful card delete

src/components/Settings/Tabs/CardList.jsx

@@ -11,6 +11,9 @@ import DeleteCardPopout from './DeleteCardPopout';
 
 function CardList() {
     const api = new usersService();
+    
+    const [reloadCardList, setReloadCardList] = useState(false) // STATE TO DETERMINE WHEN CARD LIST RELOADS. EG: WHEN USER DELETES A CARD
+
   const [cardList, setCardList] = useState({loading: true, data: []})
 
   const [deleteCardModal, setDeleteCardModal] = useState({show: false, data: {}}) // STATE TO HOLD WHEN DELETE MODAL POPS UP
@@ -29,13 +32,14 @@ function CardList() {
   };
 
   useEffect(()=>{
+    setCardList({loading: true, data: []})
     api.payListCard().then(res=>{
       setCardList({loading: false, data:res.data?.result_list})
     }).catch(err => {
       setCardList({loading: false, data:[]})
       console.log('ERROR', err)
     })
-  },[])
+  },[reloadCardList])
   return (
     <div className='w-full'>
         <ul className="payment-items w-full min-h-[400px]">
@@ -98,7 +102,9 @@ function CardList() {
         />
       {/* END OF PAGINATION BUTTON */}
 
-      {deleteCardModal.show && <DeleteCardPopout action={handleDeleteCardModal} situation={deleteCardModal.show} data={deleteCardModal.data} />}
+      {deleteCardModal.show && 
+        <DeleteCardPopout action={handleDeleteCardModal} situation={deleteCardModal.show} data={deleteCardModal.data} setReloadCardList={setReloadCardList} />
+      }
     </div>
   )
 }

src/components/Settings/Tabs/DeleteCardPopout.jsx

@@ -3,7 +3,7 @@ import ModalCom from '../../Helpers/ModalCom'
 import LoadingSpinner from '../../Spinners/LoadingSpinner'
 import usersService from '../../../services/UsersService'
 
-function DeleteCardPopout({action, situation, data}) {
+function DeleteCardPopout({action, situation, data, setReloadCardList}) {
     const api = new usersService()
 
     const [requestStatus, setRequestStatus] = useState({loading: false, status:false, message: ''})
@@ -13,17 +13,16 @@ function DeleteCardPopout({action, situation, data}) {
         api.payRemCard({card_uid:data.card_uid}).then(res=>{
             if(res.status != 200 || res.data.internal_return < 0){
                 setRequestStatus({loading: false, status:false, message: 'unable to delete card. Try Again'})
+                return
             }
             setRequestStatus({loading: false, status:true, message: 'Card deleted'})
-            // setTimeout(()=>{action()},3000) // CLOSES MODAL AFTER SOME SECONDS
+            setReloadCardList(prev => !prev) // RELOADS PAY CARD LIST
+            setTimeout(()=>{action()},3000) // CLOSES MODAL AFTER SOME SECONDS
         }).catch(err => {
             setRequestStatus({loading: false, status:false, message: 'network error. Try Again'})
         }).finally(()=>{
             setTimeout(()=>{
                 setRequestStatus(prev => ({...prev, message: ''}))
-                if(requestStatus.status){
-                    action() // CLOSES MODAL AFTER SOME SECONDS
-                }
             },4000)
         })
     }

src/services/UsersService.js

@@ -944,6 +944,18 @@ class usersService {
       return this.postAuxEnd("/getaccsettings", postData);
     }
 
+    // FUNCTION TO DELETE PAY CARD
+    payRemCard(reqData) {
+      var postData = {
+        uid: localStorage.getItem("uid"),
+        member_id: localStorage.getItem("member_id"),
+        sessionid: localStorage.getItem("session_token"),
+        action: 11057,
+        ...reqData,
+      };
+      return this.postAuxEnd("/payremcard", postData);
+    }
+
   /*
     - 20:27:30.118 FLOG_MAX [757411]: 	REQ_STRING(username)
     - 20:27:30.118 FLOG_MAX [757411]: 	REQ_STRING(password)