feat: add component notfound data

Author: mpsalunggg

src/components/common/NotFoundData/index.tsx

@@ -0,0 +1,10 @@
+import { FileX } from "lucide-react";
+
+export const NotFoundData = ({ message = "No data found" }: { message?: string }) => {
+  return (
+    <div className="flex flex-col items-center justify-center py-12 text-center text-gray-500">
+      <FileX className="mb-4 h-12 w-12 text-gray-400" />
+      <p className="text-lg font-medium">{message}</p>
+    </div>
+  );
+};

src/components/ui/Toaster/index.tsx

@@ -19,6 +19,7 @@ const Toaster = ({ ...props }: ToasterProps) => {
       }
       toastOptions={{
         classNames: {
+          success: "!bg-green-500 !text-white",
           error: "!bg-destructive !text-white",
           description: "!text-muted-foreground",
         },

src/features/events/hooks/useMyEvent.ts

@@ -1,10 +1,15 @@
 import { eventsService } from "@/services/events";
 import { useQuery } from "@tanstack/react-query";
+import { useMemo } from "react";
+
+export const useMyEvents = (page: number = 1, limit: number = 10, type: string) => {
+  const typeMemo = useMemo(() => {
+    return type === "all" ? "" : type;
+  }, [type]);
 
-export const useMyEvents = (page: number = 1, limit: number = 10) => {
   const { data, isLoading, error } = useQuery({
-    queryKey: ["getListMyEvents", page, limit],
-    queryFn: async () => eventsService.getMyEvents(page, limit),
+    queryKey: ["getListMyEvents", page, limit, type],
+    queryFn: async () => eventsService.getMyEvents(page, limit, typeMemo),
   });
 
   return {

src/features/events/pages/UserEventPage.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React from "react";
+import React, { useState } from "react";
 import { useTranslations } from "next-intl";
 import { motion } from "motion/react";
 import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/Select";
@@ -10,6 +10,7 @@ import MyEventCard from "../components/MyEventCard";
 import { EVENTS_TYPE } from "@/constants/event";
 import Loader from "@/components/common/Loader";
 import { UserEventType } from "@/domains/Events";
+import { NotFoundData } from "@/components/common/NotFoundData";
 
 interface UserEventPageProps {
   page?: number;
@@ -18,7 +19,8 @@ interface UserEventPageProps {
 
 const UserEventPage = ({ page = 1, perPage = 10 }: UserEventPageProps) => {
   const t = useTranslations("MyEventPage");
-  const { myEvents, isLoading } = useMyEvents(page, perPage);
+  const [typeActive, setTypeActive] = useState("all");
+  const { myEvents, isLoading } = useMyEvents(page, perPage, typeActive);
 
   const totalEvents = myEvents.length;
   const totalPages = Math.ceil(totalEvents / perPage);
@@ -55,12 +57,13 @@ const UserEventPage = ({ page = 1, perPage = 10 }: UserEventPageProps) => {
             transition={{ duration: 0.4, delay: 0.7 }}
             className="w-full sm:w-auto"
           >
-            <Select>
+            <Select onValueChange={setTypeActive} defaultValue="all">
               <SelectTrigger className="sm:w-[180px]">
-                <SelectValue placeholder="Category" />
+                <SelectValue placeholder="All Type Event" />
               </SelectTrigger>
               <SelectContent>
                 <SelectGroup>
+                  <SelectItem value="all">All Type Event</SelectItem>
                   {EVENTS_TYPE.map((item) => (
                     <SelectItem key={item} value={item}>
                       {item}
@@ -74,6 +77,8 @@ const UserEventPage = ({ page = 1, perPage = 10 }: UserEventPageProps) => {
       </header>
       {isLoading ? (
         <Loader />
+      ) : events.length === 0 ? (
+        <NotFoundData />
       ) : (
         <motion.div
           variants={{

src/services/events/index.ts

@@ -27,7 +27,13 @@ export const eventsService = {
   /**
    * API to retrieve the list of events owned by the current user.
    */
-  async getMyEvents(page: number = 1, limit: number = 10): Promise<HttpResponse<UserEventType[]>> {
-    return fetcher.get(`/events/registrations?page=${page}&limit=${limit}`);
+  async getMyEvents(page: number = 1, limit: number = 10, type?: string): Promise<HttpResponse<UserEventType[]>> {
+    return fetcher.get(`/events/registrations`, {
+      params: {
+        page,
+        limit,
+        type,
+      },
+    });
   },
 };