I have built a checkbox functionality to a table. but stuck to resolve this : right after deletion process, when no data found in table, the checkbox is still can be checked, and the badge still show the count > 0. the badge should be show count = 0. But it is normal after manually load the browser. Here is my current code:
const handleDelete = async () => { try { if (selectedSalesOrders.size === 1) { // Single deletion from checkbox selection const salesOrderId = Array.from(selectedSalesOrders)[0]; const res = await deleteSalesOrder(salesOrderId).unwrap(); setSelectedSalesOrders(new Set()); toast.success(res.message); } else { // Multiple deletions const deletePromises = Array.from(selectedSalesOrders).map( (salesOrderId) => deleteSalesOrder(salesOrderId).unwrap() ); await Promise.all(deletePromises); setSelectedSalesOrders(new Set()); toast.success( `Successfully deleted ${selectedSalesOrders.size} sales orders` ); } And this is the RTK:
deleteSalesOrder: builder.mutation({ query: (salesOrderId) => ({ url: `${SALESORDER_URL}/${salesOrderId}`, method: "DELETE", }), invalidatesTags: ["SalesOrders","SalesSummary"], }), This is my button when checkbox is selected:
{/*Menu - Shows when checkbox are selected */} {selectedSalesOrders.size > 0 && ( <div className="flex items-center gap-2"> {selectedSalesOrders.size === 1 ? ( // Single selection menu <div className="flex gap-1"> <ButtonTooltip tooltip="Delete Selected" variant="outline" onClick={handleDeletionAlert} className="flex items-center gap-1 cursor-pointer relative" > <Trash2 className="h-4 w-4" /> <Badge className="absolute -top-2 -right-2 transform scale-85"> {selectedSalesOrders.size} </Badge> </ButtonTooltip> <ButtonTooltip tooltip="Edit Selected" variant="outline" onClick={handleEditSelected} className="flex items-center gap-1 cursor-pointer" > <Edit className="h-4 w-4" /> </ButtonTooltip> </div> ) : ( // Multiple selection menu <ButtonTooltip tooltip="Delete Selected" variant="outline" onClick={handleDeletionAlert} className="flex items-center gap-1 cursor-pointer relative" > <Trash2 className="h-4 w-4" /> <Badge className="absolute -top-2 -right-2 transform scale-85"> {selectedSalesOrders.size} </Badge> </ButtonTooltip> )} </div> )} 