diff --git a/src/components/Tables/contact-us/index.tsx b/src/components/Tables/contact-us/index.tsx
index c3c5131..c4d111f 100644
--- a/src/components/Tables/contact-us/index.tsx
+++ b/src/components/Tables/contact-us/index.tsx
@@ -1,5 +1,7 @@
"use client";
+import { TrashIcon } from "@/assets/icons";
import EmptyListWrapper from "@/components/HOC/EmptyListWrapper";
+import ConfirmationModal from "@/components/ui/ConfirmationModal";
import {
Table,
TableBody,
@@ -9,12 +11,24 @@ import {
TableRow,
} from "@/components/ui/table";
import TableSkeleton from "@/components/ui/TableSkeleton";
-import { useContactUsListPresenter } from "./useContactUsListPresenter";
+import { _TooltipDefaultParams } from "@/constants/tooltip";
import { unixToDate } from "@/utils/shared";
+import { Tooltip } from "react-tooltip";
+import { useContactUsListPresenter } from "./useContactUsListPresenter";
const ContactUsTable = () => {
- const { columns, pathname, router, isPending, contacts } =
- useContactUsListPresenter();
+ const {
+ columns,
+ pathname,
+ router,
+ isPending,
+ contacts,
+ onConfirmDelete,
+ setIsModalOpen,
+ setCurrentContact,
+ isModalOpen,
+ currentContact,
+ } = useContactUsListPresenter();
return (
@@ -61,11 +75,44 @@ const ContactUsTable = () => {
{unixToDate({ unix: item?.created_at })}
+
+
+
+
+
))}
+ {isModalOpen && (
+
{
+ onConfirmDelete();
+ }}
+ onCancel={() => setIsModalOpen(false)}
+ />
+ )}
);
};
diff --git a/src/components/Tables/contact-us/useContactUsListPresenter.ts b/src/components/Tables/contact-us/useContactUsListPresenter.ts
index f9ddddf..d761fcf 100644
--- a/src/components/Tables/contact-us/useContactUsListPresenter.ts
+++ b/src/components/Tables/contact-us/useContactUsListPresenter.ts
@@ -1,7 +1,14 @@
"use client";
-import { useReadAllContactUs } from "@/hooks/queries/useContactUsQuery";
+import {
+ useDeleteContactUs,
+ useReadAllContactUs,
+} from "@/hooks/queries/useContactUsQuery";
+import { TContact } from "@/lib/api/types/TContacts";
import { usePathname, useRouter } from "next/navigation";
+import { useState } from "react";
export const useContactUsListPresenter = () => {
+ const [isModalOpen, setIsModalOpen] = useState(false);
+ const [currentContact, setCurrentContact] = useState();
const columns: string[] = [
"row",
"Full name",
@@ -14,11 +21,24 @@ export const useContactUsListPresenter = () => {
const pathname = usePathname();
const router = useRouter();
const { data, isPending } = useReadAllContactUs();
+ const { mutate: deleteContactUS } = useDeleteContactUs(() =>
+ setIsModalOpen(false),
+ );
+
+ const onConfirmDelete = () => {
+ if (!currentContact) return;
+ deleteContactUS(currentContact?.id);
+ };
return {
columns,
pathname,
router,
isPending,
contacts: data?.data.contacts,
+ onConfirmDelete,
+ setIsModalOpen,
+ setCurrentContact,
+ isModalOpen,
+ currentContact,
};
};
diff --git a/src/hooks/queries/useContactUsQuery.ts b/src/hooks/queries/useContactUsQuery.ts
index f1b834d..317269e 100644
--- a/src/hooks/queries/useContactUsQuery.ts
+++ b/src/hooks/queries/useContactUsQuery.ts
@@ -1,13 +1,33 @@
import { API_ENDPOINTS } from "@/lib/api";
import { contactUsService } from "@/lib/api/services/contact-us-service";
-import { useQuery } from "@tanstack/react-query";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { useMemo } from "react";
+import { toast } from "react-toastify";
export const useReadAllContactUs = () => {
- const queryKey = useMemo(() => [API_ENDPOINTS.CONTACT_US.READ_ALL], []);
+ const queryKey = useMemo(() => [API_ENDPOINTS.CONTACT_US.BASE()], []);
return useQuery({
queryKey,
queryFn: () => contactUsService.getAllContactUs(),
});
};
+export const useDeleteContactUs = (successCallback?: () => void) => {
+ const queryClient = useQueryClient();
+ const mutationKey = useMemo(
+ () => [API_ENDPOINTS.CONTACT_US.BASE(), "DELETE CONTACT US"],
+ [],
+ );
+ return useMutation({
+ mutationKey,
+ mutationFn: contactUsService.deleteContactUs,
+ onSuccess: (response) => {
+ toast.success(response.data.message);
+
+ successCallback?.();
+ queryClient.invalidateQueries({
+ queryKey: [API_ENDPOINTS.CONTACT_US.BASE()],
+ });
+ },
+ });
+};
diff --git a/src/lib/api/endpoints.ts b/src/lib/api/endpoints.ts
index 790d215..ea16af2 100644
--- a/src/lib/api/endpoints.ts
+++ b/src/lib/api/endpoints.ts
@@ -62,6 +62,6 @@ export const API_ENDPOINTS = {
MARK_AS_SEEN: (id: string) => `notifications/mark-seen/${id}`,
},
CONTACT_US: {
- READ_ALL: "contacts",
+ BASE: (id?: string) => (id ? `contacts/${id}` : "contacts"),
},
} as const;
diff --git a/src/lib/api/services/contact-us-service.ts b/src/lib/api/services/contact-us-service.ts
index 7e6758b..fd8aec8 100644
--- a/src/lib/api/services/contact-us-service.ts
+++ b/src/lib/api/services/contact-us-service.ts
@@ -5,7 +5,7 @@ import { TContactApiResponseSchema } from "../types/TContacts";
export const contactUsService = {
getAllContactUs: async (): Promise => {
try {
- return (await api.get(API_ENDPOINTS.CONTACT_US.READ_ALL)).data;
+ return (await api.get(API_ENDPOINTS.CONTACT_US.BASE())).data;
} catch (error) {
console.error(
"ERROR caught in contact-us service => getAllContactUs",
@@ -14,4 +14,15 @@ export const contactUsService = {
throw error;
}
},
+ deleteContactUs: async (id: string) => {
+ try {
+ return (await api.delete(API_ENDPOINTS.CONTACT_US.BASE(id))).data;
+ } catch (error) {
+ console.error(
+ "ERROR caught in contact-us service => deleteContactUs",
+ error,
+ );
+ throw error;
+ }
+ },
};
diff --git a/src/lib/api/types/TContacts.ts b/src/lib/api/types/TContacts.ts
index 3a31912..eb18387 100644
--- a/src/lib/api/types/TContacts.ts
+++ b/src/lib/api/types/TContacts.ts
@@ -20,5 +20,5 @@ export const contactsListResponseSchema = z.object({
export const contactsApiResponse = createApiResponseSchema(
contactsListResponseSchema,
);
-
+export type TContact = z.infer;
export type TContactApiResponseSchema = z.infer;