victorAnumudu
76 lines
2.1 KiB
TypeScript
76 lines
2.1 KiB
TypeScript
import { FC, useEffect } from "react";
|
|
import { useMutation, useQueryClient } from "react-query";
|
|
import { MenuComponent } from "../../../../../../_digifi/assets/ts/components";
|
|
import { ID, KTIcon, QUERIES } from "../../../../../../_digifi/helpers";
|
|
import { useListView } from "../../core/ListViewProvider";
|
|
import { useQueryResponse } from "../../core/QueryResponseProvider";
|
|
import { deleteUser } from "../../../core/_requests";
|
|
|
|
type Props = {
|
|
id: ID;
|
|
};
|
|
|
|
const UserActionsCell: FC<Props> = ({ id }) => {
|
|
const { setItemIdForUpdate } = useListView();
|
|
const { query } = useQueryResponse();
|
|
const queryClient = useQueryClient();
|
|
|
|
useEffect(() => {
|
|
MenuComponent.reinitialization();
|
|
}, []);
|
|
|
|
const openEditModal = () => {
|
|
setItemIdForUpdate(id);
|
|
};
|
|
|
|
const deleteItem = useMutation(() => deleteUser(id), {
|
|
// 💡 response of the mutation is passed to onSuccess
|
|
onSuccess: () => {
|
|
// ✅ update detail view directly
|
|
queryClient.invalidateQueries([`${QUERIES.USERS_LIST}-${query}`]);
|
|
},
|
|
});
|
|
|
|
return (
|
|
<>
|
|
<a
|
|
href="#"
|
|
className="btn btn-light btn-active-light-primary btn-sm"
|
|
data-kt-menu-trigger="click"
|
|
data-kt-menu-placement="bottom-end"
|
|
>
|
|
Actions
|
|
<KTIcon iconName="down" className="fs-5 m-0" />
|
|
</a>
|
|
{/* begin::Menu */}
|
|
<div
|
|
className="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-bold fs-7 w-175px py-4"
|
|
data-kt-menu="true"
|
|
>
|
|
{/* begin::Menu item */}
|
|
<div className="menu-item px-3">
|
|
<a className="menu-link px-3" onClick={openEditModal}>
|
|
Edit
|
|
</a>
|
|
</div>
|
|
{/* end::Menu item */}
|
|
|
|
{/* begin::Menu item */}
|
|
<div className="menu-item px-3">
|
|
<a
|
|
className="menu-link px-3"
|
|
data-kt-users-table-filter="delete_row"
|
|
onClick={async () => await deleteItem.mutateAsync()}
|
|
>
|
|
Resend Verification
|
|
</a>
|
|
</div>
|
|
{/* end::Menu item */}
|
|
</div>
|
|
{/* end::Menu */}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export { UserActionsCell };
|