feat(update): finishing update events, and update image

Author: mpsalunggg

src/domains/Events.ts

@@ -125,7 +125,7 @@ export const createEventFormSchema = (t: (key: string) => string) =>
 
 export type EventFormType = z.infer<ReturnType<typeof createEventFormSchema>>;
 
-export type CreateEventPayload = Omit<EventFormType, "image"> & { file_name: string };
+export type CreateEventPayload = Omit<EventFormType, "image"> & { file_name?: string };
 
 export type AdminEventResponseType = Omit<EventFormType, "image"> & {
   id: number;

src/features/events/hooks/useEvent.ts

@@ -1,14 +1,15 @@
 "use client";
 
 import React from "react";
-import { useQuery, useMutation } from "@tanstack/react-query";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import { eventsService } from "@/services/events";
 import { uploadsService } from "@/services/uploads";
 import { EventFormType, CreateEventPayload } from "@/domains/Events";
 import DialogSuccess from "@/components/common/DialogGlobal/DialogSuccess";
 import { useRouter } from "@/lib/navigation";
 import { useDialog } from "@/contexts";
 import DialogError from "@/components/common/DialogGlobal/DialogError";
+import { getFileNameFromUrl } from "@/lib/image";
 
 export const useEventById = (eventId: string) => {
   return useQuery({
@@ -54,11 +55,14 @@ export const useEventsAdmin = (page: number, limit: number, search?: string) =>
 export const useCreateEvent = (t: (key: string) => string) => {
   const router = useRouter();
   const { openDialog, closeDialog } = useDialog();
+  const queryClient = useQueryClient();
 
   const submitMutation = useMutation({
     mutationKey: ["createEvent"],
     mutationFn: (payload: CreateEventPayload) => eventsService.createEventAdmin(payload),
     onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["eventsAdmin"] });
+
       openDialog({
         content: React.createElement(DialogSuccess, {
           title: t("EventForm.create-success-title"),
@@ -123,3 +127,90 @@ export const useGetDetailEventAdmin = (id: string) => {
     queryFn: async () => eventsService.getDetailEventAdmin(id),
   });
 };
+
+export const useUpdateEvent = (t: (key: string) => string, id: string) => {
+  const router = useRouter();
+  const { openDialog, closeDialog } = useDialog();
+  const queryClient = useQueryClient();
+
+  const { mutate: mutateUpdateEvent, isPending: loadingCreateEvent } = useMutation({
+    mutationKey: ["updateEvent"],
+    mutationFn: (payload: CreateEventPayload) => eventsService.updateEventAdmin(id, payload),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["getDetailEventAdmin", id] });
+      queryClient.invalidateQueries({ queryKey: ["eventsAdmin"] });
+
+      openDialog({
+        content: React.createElement(DialogSuccess, {
+          title: t("EventForm.update-success-title"),
+          description: t("EventForm.update-success-description"),
+        }),
+        confirmText: t("EventForm.back-to-list"),
+        onConfirm: () => {
+          router.push("/admin/events");
+          closeDialog();
+        },
+        classAction: "sm:justify-center",
+      });
+    },
+    onError: () => {
+      openDialog({
+        content: React.createElement(DialogError, {
+          title: t("EventForm.update-error-title"),
+          description: t("EventForm.update-error-description"),
+        }),
+        cancelText: "OK",
+        classAction: "sm:justify-center",
+      });
+    },
+  });
+
+  const { mutate: mutateUpdateImage, isPending: loadingCreateImage } = useMutation({
+    mutationFn: (payload: EventFormType) =>
+      uploadsService.updateImageAdmin(payload.image, "events", getFileNameFromUrl(payload?.file_name as string)),
+    onSuccess: (data, variables) => {
+      const filename = data.data.file_name;
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const { image, ...rest } = variables;
+      mutateUpdateEvent({
+        ...rest,
+        file_name: filename,
+      });
+    },
+    onError: () => {
+      openDialog({
+        content: React.createElement(DialogError, {
+          title: t("EventForm.upload-error-title"),
+          description: t("EventForm.upload-error-description"),
+        }),
+        onConfirm: () => {
+          closeDialog();
+        },
+        confirmText: "OK",
+        classAction: "sm:justify-center",
+      });
+    },
+  });
+
+  const updateEvent = (payload: EventFormType) => {
+    if (payload.image instanceof File) {
+      return mutateUpdateImage(payload);
+    } else if (payload.file_name) {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const { image, ...rest } = payload;
+      return mutateUpdateEvent({
+        ...rest,
+        file_name: getFileNameFromUrl(payload.file_name),
+      });
+    } else {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const { image, file_name, ...rest } = payload;
+      return mutateUpdateEvent(rest);
+    }
+  };
+
+  return {
+    updateEvent,
+    isLoading: loadingCreateEvent || loadingCreateImage,
+  };
+};

src/features/events/pages/AdminEventUpdatePage.tsx

@@ -2,16 +2,18 @@
 
 import { EventFormType } from "@/domains/Events";
 import EventForm from "../components/EventForm";
-import { useGetDetailEventAdmin } from "../hooks/useEvent";
+import { useGetDetailEventAdmin, useUpdateEvent } from "../hooks/useEvent";
 import Loader from "@/components/common/Loader";
+import { useTranslations } from "next-intl";
 
 const AdminEventUpdatePage = ({ eventId }: { eventId: string }) => {
   console.log("eventsss id", eventId);
+  const t = useTranslations();
   const { data, isLoading } = useGetDetailEventAdmin(eventId);
+  const { updateEvent, isLoading: loadingUpdate } = useUpdateEvent(t, eventId);
 
-  console.log("dataaa", data);
   const handleSubmit = (data: EventFormType) => {
-    // createMutation.mutate(data);
+    updateEvent(data);
     console.log(data);
   };
 
@@ -25,7 +27,7 @@ const AdminEventUpdatePage = ({ eventId }: { eventId: string }) => {
       {isLoading ? (
         <Loader />
       ) : (
-        <EventForm onSubmit={handleSubmit} mode="edit" isLoading={false} initialData={data?.data} />
+        <EventForm onSubmit={handleSubmit} mode="edit" isLoading={loadingUpdate} initialData={data?.data} />
       )}
     </section>
   );

src/lib/image.ts

@@ -0,0 +1,3 @@
+export const getFileNameFromUrl = (url: string): string => {
+  return url.substring(url.lastIndexOf("/") + 1);
+};

src/locales/en.json

@@ -309,8 +309,13 @@
     "create-success": "Event created successfully!",
     "create-success-title": "Success!",
     "create-success-description": "You can now view it in your event list or continue managing other events",
+    "update-success": "Event updated successfully!",
+    "update-success-title": "Success!",
+    "update-success-description": "Your event has been updated successfully",
     "create-error-title": "Error",
     "create-error-description": "Failed to create event. Please try again.",
+    "update-error-title": "Error",
+    "update-error-description": "Failed to update event. Please try again.",
     "upload-error-title": "Upload Error",
     "upload-error-description": "Failed to upload image. Please try again.",
     "back-to-list": "Back to List",

src/locales/id.json

@@ -309,8 +309,13 @@
     "create-success": "Event berhasil dibuat!",
     "create-success-title": "Berhasil!",
     "create-success-description": "Anda sekarang dapat melihatnya di daftar event atau melanjutkan mengelola event lainnya",
+    "update-success": "Event berhasil diperbarui!",
+    "update-success-title": "Berhasil!",
+    "update-success-description": "Event Anda telah berhasil diperbarui",
     "create-error-title": "Error",
     "create-error-description": "Gagal membuat event. Silakan coba lagi.",
+    "update-error-title": "Error",
+    "update-error-description": "Gagal memperbarui event. Silakan coba lagi.",
     "upload-error-title": "Error Upload",
     "upload-error-description": "Gagal mengupload gambar. Silakan coba lagi.",
     "back-to-list": "Kembali ke Daftar",

src/services/uploads/index.ts

@@ -5,7 +5,6 @@ export const uploadsService = {
   /**
    * API to Uploads an image file to the server
    * @param image - The image file to upload
-   * @param type - The type of the image
    * @param category - The category for the image
    */
   uploadImage(image: string | File, category: string): Promise<HttpResponse<{ file_name: string }>> {
@@ -19,7 +18,6 @@ export const uploadsService = {
   /**
    * API to Uploads an image file to the server
    * @param image - The image file to upload
-   * @param type - The type of the image
    * @param category - The category for the image
    */
   uploadImageAdmin(image: string | File | undefined, category: string): Promise<HttpResponse<{ file_name: string }>> {
@@ -30,4 +28,22 @@ export const uploadsService = {
       headers: { "Content-Type": "multipart/form-data" },
     });
   },
+  /**
+   * API to update an image file to the server
+   * @param image - The image file to upload
+   * @param file_name - The file name of the image
+   * @param category - The category for the image
+   */
+  updateImageAdmin(
+    image: string | File | undefined,
+    category: string,
+    file_name: string
+  ): Promise<HttpResponse<{ file_name: string }>> {
+    const data = new FormData();
+    data.append("image", image as File);
+    data.append("category", category);
+    return fetcher.put(`/admin/images/${file_name}`, data, {
+      headers: { "Content-Type": "multipart/form-data" },
+    });
+  },
 };