feat: add new endpoint to event service and change current update eve…

…nt endpoint implementation (#7)
comimafun · Jul 10, 2024 · 811be7e · 811be7e
1 parent 55da056
commit 811be7e
Show file tree

Hide file tree

Showing 7 changed files with 104 additions and 51 deletions.
diff --git a/src/components/circle/detail-page/CircleCutSection.tsx b/src/components/circle/detail-page/CircleCutSection.tsx
@@ -18,6 +18,7 @@ function CircleCutSection() {
           base: 'relative w-full border border-neutral-200 bg-white shadow px-4',
         }}
         title={<h2 className="text-xl font-semibold">Circle Cut</h2>}
+        textValue="circle-cut"
       >
         <div className="flex flex-col items-center justify-center gap-4">
           {data?.cover_picture_url ? (

diff --git a/src/components/circle/detail-page/EditEventSection.tsx b/src/components/circle/detail-page/EditEventSection.tsx
@@ -1,9 +1,11 @@
 import EachPageLayout from '@/components/general/EachPageLayout';
 import { useGetCircleBySlug } from '@/hooks/circle/useGetCircleBySlug';
-import { useUpdateCircle } from '@/hooks/circle/useUpdateCircle';
+import { useUpdateEventByCircleID } from '@/hooks/circle/useUpdateEventByCircleID';
 import { useGetEvents } from '@/hooks/event/useGetEvent';
 import ChevronUpIcon from '@/icons/ChevronUpIcon';
-import { dayEnum } from '@/types/circle';
+import XCircleIcon from '@/icons/XCircleIcon';
+import { eventService } from '@/services/event';
+import { dayEnum } from '@/types/common';
 import { eventEntity } from '@/types/event';
 import { prettifyError } from '@/utils/helper';
 import { time } from '@/utils/time';
@@ -30,7 +32,7 @@ import { z } from 'zod';
 
 const editEventSchema = z.object({
   event: eventEntity,
-  day: dayEnum.nullish(),
+  day: dayEnum.or(z.literal('')).nullish(),
   block: z
     .string()
     .trim()
@@ -75,7 +77,6 @@ type EditEventForm = z.infer<typeof editEventSchema>;
 const ConfirmationButton = () => {
   const { isOpen, onOpenChange } = useDisclosure();
   const { data: circle } = useGetCircleBySlug();
-  const updateEvent = useUpdateCircle();
   const router = useRouter();
   return (
     <>
@@ -120,14 +121,9 @@ const ConfirmationButton = () => {
                     onClick={async () => {
                       if (!circle) return;
                       try {
-                        await updateEvent.mutateAsync({
-                          circleID: circle.id,
-                          payload: {
-                            circle_block: '',
-                            event_id: 0,
-                            day: '',
-                          },
-                        });
+                        await eventService.deleteAttendingEventByCircleID(
+                          circle.id,
+                        );
                         toast.success('Successfully reset attending event');
                         router.push({
                           pathname: '/[circleSlug]',
@@ -163,7 +159,7 @@ function EditEventSection() {
   const form = useForm<EditEventForm>({
     resolver: zodResolver(editEventSchema),
   });
-  const updateEvent = useUpdateCircle();
+  const updateEvent = useUpdateEventByCircleID();
 
   useEffect(() => {
     if (initalized || !circle) return;
@@ -200,8 +196,8 @@ function EditEventSection() {
                 await updateEvent.mutateAsync({
                   circleID: circle.id,
                   payload: {
-                    circle_block: val.block ?? undefined,
-                    day: val.day ?? undefined,
+                    circle_block: val.block ?? '',
+                    day: val.day ?? null,
                     event_id: val.event.id,
                   },
                 });
@@ -287,18 +283,29 @@ function EditEventSection() {
               render={({ field }) => {
                 const { disabled, value, ...fieldProps } = field;
                 return (
-                  <RadioGroup
-                    isDisabled={disabled}
-                    value={value ?? undefined}
-                    {...fieldProps}
-                    orientation="horizontal"
-                    label="Attending Day"
-                    size="sm"
-                  >
-                    <Radio value="first">First Day</Radio>
-                    <Radio value="second">Second Day</Radio>
-                    <Radio value="both">Both Days</Radio>
-                  </RadioGroup>
+                  <div className="flex items-center gap-1">
+                    <RadioGroup
+                      isDisabled={disabled}
+                      value={value ?? undefined}
+                      {...fieldProps}
+                      orientation="horizontal"
+                      label="Attending Day"
+                      size="sm"
+                    >
+                      <Radio value="first">First Day</Radio>
+                      <Radio value="second">Second Day</Radio>
+                      <Radio value="both">Both Days</Radio>
+                    </RadioGroup>
+                    <button
+                      className="mt-auto text-red-500"
+                      onClick={() => {
+                        field.onChange('');
+                      }}
+                      type="button"
+                    >
+                      <XCircleIcon width={20} height={20} />
+                    </button>
+                  </div>
                 );
               }}
             />

diff --git a/src/hooks/circle/useUpdateEventByCircleID.ts b/src/hooks/circle/useUpdateEventByCircleID.ts
@@ -0,0 +1,21 @@
+import { eventService } from '@/services/event';
+import { UpdateAttendingEventBody } from '@/types/event';
+import { useMutation } from '@tanstack/react-query';
+
+export const useUpdateEventByCircleID = () => {
+  return useMutation({
+    mutationFn: async ({
+      circleID,
+      payload,
+    }: {
+      circleID: number;
+      payload: UpdateAttendingEventBody;
+    }) => {
+      const res = await eventService.putUpdateAttendingEventByCircleID(
+        circleID,
+        payload,
+      );
+      return res.data;
+    },
+  });
+};
diff --git a/src/services/event.ts b/src/services/event.ts
@@ -1,9 +1,31 @@
-import { getEventPaginationSchema } from '@/types/event';
+import { getOneCircleResponse } from '@/types/circle';
+import {
+  getEventPaginationSchema,
+  UpdateAttendingEventBody,
+} from '@/types/event';
 import { fetchInstance } from '@/utils/fetch-wrapper';
 
 export const eventService = {
   getEvents: async (params: { page: number; limit: number }) => {
     const res = await fetchInstance(null, '/v1/event', { params });
     return getEventPaginationSchema.parse(res);
   },
+  putUpdateAttendingEventByCircleID: async (
+    circleID: number,
+    body: UpdateAttendingEventBody,
+  ) => {
+    const res = await fetchInstance(null, `/v1/circle/${circleID}/event`, {
+      body,
+      method: 'PUT',
+    });
+
+    return getOneCircleResponse.parse(res);
+  },
+
+  deleteAttendingEventByCircleID: async (circleID: number) => {
+    const res = await fetchInstance(null, `/v1/circle/${circleID}/event`, {
+      method: 'DELETE',
+    });
+    return getOneCircleResponse.parse(res);
+  },
 };
diff --git a/src/types/circle.ts b/src/types/circle.ts
@@ -2,6 +2,8 @@ import { z } from 'zod';
 import {
   backendResponsePagination,
   backendResponseSchema,
+  blockString,
+  dayEnum,
   optionalUrl,
   trimmedString,
   varchar255,
@@ -47,11 +49,8 @@ export const circleBlockEntity = z.object({
   name: z.string(),
 });
 
-export const dayEnum = z.enum(['first', 'second', 'both']);
-
 export const circleEntity = z.object({
   id: z.number(),
-  batch: z.number().nullable(),
   created_at: z.string(),
   updated_at: z.string(),
   day: dayEnum.nullable(),
@@ -100,18 +99,6 @@ export const onboardingPayloadSchema = z.object({
   facebook_url: optionalUrl,
 });
 
-const blockString = trimmedString.refine(
-  (x) => {
-    const split = x.split('-');
-    const prefix = split[0];
-    const postfix = split[1];
-    return split.length === 2 || (prefix.length <= 2 && postfix.length <= 8);
-  },
-  {
-    message: 'Invalid block format',
-  },
-);
-
 export const editGeneralInfoPayload = onboardingPayloadSchema.extend({
   block: blockString.optional(),
   file:
@@ -150,21 +137,14 @@ export const getAllWorkTypeResponse = backendResponseSchema(
 
 export const updateCirclePayload = z.object({
   name: varchar255.optional(),
-  circle_block: blockString.optional(),
-  /**
-   * TODO: HTML string validation
-   */
   description: z.string().optional(),
-  batch: z.number().optional(),
-  day: dayEnum.or(z.literal('')).optional(),
   url: optionalUrl.optional(),
   facebook_url: optionalUrl.optional(),
   twitter_url: optionalUrl.optional(),
   instagram_url: optionalUrl.optional(),
   picture_url: optionalUrl.optional(),
   fandom_ids: z.array(z.number()).optional(),
   work_type_ids: z.array(z.number()).optional(),
-  event_id: z.number().optional(),
   cover_picture_url: optionalUrl.optional(),
 });
 

diff --git a/src/types/common.ts b/src/types/common.ts
@@ -41,3 +41,17 @@ export type CommonStoreSetter<T extends Record<string, unknown>> = {
 };
 
 export type SVGS = JSX.IntrinsicElements['svg'];
+
+export const blockString = trimmedString.refine(
+  (x) => {
+    const split = x.split('-');
+    const prefix = split[0];
+    const postfix = split[1];
+    return split.length === 2 || (prefix.length <= 2 && postfix.length <= 8);
+  },
+  {
+    message: 'Invalid block format',
+  },
+);
+
+export const dayEnum = z.enum(['first', 'second', 'both']);
diff --git a/src/types/event.ts b/src/types/event.ts
@@ -1,5 +1,5 @@
 import { z } from 'zod';
-import { backendResponsePagination } from './common';
+import { backendResponsePagination, blockString, dayEnum } from './common';
 
 export const eventEntity = z.object({
   id: z.number(),
@@ -11,3 +11,11 @@ export const eventEntity = z.object({
 });
 
 export const getEventPaginationSchema = backendResponsePagination(eventEntity);
+
+export const updateAttendingEventBody = z.object({
+  circle_block: blockString.optional(),
+  day: dayEnum.or(z.literal('')).nullish(),
+  event_id: z.number(),
+});
+
+export type UpdateAttendingEventBody = z.infer<typeof updateAttendingEventBody>;