[FEAT] - my events page detail by mpsalunggg · Pull Request #105 · hammercode-dev/hammercode-web

mpsalunggg · 2026-01-08T14:27:45Z

Adds a detail page for registered events (/my-events/[transactionId]) showing payment status, event info, and registration details. Addresses review feedback on i18n consistency, error handling, type safety, and routing.

Changes

UserEventDetailPage.tsx

useRouter → @/lib/navigation (i18n-aware router, consistent with rest of codebase)
All hardcoded EN strings replaced with useTranslations("MyEventDetailPage")
Added isError handling alongside the existing !paymentData?.data guard
Removed manual dark: classnames — theme handles contrast automatically
Renamed local var transactionId → order_no for consistency with useGetPaymentDetail parameter

useRegistEvent.tsx

onSuccess: guards order_no before navigating; falls back to /my-events if missing
onError: uses error?.message || t("register-error") instead of relying solely on backend message

onSuccess: (data) => {
  toast.success(data?.message);
  const orderNo = data?.data?.order_no;
  if (orderNo) {
    router.push(`/my-events/${orderNo}`);
  } else {
    router.push("/my-events");
  }
},
onError: (error) => {
  const message = error?.message || t("register-error");
  toast.error(message);
},

userEvent.ts

id, order_no, event_id, user_id changed from optional to required in UserEventResponse — backend always returns these

en.json / id.json

Added MyEventDetailPage namespace and EventsPage.Hook.register-error key

Related Issue(s) / Tickets

Related Issue: #...
Notion/Jira Ticket: JIRA-XXXX

Checklist

Please review and check all applicable items:

I have tested the changes locally and they work as expected
I have added/updated relevant documentation (if applicable)
My code follows the project's coding style guidelines
All tests pass successfully
I have updated the necessary dependencies (if applicable)
I have squashed any insignificant commits into meaningful ones

Screenshots (if applicable)

Additional Notes

Route param is [transactionId] (from the Next.js folder name) — locally aliased as order_no in the component to match the API parameter. Route rename not done to minimize scope.

src/features/events/types/userEvent.ts

morizkay · 2026-02-06T15:26:19Z

src/features/events/pages/UserEventDetailPage.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { useParams, useRouter } from "next/navigation";


There are inconsistency here, few files using useRouter from @/lib/navigation, but this is using next/navigation.

Is this intended? Or auto impott problem?

I think @/lib/navigation optimized for i18n

Fixed in 8e05041 — useRouter is now imported from @/lib/navigation for i18n consistency. useParams is kept from next/navigation since @/lib/navigation doesn't export it.

morizkay · 2026-02-06T15:29:35Z

src/features/events/pages/UserEventDetailPage.tsx

+    return (
+      <div className="container mx-auto max-w-3xl px-4 py-8">
+        <div className="text-center">
+          <h1 className="mb-4 text-2xl font-bold">Transaction Not Found</h1>


There are hardcoded strings in english, better to use i18n

Fixed in 8e05041 — all hardcoded strings have been replaced with useTranslations("MyEventDetailPage") keys added to both en.json and id.json.

morizkay · 2026-02-06T15:30:43Z

src/features/events/pages/UserEventDetailPage.tsx

+  const { data: paymentData, isLoading } = useGetPaymentDetail(transactionId);
+
+  if (isLoading) {
+    return (
+      <div className="flex min-h-screen items-center justify-center">
+        <Loader />
+      </div>
+    );
+  }


There is no handled for isError or error

Fixed in 8e05041 — isError is now destructured from useGetPaymentDetail and handled in the condition: if (isError || !paymentData?.data).

morizkay · 2026-02-06T15:35:18Z

src/features/events/types/userEvent.ts

+  id?: number;
+  order_no?: string;
+  event_id?: number;
+  user_id?: string;


Is there any reason why id or no like these marked as optional? I belive event should has these value

Fixed in 8e05041 — id, order_no, event_id, and user_id are now required fields in UserEventResponse.

morizkay · 2026-02-06T15:40:55Z

src/features/events/components/ColumnsUserEventList.tsx

  const handleViewDetails = () => {
-    openDialog({
-      title: "Event Details",
-      content: <EventDetailModal event={event} />,
-      size: "xl",
-      className: "h-[80%]",
-    });
+    router.push(`/my-events/${event.order_no}`);
  };


order_no is optional, so it's probalby empty, better to put condition to protect this router's push if this commented code intentioanl #105 (comment)

Since order_no is now a required field in UserEventResponse (fixed in 8e05041), the navigation is guaranteed safe by the type. The null-check was cleaned up in 88c107a.

morizkay · 2026-02-06T15:42:07Z

src/features/events/hooks/useRegistEvent.tsx

    mutationFn: ({ event_id }: { event_id: number }) => eventsService.registerEvent(event_id),
    onSuccess: (data) => {
      toast.success(data?.message);
+      router.push(`/my-events/${data.data.order_no}`);


Same comment with this

#105 (comment)

Can refactor be like:

onSuccess: (data) => { toast.success(data?.message); const orderNo = data?.data?.order_no; if (orderNo) { router.push(`/my-events/${orderNo}`); } else { router.push("/my-events"); } },

So will push user to main event page when error

Fixed in 8e05041 — refactored to the suggested pattern: checks for orderNo and falls back to /my-events if it's missing.

morizkay · 2026-02-06T15:45:39Z

src/features/events/pages/UserEventDetailPage.tsx

+  const params = useParams();
+
+  const transactionId = params?.transactionId as string;
+  const { data: paymentData, isLoading } = useGetPaymentDetail(transactionId);


useGetPaymentDetail function parameter is order_no, its better to make it consistent between order_no or transactionId

Including the nested routing also using transactionId

params?.transactionId

[transactionId]

Fixed in 8e05041 — the local variable is now named order_no (extracted from params?.transactionId which reflects the route param name [transactionId]), making the intent clear when passed to useGetPaymentDetail(order_no).

morizkay · 2026-02-06T15:52:06Z

src/features/events/pages/UserEventDetailPage.tsx

+        </Button>
+      </div>
+
+      <div className="rounded-lg border border-gray-200 bg-white p-6 dark:border-gray-800 dark:bg-gray-900">


I believe the current css theme can adjust it's own opposite color when activating the dark mode, can remove classnames that started with dark:

Fixed in 8e05041 — removed dark:border-gray-800 and dark:bg-gray-900 classnames from the container.

morizkay · 2026-02-06T15:54:05Z

src/features/events/hooks/useRegistEvent.tsx

+      router.push(`/my-events/${data.data.order_no}`);
    },
    onError: (error) => {
      toast.error(error?.message);


Depends solely on backend can be confusing if the error is not what is expected. Can put handle like this

onError: (error) => { const message = error?.message || "Failed to xxxx"; toast.error(message); },

And use i18n to store that Failed to xxxx

Fixed in 8e05041 — onError now uses error?.message || t("register-error") with the fallback message stored in i18n (en.json: "Failed to register event", id.json: "Gagal mendaftar event").

morizkay · 2026-04-08T12:02:58Z

@copilot fix

… safety Agent-Logs-Url: https://github.com/hammercode-dev/hammercode-web/sessions/3d9c5db3-7c5a-4dde-8b64-6d63b5002423 Co-authored-by: morizkay <26421928+morizkay@users.noreply.github.com>

Agent-Logs-Url: https://github.com/hammercode-dev/hammercode-web/sessions/3d9c5db3-7c5a-4dde-8b64-6d63b5002423 Co-authored-by: morizkay <26421928+morizkay@users.noreply.github.com>

Copilot · 2026-04-08T12:25:29Z

@copilot fix

All review comments addressed in commits 8e05041 and 88c107a:

useRouter changed to @/lib/navigation
All hardcoded strings replaced with i18n translations
isError handling added
dark: classnames removed
order_no, id, event_id, user_id made required in UserEventResponse
onSuccess refactored with order_no guard, onError uses i18n fallback message

mpsalunggg added 2 commits January 8, 2026 21:06

feat: create detail event page, my-events page

108a5c4

chore: update open modal to redirect to my events

fbe3ee7

mpsalunggg requested review from adzaky, eezhal92, morizkay and vickyadrii January 8, 2026 14:27

mpsalunggg self-assigned this Jan 8, 2026

mpsalunggg added the enhancement New feature or request label Jan 8, 2026

vickyadrii reviewed Jan 9, 2026

View reviewed changes

src/features/events/types/userEvent.ts Show resolved Hide resolved

mpsalunggg requested a review from vickyadrii January 11, 2026 12:49

vickyadrii approved these changes Jan 12, 2026

View reviewed changes

morizkay requested changes Feb 6, 2026

View reviewed changes

Copilot started work on behalf of morizkay April 8, 2026 12:03 View session

Copilot AI and others added 2 commits April 8, 2026 12:20

fix: address PR review comments - i18n, routing, error handling, type…

8e05041

… safety Agent-Logs-Url: https://github.com/hammercode-dev/hammercode-web/sessions/3d9c5db3-7c5a-4dde-8b64-6d63b5002423 Co-authored-by: morizkay <26421928+morizkay@users.noreply.github.com>

fix: remove redundant null-check for required order_no field

88c107a

Agent-Logs-Url: https://github.com/hammercode-dev/hammercode-web/sessions/3d9c5db3-7c5a-4dde-8b64-6d63b5002423 Co-authored-by: morizkay <26421928+morizkay@users.noreply.github.com>

Copilot finished work on behalf of morizkay April 8, 2026 12:27

Copilot AI requested a review from morizkay April 8, 2026 12:27

		@@ -0,0 +1,59 @@
		"use client";

		import { useParams, useRouter } from "next/navigation";

Conversation

mpsalunggg commented Jan 8, 2026 • edited by Copilot AI Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes

Related Issue(s) / Tickets

Checklist

Screenshots (if applicable)

Additional Notes

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 8, 2026

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 8, 2026

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 8, 2026

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 8, 2026

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 8, 2026

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 8, 2026

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 8, 2026

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 8, 2026

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 8, 2026

Choose a reason for hiding this comment

Uh oh!

morizkay commented Apr 8, 2026

Uh oh!

Copilot AI commented Apr 8, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

mpsalunggg commented Jan 8, 2026 •

edited by Copilot AI

Loading