diff --git a/src/app/marketing/create/page.tsx b/src/app/marketing/create/page.tsx index 632ed8a..6d641ce 100644 --- a/src/app/marketing/create/page.tsx +++ b/src/app/marketing/create/page.tsx @@ -24,6 +24,7 @@ interface IPageTypeFields { language?: string; company_name?: string; country?: string; + key: string; } const Marketing = () => { @@ -152,7 +153,8 @@ const Marketing = () => { const finalData = { ...allData, - page_type: pageTypeData.type, + type: pageTypeData.type, + key: pageTypeData.key, ...(pageTypeData.type === "company" && { language: pageTypeData.language, company_name: pageTypeData.company_name, @@ -229,7 +231,7 @@ const Marketing = () => { {...registerPageType("type", { required: { message: FormErrorMessages.required, value: true }, })} - name="page_type" + name="type" label="Page Type" required items={[ @@ -310,6 +312,23 @@ const Marketing = () => { {pageTypeErrors.country.message}

)} + + {pageTypeErrors.key && ( +

+ {pageTypeErrors.key.message} +

+ )} diff --git a/src/components/Tables/cms/index.tsx b/src/components/Tables/cms/index.tsx index 956a230..7c0c7d7 100644 --- a/src/components/Tables/cms/index.tsx +++ b/src/components/Tables/cms/index.tsx @@ -1,13 +1,29 @@ "use client"; +import { PencilSquareIcon, TrashIcon } from "@/assets/icons"; import EmptyListWrapper from "@/components/HOC/EmptyListWrapper"; +import ConfirmationModal from "@/components/ui/ConfirmationModal"; import ListHeader from "@/components/ui/ListHeader"; -import { Table, TableBody, TableHead } from "@/components/ui/table"; +import { Table, TableBody, TableCell, TableHead } from "@/components/ui/table"; import TableSkeleton from "@/components/ui/TableSkeleton"; +import { _TooltipDefaultParams } from "@/constants/tooltip"; +import { unixToDate } from "@/utils/shared"; +import { Tooltip } from "react-tooltip"; import { TableHeader, TableRow } from "../../ui/table"; import useCmsTablePresenter from "./useCmsTablePresenter"; const CmsTable = () => { - const { columns, data, isPending } = useCmsTablePresenter(); + const { + columns, + data, + isPending, + isModalOpen, + setIsModalOpen, + currentCms, + setCurrentCms, + onConfirmDelete, + router, + pathname, + } = useCmsTablePresenter(); return (
@@ -28,10 +44,80 @@ const CmsTable = () => { columns={columns} emptyMessage="No Cms were found" > - Cms list will be added + {data?.data.cms.map((item, index) => ( + + + {index + 1} + + + {item.key} + + + {unixToDate({ unix: item.created_at, hasTime: true })} + + +
+ + + {/* */} +
+ + + ))} + {isModalOpen && ( + { + onConfirmDelete(); + }} + onCancel={() => setIsModalOpen(false)} + /> + )}
); }; diff --git a/src/components/Tables/cms/useCmsTablePresenter.ts b/src/components/Tables/cms/useCmsTablePresenter.ts index faaa018..f432a1b 100644 --- a/src/components/Tables/cms/useCmsTablePresenter.ts +++ b/src/components/Tables/cms/useCmsTablePresenter.ts @@ -1,14 +1,35 @@ "use client"; -import { useGetCmsList } from "@/hooks/queries/useCmsQueries"; +import { useDeleteCms, useGetCmsList } from "@/hooks/queries/useCmsQueries"; +import { TCms } from "@/lib/api/types/TCms"; +import { usePathname, useRouter } from "next/navigation"; +import { useState } from "react"; const useCmsTablePresenter = () => { - const columns = ["row", "title", "created at"]; + const [isModalOpen, setIsModalOpen] = useState(false); + const [currentCms, setCurrentCms] = useState(null); + const columns = ["row", "key", "created at", "actions"]; const { isPending, data } = useGetCmsList(); - + const router = useRouter(); + const pathname = usePathname(); + const { mutate: deleteCms } = useDeleteCms(() => { + setIsModalOpen(false); + setCurrentCms(null); + }); + const onConfirmDelete = () => { + if (!currentCms?.id) return; + deleteCms(currentCms.id); + }; return { columns, isPending, data, + isModalOpen, + setIsModalOpen, + currentCms, + setCurrentCms, + onConfirmDelete, + router, + pathname, }; }; diff --git a/src/components/Tables/contact-us/index.tsx b/src/components/Tables/contact-us/index.tsx index 796a9da..521b02d 100644 --- a/src/components/Tables/contact-us/index.tsx +++ b/src/components/Tables/contact-us/index.tsx @@ -3,6 +3,7 @@ import EmptyListWrapper from "@/components/HOC/EmptyListWrapper"; import { Table, TableBody, + TableCell, TableHead, TableHeader, TableRow, @@ -36,7 +37,9 @@ const ContactUsTable = () => { columns={columns} emptyMessage="No contact us is submitted" > - Contact us table will be initialized here + +
hjgfjhg
 + diff --git a/src/hooks/queries/useCmsQueries.ts b/src/hooks/queries/useCmsQueries.ts index fc26074..9c91ee6 100644 --- a/src/hooks/queries/useCmsQueries.ts +++ b/src/hooks/queries/useCmsQueries.ts @@ -1,7 +1,9 @@ import { API_ENDPOINTS } from "@/lib/api"; import { cmsService } from "@/lib/api/services/cms-service"; -import { useMutation, useQuery } from "@tanstack/react-query"; +import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; +import { useRouter } from "next/navigation"; import { useMemo } from "react"; +import { toast } from "react-toastify"; export const useGetCmsList = () => { const queryKey = useMemo(() => [API_ENDPOINTS.CMS.BASE()], []); @@ -18,6 +20,8 @@ export const useGetCmsDetails = (id: string) => { }); }; export const useCreateCms = () => { + const router = useRouter(); + const queryClient = useQueryClient(); const mutationKey = useMemo( () => [API_ENDPOINTS.CMS.BASE(), "Create cms"], [], @@ -25,5 +29,30 @@ export const useCreateCms = () => { return useMutation({ mutationKey, mutationFn: cmsService.createCms, + onSuccess: ({ data }: { data: { message: string } }) => { + toast.success(data.message); + router.push("/marketing"); + queryClient.invalidateQueries({ + queryKey: [API_ENDPOINTS.CMS.BASE()], + }); + }, + }); +}; +export const useDeleteCms = (successCallback?: () => void) => { + const queryClient = useQueryClient(); + const mutationKey = useMemo( + () => [API_ENDPOINTS.CMS.BASE(), "Delete CMS"], + [], + ); + return useMutation({ + mutationKey, + mutationFn: cmsService.deleteCms, + onSuccess: ({ data }: { data: { message: string } }) => { + toast.success(data.message); + successCallback?.(); + queryClient.invalidateQueries({ + queryKey: [API_ENDPOINTS.CMS.BASE()], + }); + }, }); }; diff --git a/src/lib/api/services/cms-service.ts b/src/lib/api/services/cms-service.ts index 3dcfaa8..0548978 100644 --- a/src/lib/api/services/cms-service.ts +++ b/src/lib/api/services/cms-service.ts @@ -28,4 +28,12 @@ export const cmsService = { throw error; } }, + deleteCms: async (id: string) => { + try { + return (await api.delete(API_ENDPOINTS.CMS.BASE(id))).data; + } catch (error) { + console.error("Error caught in CMS Service => delete CMS: ", error); + throw error; + } + }, }; diff --git a/src/lib/api/types/TCms.ts b/src/lib/api/types/TCms.ts index 4b4c0da..b8d25d0 100644 --- a/src/lib/api/types/TCms.ts +++ b/src/lib/api/types/TCms.ts @@ -155,6 +155,7 @@ export const cmsListResponseSchema = z.object({ export const cmsDetailsResponse = z.object({ cms: CmsSchema, }); +export type TCms = z.infer; export type TCmsListResponse = z.infer; -export type TCmsDetailsResponse = z.infer +export type TCmsDetailsResponse = z.infer; export type TCmsCredentials = z.infer;