Skip to content

Commit 0aa5bc8

Browse files
mpsalungggmpsalunggg
committed
chore: change api transaction events, wip
1 parent 9f851e8 commit 0aa5bc8

File tree

5 files changed

+79
-73
lines changed

5 files changed

+79
-73
lines changed

‎src/features/events/components/EventDetailModal.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -182,7 +182,7 @@ export const EventDetailModal = ({ event }: EventDetailModalProps) => {
182182
rel="noopener noreferrer"
183183
className="text-sm font-medium text-blue-600 hover:text-blue-700 hover:underline dark:text-blue-400 dark:hover:text-blue-300"
184184
>
185-
Click here to open payment page →
185+
Payment Page →
186186
</a>
187187
</div>
188188
<Button

‎src/features/events/components/EventFormRegistration.tsx‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,16 @@ import { Button } from "@/components/ui/Button";
1212
import { useEffect, useState } from "react";
1313
import { useAuthUser } from "@/components/hooks/UseAuthUser";
1414
import { useRouter } from "@/lib/navigation";
15+
import { useParams } from "next/navigation";
1516

1617
const EventFormRegistration = ({ data }: { data: EventType }) => {
1718
const t = useTranslations("EventsPage");
1819
const router = useRouter();
20+
const params = useParams();
1921
const { isAuthenticated, user } = useAuthUser();
2022

2123
const [formActive, setFormActive] = useState(false);
22-
const { registEvent, isLoading } = useRegistEvent(data);
24+
const { registerEvent, isPendingRegister } = useRegistEvent();
2325

2426
const form = useForm<RegistrationForm>({
2527
resolver: zodResolver(registrationSchema),
@@ -30,12 +32,12 @@ const EventFormRegistration = ({ data }: { data: EventType }) => {
3032
},
3133
});
3234

33-
const onSubmit: SubmitHandler<RegistrationForm> = (formData) => {
35+
const onSubmit: SubmitHandler<RegistrationForm> = () => {
3436
if (!data) {
3537
return;
3638
}
3739

38-
registEvent(formData);
40+
registerEvent({ event_id: Number(params?.id) });
3941
};
4042

4143
useEffect(() => {
@@ -128,8 +130,8 @@ const EventFormRegistration = ({ data }: { data: EventType }) => {
128130
size="sm"
129131
className="w-full"
130132
type="submit"
131-
loading={isLoading}
132-
disabled={isLoading}
133+
loading={isPendingRegister}
134+
disabled={isPendingRegister}
133135
onClick={form.handleSubmit(onSubmit)}
134136
>
135137
Submit

‎src/features/events/hooks/useRegistEvent.tsx‎

Lines changed: 62 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,72 +1,81 @@
1-
import { useState } from "react";
2-
import { useTranslations } from "next-intl";
1+
// import { useState } from "react";
2+
// import { useTranslations } from "next-intl";
33
import { toast } from "sonner";
4-
import { uploadsService } from "@/services/uploads";
54
import { eventsService } from "@/services/events";
6-
import { EventType, RegistrationForm } from "@/domains/Events";
5+
// import { EventType } from "@/domains/Events";
76
import { useMutation, useQueryClient } from "@tanstack/react-query";
87
import { useDialog } from "@/contexts";
98
import EventCheckStatusModal from "../components/EventCheckStatusModal";
109

11-
export const useRegistEvent = (data?: EventType) => {
12-
const t = useTranslations("EventsPage");
10+
export const useRegistEvent = () => {
11+
// const t = useTranslations("EventsPage");
1312
const { openDialog, closeDialog } = useDialog();
1413
const queryClient = useQueryClient();
15-
const [isLoading, setIsLoading] = useState<boolean>(false);
16-
const [nameImage, setNameImage] = useState<string | null>("");
14+
// const [isLoading, setIsLoading] = useState<boolean>(false);
15+
// const [nameImage, setNameImage] = useState<string | null>("");
1716
// const [isDialogOpen, setIsDialogOpen] = useState<boolean>(false);
1817

19-
const registEvent = async (formData: RegistrationForm) => {
20-
setIsLoading(true);
18+
// const registEvent = async (formData: RegistrationForm) => {
19+
// setIsLoading(true);
2120

22-
try {
23-
const { image_proof_payment, ...registDetails } = formData;
21+
// try {
22+
// const { image_proof_payment, ...registDetails } = formData;
2423

25-
interface NewPayload extends RegistrationForm {
26-
event_id: number;
27-
}
24+
// interface NewPayload extends RegistrationForm {
25+
// event_id: number;
26+
// }
2827

29-
let registPayload: NewPayload = {
30-
event_id: 0,
31-
image_proof_payment: "",
32-
...registDetails,
33-
};
28+
// let registPayload: NewPayload = {
29+
// event_id: 0,
30+
// image_proof_payment: "",
31+
// ...registDetails,
32+
// };
3433

35-
if (!nameImage) {
36-
console.log("image proof payment", image_proof_payment);
37-
const {
38-
data: { file_name: uploadedImageFileName },
39-
} = await uploadsService.uploadImage(image_proof_payment as File, "event");
34+
// if (!nameImage) {
35+
// console.log("image proof payment", image_proof_payment);
36+
// const {
37+
// data: { file_name: uploadedImageFileName },
38+
// } = await uploadsService.uploadImage(image_proof_payment as File, "event");
4039

41-
setNameImage(uploadedImageFileName);
42-
registPayload = {
43-
...registDetails,
44-
image_proof_payment: uploadedImageFileName as string,
45-
event_id: data?.id as number,
46-
};
47-
} else {
48-
registPayload = {
49-
...registDetails,
50-
image_proof_payment: nameImage as string,
51-
event_id: data?.id as number,
52-
};
53-
}
40+
// setNameImage(uploadedImageFileName);
41+
// registPayload = {
42+
// ...registDetails,
43+
// image_proof_payment: uploadedImageFileName as string,
44+
// event_id: data?.id as number,
45+
// };
46+
// } else {
47+
// registPayload = {
48+
// ...registDetails,
49+
// image_proof_payment: nameImage as string,
50+
// event_id: data?.id as number,
51+
// };
52+
// }
5453

55-
const res = await eventsService.registerEvent(registPayload);
54+
// const res = await eventsService.registerEvent(registPayload);
5655

57-
toast.success(`${t("EventRegistration.success.title")}`, {
58-
description: `${t("EventRegistration.success.description")} ${res.data.order_no}`,
59-
});
60-
setNameImage("");
61-
setIsLoading(false);
62-
} catch (error) {
63-
// console.log(error);
64-
toast.error(t("EventRegistration.failure.title"), {
65-
description: error instanceof Error ? error.message : t("EventRegistration.failure.description"),
66-
});
67-
setIsLoading(false);
68-
}
69-
};
56+
// toast.success(`${t("EventRegistration.success.title")}`, {
57+
// description: `${t("EventRegistration.success.description")} ${res.data.order_no}`,
58+
// });
59+
// setNameImage("");
60+
// setIsLoading(false);
61+
// } catch (error) {
62+
// // console.log(error);
63+
// toast.error(t("EventRegistration.failure.title"), {
64+
// description: error instanceof Error ? error.message : t("EventRegistration.failure.description"),
65+
// });
66+
// setIsLoading(false);
67+
// }
68+
// };
69+
const { mutate: registerEvent, isPending: isPendingRegister } = useMutation({
70+
mutationKey: ["registerEvent"],
71+
mutationFn: ({ event_id }: { event_id: number }) => eventsService.registerEvent(event_id),
72+
onSuccess: (data) => {
73+
toast.success(data?.message);
74+
},
75+
onError: (error) => {
76+
toast.error(error?.message);
77+
},
78+
});
7079

7180
const { mutate: checkPaymentStatus, isPending: isCheckingPayment } = useMutation({
7281
mutationKey: ["checkPaymentStatus"],
@@ -108,5 +117,5 @@ export const useRegistEvent = (data?: EventType) => {
108117
},
109118
});
110119

111-
return { registEvent, isLoading, checkPaymentStatus, isCheckingPayment };
120+
return { checkPaymentStatus, isCheckingPayment, registerEvent, isPendingRegister };
112121
};

‎src/hooks/useDebounced.ts‎

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,5 @@
11
import { useEffect, useState } from "react";
22

3-
/**
4-
* Custom hook that debounces a value by delaying updates until after a specified delay
5-
* Useful for optimizing search inputs, API calls, and other scenarios where you want to
6-
* limit the frequency of updates
7-
*
8-
* @template T - The type of the value being debounced
9-
* @param value - The value to be debounced
10-
* @param delay - The delay in milliseconds before the debounced value is updated
11-
* @returns The debounced value
12-
*/
133
function useDebounced<T>(value: T, delay: number): T {
144
const [debouncedValue, setDebouncedValue] = useState<T>(value);
155

‎src/services/events/index.ts‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import {
55
CheckPaymentResponse,
66
CreateEventPayload,
77
EventType,
8-
RegistrationForm,
8+
// RegistrationForm,
99
} from "@/domains/Events";
1010
import { UserEventResponse } from "@/features/events/types/userEvent";
1111

@@ -27,9 +27,9 @@ export const eventsService = {
2727
/**
2828
* API to get register event user
2929
*/
30-
registerEvent(payload: RegistrationForm): Promise<HttpResponse<{ order_no: string }>> {
31-
return fetcher.post("/events/registrations", payload);
32-
},
30+
// registerEvent(payload: RegistrationForm): Promise<HttpResponse<{ order_no: string }>> {
31+
// return fetcher.post("/events/registrations", payload);
32+
// },
3333

3434
/**
3535
* API to retrieve the list of events owned by the current user.
@@ -87,4 +87,9 @@ export const eventsService = {
8787
async checkPaymentStatus(transaction_no: string): Promise<HttpResponse<CheckPaymentResponse>> {
8888
return fetcher.get(`/transactions/${transaction_no}/status`);
8989
},
90+
91+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
92+
async registerEvent(event_id: number): Promise<HttpResponse<any>> {
93+
return fetcher.post(`/transactions`, { event_id });
94+
},
9095
};

0 commit comments

Comments
 (0)