feat(detail): finishing get detail events for update event

Author: mpsalunggg

src/domains/Events.ts

@@ -80,31 +80,48 @@ export const userEventSchema = z.object({
 export type UserEventType = z.infer<typeof userEventSchema>;
 
 export const createEventFormSchema = (t: (key: string) => string) =>
-  z.object({
-    title: z.string().min(1, t("validation.title-required")),
-    description: z.string().min(1, t("validation.description-required")),
-    // file_name: z.string().optional(),
-    slug: z.string().min(1, t("validation.slug-required")),
-    date: z.string().min(1, t("validation.date-required")),
-    type: z.string().min(1, t("validation.type-required")),
-    session_type: z.string().min(1, t("validation.session-type-required")),
-    location: z.string().min(1, t("validation.location-required")),
-    duration: z.string().min(1, t("validation.duration-required")),
-    status: z.string().min(1, t("validation.status-required")),
-    capacity: z.number().min(1, t("validation.capacity-min")),
-    price: z.number().min(0, t("validation.price-min")),
-    registration_link: z.string().url(t("validation.registration-url")),
-    tags: z.array(z.string()),
-    speakers: z.array(z.string()),
-    reservation_start_date: z.string().min(1, t("validation.reservation-start-required")),
-    reservation_end_date: z.string().min(1, t("validation.reservation-end-required")),
-    image: z.union([
-      z.instanceof(File).refine((file) => ["image/png", "image/jpeg", "image/jpg", "image/webp"].includes(file.type), {
-        message: t("validation.image-type"),
-      }),
-      z.string().min(1, t("validation.image-required")),
-    ]),
-  });
+  z
+    .object({
+      title: z.string().min(1, t("validation.title-required")),
+      description: z.string().min(1, t("validation.description-required")),
+      file_name: z.string().optional(),
+      slug: z.string().min(1, t("validation.slug-required")),
+      date: z.string().min(1, t("validation.date-required")),
+      type: z.string().min(1, t("validation.type-required")),
+      session_type: z.string().min(1, t("validation.session-type-required")),
+      location: z.string().min(1, t("validation.location-required")),
+      duration: z.string().min(1, t("validation.duration-required")),
+      status: z.string().min(1, t("validation.status-required")),
+      capacity: z.number().min(1, t("validation.capacity-min")),
+      price: z.number().min(0, t("validation.price-min")),
+      registration_link: z.string().url(t("validation.registration-url")),
+      tags: z.array(z.string()),
+      speakers: z.array(z.string()),
+      reservation_start_date: z.string().min(1, t("validation.reservation-start-required")),
+      reservation_end_date: z.string().min(1, t("validation.reservation-end-required")),
+      image: z
+        .union([
+          z
+            .instanceof(File)
+            .refine((file) => ["image/png", "image/jpeg", "image/jpg", "image/webp"].includes(file.type), {
+              message: t("validation.image-type"),
+            }),
+          z.string().optional(),
+        ])
+        .optional(),
+    })
+    .refine(
+      (data) => {
+        if (data.file_name) {
+          return true;
+        }
+        return data.image instanceof File || (typeof data.image === "string" && data.image.length > 0);
+      },
+      {
+        message: t("validation.image-required"),
+        path: ["image"],
+      }
+    );
 
 export type EventFormType = z.infer<ReturnType<typeof createEventFormSchema>>;
 

src/features/events/components/EventForm.tsx

@@ -19,6 +19,7 @@ import { eventTypes, eventStatuses, sessionTypes } from "../constants";
 import React, { useState, useEffect } from "react";
 import Badge from "@/components/ui/Badge";
 import { useRouter } from "@/lib/navigation";
+import Image from "next/image";
 
 interface EventFormProps {
   onSubmit: (data: EventFormType) => void;
@@ -159,6 +160,12 @@ const EventForm = ({ onSubmit, isLoading = false, initialData, mode = "create" }
               )}
             />
 
+            {initialData?.file_name && (
+              <div>
+                <Image src={initialData.file_name} alt="image cover" width={200} height={200} />
+              </div>
+            )}
+
             <FormField
               control={form.control}
               name="image"

src/features/events/pages/AdminEventUpdatePage.tsx

@@ -3,10 +3,11 @@
 import { EventFormType } from "@/domains/Events";
 import EventForm from "../components/EventForm";
 import { useGetDetailEventAdmin } from "../hooks/useEvent";
+import Loader from "@/components/common/Loader";
 
 const AdminEventUpdatePage = ({ eventId }: { eventId: string }) => {
   console.log("eventsss id", eventId);
-  const { data } = useGetDetailEventAdmin(eventId);
+  const { data, isLoading } = useGetDetailEventAdmin(eventId);
 
   console.log("dataaa", data);
   const handleSubmit = (data: EventFormType) => {
@@ -21,7 +22,11 @@ const AdminEventUpdatePage = ({ eventId }: { eventId: string }) => {
         <p className="text-muted-foreground">Edit event details quickly and easily.</p>
       </div>
 
-      <EventForm onSubmit={handleSubmit} mode="edit" isLoading={false} />
+      {isLoading ? (
+        <Loader />
+      ) : (
+        <EventForm onSubmit={handleSubmit} mode="edit" isLoading={false} initialData={data?.data} />
+      )}
     </section>
   );
 };

src/hooks/useQueryParams.ts

@@ -1,5 +1,5 @@
 import { useSearchParams } from "next/navigation";
-import { useRouter } from "@/lib/navigation";
+import { useRouter } from "next/navigation";
 
 /**
  * Custom hook for managing URL query parameters with nextjs

src/services/uploads/index.ts

@@ -22,9 +22,9 @@ export const uploadsService = {
    * @param type - The type of the image
    * @param category - The category for the image
    */
-  uploadImageAdmin(image: string | File, category: string): Promise<HttpResponse<{ file_name: string }>> {
+  uploadImageAdmin(image: string | File | undefined, category: string): Promise<HttpResponse<{ file_name: string }>> {
     const data = new FormData();
-    data.append("image", image);
+    data.append("image", image as File);
     data.append("category", category);
     return fetcher.post("/admin/images", data, {
       headers: { "Content-Type": "multipart/form-data" },