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;