delete popout added

src/components/Settings/Tabs/CardList.jsx

@@ -7,10 +7,17 @@ import usersService from "../../../services/UsersService";
 import { handlePagingFunc } from '../../Pagination';
 import PaginatedList from '../../Pagination/PaginatedList';
 
+import DeleteCardPopout from './DeleteCardPopout';
+
 function CardList() {
     const api = new usersService();
   const [cardList, setCardList] = useState({loading: true, data: []})
 
+  const [deleteCardModal, setDeleteCardModal] = useState({show: false, data: {}}) // STATE TO HOLD WHEN DELETE MODAL POPS UP
+  const handleDeleteCardModal = () => {
+    setDeleteCardModal(prev => ({...prev, show:!prev.show}))
+  }
+
   const [currentPage, setCurrentPage] = useState(0);
   const indexOfFirstItem = Number(currentPage);
   const indexOfLastItem =
@@ -23,7 +30,6 @@ function CardList() {
 
   useEffect(()=>{
     api.payListCard().then(res=>{
-        console.log('TESTING', res.data?.result_list)
       setCardList({loading: false, data:res.data?.result_list})
     }).catch(err => {
       setCardList({loading: false, data:[]})
@@ -62,6 +68,7 @@ function CardList() {
                     <div>
                         <button
                         type="button"
+                        onClick={()=>{setDeleteCardModal({show: true, data:item})}}
                         className="w-[95px] sm:h-[46px] h-[40px] rounded-full btn-gradient text-white sm:text-18 text-md tracking-wide"
                         >
                         Delete
@@ -90,6 +97,8 @@ function CardList() {
             stop={indexOfLastItem}
         />
       {/* END OF PAGINATION BUTTON */}
+
+      {deleteCardModal.show && <DeleteCardPopout action={handleDeleteCardModal} situation={deleteCardModal.show} data={deleteCardModal.data} />}
     </div>
   )
 }