Created
May 23, 2024 12:32
-
-
Save Gaurav8757/927e71eb76724511c10669786a1585d8 to your computer and use it in GitHub Desktop.
Update from lists of an API Data send selected data to Pop-up form
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { useState, useEffect } from "react"; | |
| import axios from 'axios'; | |
| //COMPONENT TEXTLOADER AND TWUPDATESLAB | |
| import TextLoader from "../../loader/TextLoader.jsx"; | |
| import TwUpdateSlab from "../UpdatePaySlabs/TwUpdateSlab.jsx"; | |
| import { toast } from "react-toastify"; | |
| // BACKEND API CALL | |
| import VITE_DATA from "../../config/config.jsx"; | |
| function TwLists() { | |
| const [APIData, setAPIData] = useState([]); | |
| //POPUP STATES | |
| const [showUpdatePopup, setShowUpdatePopup] = useState(false); | |
| // SELECTED ID DATA PASS TO NEXT FOE UPDATE | |
| const [selectedRowId, setSelectedRowId] = useState(null); | |
| // OPEN WITH DATA FUNCTION EXPRESSION | |
| const handleUpdateClick = (id) => { | |
| setSelectedRowId(id); | |
| setShowUpdatePopup(true); | |
| }; | |
| // CLOSE WITH EMPTY DATA FUNCTION EXPRESSION | |
| const handleClosePopup = () => { | |
| setSelectedRowId(null); | |
| setShowUpdatePopup(false); | |
| }; | |
| useEffect(() => { | |
| const token = sessionStorage.getItem("token"); | |
| if (!token) { | |
| toast.error("Not Authorized yet.. Try again! "); | |
| } else { | |
| axios | |
| .get(`${VITE_DATA}/slab/view`, { | |
| headers: { | |
| Authorization: `${token}`, | |
| }, | |
| }) | |
| .then((response) => { | |
| setAPIData(response.data); | |
| }) | |
| .catch((error) => { | |
| console.error(error); | |
| }); | |
| } | |
| }, []); | |
| const updateSlabs = async () => { | |
| try { | |
| const token = sessionStorage.getItem("token"); | |
| if (!token) { | |
| toast.error("Not Authorized yet.. Try again!"); | |
| } else { | |
| const response = await axios.get( | |
| `${VITE_DATA}/slab/view`, | |
| { | |
| headers: { | |
| Authorization: `${token}`, | |
| }, | |
| } | |
| ); | |
| setAPIData(response.data); | |
| } | |
| } catch (error) { | |
| console.error("Error fetching updated insurance data:", error); | |
| } | |
| }; | |
| return ( | |
| <section className="container-fluid relative flex flex-wrap p-0 sm:ml-64 bg-slate-200"> | |
| <table className="min-w-full text-center text-sm font-light table bg-slate-200 "> | |
| // CHECK DATA | |
| {APIData.length === 0 ? (<TextLoader />):(<> | |
| <thead className="border-b font-medium bg-slate-200 sticky top-16"> | |
| <tr className="text-blue-700 sticky top-16"> | |
| // TH UPDATE AND ITS % UPDATE | |
| <th scope="col" className="px-0 py-0 border border-black"> | |
| Update | |
| </th> | |
| <th scope="col" className="px-1 py-0 border border-black sticky"> | |
| Advisor Percentage% | |
| </th> | |
| </tr> | |
| </thead> | |
| <tbody className="divide-y divide-gray-200 overflow-y-hidden"> | |
| // API CALL ON MAP ITERATE OVER | |
| {APIData.reverse().map((data) => { | |
| if (data) { | |
| return ( | |
| <tr className=":border-neutral-200 text-sm font-medium" key={data._id}> | |
| // HANDLE FUNCTION ON CLICK TO OPEN WITH DATA OF SELECTED ID | |
| <td className="px-0 py-0 border border-black"> | |
| <button onClick={() => handleUpdateClick(data)} type="button" className="text-white bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 hover:bg-gradient-to-br focus:ring-1 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 shadow-lg shadow-blue-500/50 dark:shadow-lg dark:shadow-blue-800/80 font-medium rounded text-sm px-2 py-1 my-0.5 mx-0.5 text-center"> Update </button> | |
| </td> | |
| <td className="px-1 py-0 border border-black">{data.cvpercentage}</td> | |
| </tr> | |
| ); | |
| } else { | |
| return null; | |
| } | |
| })} | |
| </tbody> | |
| </> | |
| )} | |
| // CHECK HERE POPUP CALL AND DATA WITH POPUP FORM | |
| // "selectedRowId" MEANS SELECTED ID KA DATA | |
| {showUpdatePopup && selectedRowId && ( | |
| // PASS SELECTED ID => DATA slab={selectedRowId}, | |
| // update = {updateSlabs} CALL, | |
| // onClose={handleClosePopup} PASS TO CLOSE POPUP | |
| <TwUpdateSlab slab={selectedRowId} update = {updateSlabs} onClose={handleClosePopup} /> | |
| )} | |
| </table> | |
| </section> | |
| ) | |
| } | |
| export default TwLists; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment