UPDATE: Change using api to using static file

bun.lock

@@ -5,37 +5,38 @@
     "": {
       "name": "firefly-tools",
       "dependencies": {
-        "@next/bundle-analyzer": "latest",
-        "@tanstack/react-query": "latest",
-        "axios": "latest",
-        "fast-average-color": "latest",
-        "framer-motion": "latest",
-        "html2canvas-pro": "latest",
-        "lucide-react": "latest",
-        "next": "latest",
-        "next-intl": "latest",
-        "react": "latest",
-        "react-dom": "latest",
-        "react-select": "latest",
-        "react-toastify": "latest",
-        "sharp": "latest",
-        "socket.io-client": "latest",
-        "zod": "latest",
-        "zustand": "latest",
+        "@next/bundle-analyzer": "16.1.0",
+        "@tanstack/react-query": "^5.90.12",
+        "axios": "^1.13.2",
+        "fast-average-color": "^9.5.0",
+        "framer-motion": "^12.23.26",
+        "html2canvas-pro": "^1.6.3",
+        "lru-cache": "^11.2.4",
+        "lucide-react": "^0.562.0",
+        "next": "16.1.0",
+        "next-intl": "^4.6.1",
+        "react": "19.2.3",
+        "react-dom": "19.2.3",
+        "react-select": "^5.10.2",
+        "react-toastify": "^11.0.5",
+        "sharp": "^0.34.5",
+        "socket.io-client": "^4.8.1",
+        "zod": "^4.2.1",
+        "zustand": "^5.0.9",
       },
       "devDependencies": {
-        "@tailwindcss/postcss": "latest",
-        "@types/jest": "latest",
-        "@types/node": "latest",
-        "@types/react": "latest",
-        "@types/react-dom": "latest",
-        "daisyui": "latest",
-        "eslint": "latest",
-        "eslint-config-next": "latest",
-        "tailwind-scrollbar": "latest",
-        "tailwindcss": "latest",
-        "ts-to-zod": "latest",
-        "typescript": "latest",
+        "@tailwindcss/postcss": "^4.1.18",
+        "@types/jest": "^30.0.0",
+        "@types/node": "^25.0.3",
+        "@types/react": "19.2.6",
+        "@types/react-dom": "19.2.3",
+        "daisyui": "^5.5.14",
+        "eslint": "^9.39.2",
+        "eslint-config-next": "16.1.0",
+        "tailwind-scrollbar": "^4.0.2",
+        "tailwindcss": "^4.1.18",
+        "ts-to-zod": "^5.1.0",
+        "typescript": "^5.9.3",
       },
     },
   },
@@ -770,7 +771,7 @@
 
     "html-escaper": ["html-escaper@2.0.2", "", {}, "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg=="],
 
-    "html2canvas-pro": ["html2canvas-pro@1.6.1", "", { "dependencies": { "css-line-break": "^2.1.0", "text-segmentation": "^1.0.3" } }, "sha512-TAwiVhNNmMGIqCax3cPirMaAqp7GbPTAAFAU95DO13diXZTWEI2Ih0hDez5yUplvmqirklZQkKVVXLTpEt2o9Q=="],
+    "html2canvas-pro": ["html2canvas-pro@1.6.3", "", { "dependencies": { "css-line-break": "^2.1.0", "text-segmentation": "^1.0.3" } }, "sha512-3Xi7ehorkDBV5Lrm+mpmPzjZUFVqKdH40QbEd8KYdlIaAr8OBpqZ72ZWKONIfdMPRfR+er/KedF3cjN64bmXNw=="],
 
     "ignore": ["ignore@5.3.2", "", {}, "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g=="],
 
@@ -932,7 +933,7 @@
 
     "loose-envify": ["loose-envify@1.4.0", "", { "dependencies": { "js-tokens": "^3.0.0 || ^4.0.0" }, "bin": { "loose-envify": "cli.js" } }, "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q=="],
 
-    "lru-cache": ["lru-cache@5.1.1", "", { "dependencies": { "yallist": "^3.0.2" } }, "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w=="],
+    "lru-cache": ["lru-cache@11.2.4", "", {}, "sha512-B5Y16Jr9LB9dHVkh6ZevG+vAbOsNOYCX+sXvFWFu7B3Iz5mijW3zdbMyhsh8ANd2mSWBYdJgnqi+mL7/LrOPYg=="],
 
     "lucide-react": ["lucide-react@0.562.0", "", { "peerDependencies": { "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-82hOAu7y0dbVuFfmO4bYF1XEwYk/mEbM5E+b1jgci/udUBEE/R7LF5Ip0CCEmXe8AybRM8L+04eP+LGZeDvkiw=="],
 
@@ -1304,6 +1305,8 @@
 
     "@babel/generator/@babel/parser": ["@babel/parser@7.28.5", "", { "dependencies": { "@babel/types": "^7.28.5" }, "bin": "./bin/babel-parser.js" }, "sha512-KKBU1VGYR7ORr3At5HAtUQ+TV3SzRCXmA/8OdDZiLDBIZxVyzXuztPjfLd3BV1PRAQGCMWWSHYhL0F8d5uHBDQ=="],
 
+    "@babel/helper-compilation-targets/lru-cache": ["lru-cache@5.1.1", "", { "dependencies": { "yallist": "^3.0.2" } }, "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w=="],
+
     "@babel/helper-compilation-targets/semver": ["semver@6.3.1", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="],
 
     "@babel/helper-module-imports/@babel/traverse": ["@babel/traverse@7.28.0", "", { "dependencies": { "@babel/code-frame": "^7.27.1", "@babel/generator": "^7.28.0", "@babel/helper-globals": "^7.28.0", "@babel/parser": "^7.28.0", "@babel/template": "^7.27.2", "@babel/types": "^7.28.0", "debug": "^4.3.1" } }, "sha512-mGe7UK5wWyh0bKRfupsUchrQGqvDbZDbKJw+kcRGSmdHVYrv+ltd0pnpDTVpiTqnaBru9iEvA8pz8W46v0Amwg=="],

package.json

@@ -14,7 +14,8 @@
     "axios": "^1.13.2",
     "fast-average-color": "^9.5.0",
     "framer-motion": "^12.23.26",
-    "html2canvas-pro": "^1.6.1",
+    "html2canvas-pro": "^1.6.3",
+    "lru-cache": "^11.2.4",
     "lucide-react": "^0.562.0",
     "next": "16.1.0",
     "next-intl": "^4.6.1",

src/app/api/[locale]/as/[id]/route.ts

@@ -1,19 +0,0 @@
-import { NextRequest, NextResponse } from 'next/server'
-import { loadAS } from '@/lib/loader'
-
-export async function GET(
-  req: NextRequest,
-  { params }: { params: Promise<{ id: string, locale: string }> }
-) {
-
-  const { id, locale } = await params
-  const asData = await loadAS([id], locale)
-  const as = asData[id]
-
-  if (!as) {
-    return NextResponse.json({ error: 'AS info not found' }, { status: 404 })
-  }
-  return new NextResponse(JSON.stringify(as), {
-    headers: { "Content-Type": "application/json" }
-  });
-}

src/app/api/[locale]/as/route.ts

@@ -1,22 +0,0 @@
-import { loadAS } from "@/lib/loader";
-import { NextRequest, NextResponse } from "next/server";
-
-export async function POST(request: NextRequest, { params }: { params: Promise<{ locale: string }> }) {
-  try {
-    const body = await request.json();
-    const asIds = body.asIds as string[];
-    const { locale } = await params;
-    
-    if (!Array.isArray(asIds) || asIds.some(id => typeof id !== 'string')) {
-      return NextResponse.json({ error: 'Invalid asIds' }, { status: 400 });
-    }
-
-    const asData = await loadAS(asIds, locale);
-
-    return new NextResponse(JSON.stringify(asData), {
-      headers: { "Content-Type": "application/json" }
-    });
-  } catch {
-    return NextResponse.json({ error: 'Failed to load as data' }, { status: 500 });
-  }
-}

src/app/api/[locale]/characters/[id]/route.ts

@@ -1,20 +0,0 @@
-import { NextRequest, NextResponse } from 'next/server'
-import { loadCharacters } from '@/lib/loader'
-
-export async function GET(
-  req: NextRequest,
-  { params }: { params: Promise<{ id: string, locale: string }> }
-) {
-
-  const { id, locale } = await params
-  const characters = await loadCharacters([id], locale)
-  const char = characters[id]
-
-  if (!char) {
-    return NextResponse.json({ error: 'Character not found' }, { status: 404 })
-  }
-
-  return new NextResponse(JSON.stringify(char), {
-    headers: { "Content-Type": "application/json" }
-  });
-}

src/app/api/[locale]/characters/route.ts

@@ -1,22 +0,0 @@
-import { loadCharacters } from "@/lib/loader";
-import { NextRequest, NextResponse } from "next/server";
-
-export async function POST(request: NextRequest, { params }: { params: Promise<{ locale: string }> }) {
-  try {
-    const body = await request.json();
-    const charIds = body.charIds as string[];
-    const { locale } = await params;
-
-    if (!Array.isArray(charIds) || charIds.some(id => typeof id !== 'string')) {
-      return NextResponse.json({ error: 'Invalid charIds' }, { status: 400 });
-    }
-
-    const characters = await loadCharacters(charIds, locale);
-
-    return new NextResponse(JSON.stringify(characters), {
-      headers: { "Content-Type": "application/json" }
-    });
-  } catch {
-    return NextResponse.json({ error: 'Failed to load characters' }, { status: 500 });
-  }
-}

src/app/api/[locale]/lightcones/[id]/route.ts

@@ -1,20 +0,0 @@
-import { NextRequest, NextResponse } from 'next/server'
-import { loadLightcones } from '@/lib/loader'
-
-export async function GET(
-  req: NextRequest,
-  { params }: { params: Promise<{ id: string, locale: string }> }
-) {
-
-  const { id, locale } = await params
-  const lightcones = await loadLightcones([id], locale)
-  const lightcone = lightcones[id]
-
-  if (!lightcone) {
-    return NextResponse.json({ error: 'Lightcone not found' }, { status: 404 })
-  }
-
-  return new NextResponse(JSON.stringify(lightcone), {
-    headers: { "Content-Type": "application/json" }
-  });
-}

src/app/api/[locale]/lightcones/route.ts

@@ -1,22 +0,0 @@
-import { loadLightcones } from "@/lib/loader";
-import { NextRequest, NextResponse } from "next/server";
-
-export async function POST(request: NextRequest, { params }: { params: Promise<{ locale: string }> }) {
-  try {
-    const body = await request.json();
-    const lightconeIds = body.lightconeIds as string[];
-    const { locale } = await params;
-
-    if (!Array.isArray(lightconeIds) || lightconeIds.some(id => typeof id !== 'string')) {
-      return NextResponse.json({ error: 'Invalid lightconeIds' }, { status: 400 });
-    }
-
-    const lightcones = await loadLightcones(lightconeIds, locale);
-
-    return new NextResponse(JSON.stringify(lightcones), {
-      headers: { "Content-Type": "application/json" }
-    });
-  } catch {
-    return NextResponse.json({ error: 'Failed to load lightcones' }, { status: 500 });
-  }
-}

src/app/api/[locale]/moc/[id]/route.ts

@@ -1,20 +0,0 @@
-import { NextRequest, NextResponse } from 'next/server'
-import { loadMOC } from '@/lib/loader'
-
-export async function GET(
-  req: NextRequest,
-  { params }: { params: Promise<{ id: string, locale: string }> }
-) {
-
-  const { id, locale } = await params
-  const mocData = await loadMOC([id], locale)
-  const moc = mocData[id]
-
-  if (!moc) {
-    return NextResponse.json({ error: 'MOC info not found' }, { status: 404 })
-  }
-
-  return new NextResponse(JSON.stringify(moc), {
-    headers: { "Content-Type": "application/json" }
-  });
-}

src/app/api/[locale]/moc/route.ts

@@ -1,22 +0,0 @@
-import { loadMOC } from "@/lib/loader";
-import { NextRequest, NextResponse } from "next/server";
-
-export async function POST(request: NextRequest, { params }: { params: Promise<{ locale: string }> }) {
-  try {
-    const body = await request.json();
-    const mocIds = body.mocIds as string[];
-    const { locale } = await params;
-    
-    if (!Array.isArray(mocIds) || mocIds.some(id => typeof id !== 'string')) {
-      return NextResponse.json({ error: 'Invalid mocIds' }, { status: 400 });
-    }
-
-    const mocData = await loadMOC(mocIds, locale);
-
-    return new NextResponse(JSON.stringify(mocData), {
-      headers: { "Content-Type": "application/json" }
-    });
-  } catch {
-    return NextResponse.json({ error: 'Failed to load moc data' }, { status: 500 });
-  }
-}

src/app/api/[locale]/monster/[id]/route.ts

@@ -1,19 +0,0 @@
-import { NextRequest, NextResponse } from 'next/server'
-import { loadMonster } from '@/lib/loader'
-
-export async function GET(
-  req: NextRequest,
-  { params }: { params: Promise<{ id: string, locale: string }> }
-) {
-
-  const { id, locale } = await params
-  const monsterData = await loadMonster([id], locale)
-  const monster = monsterData[id]
-
-  if (!monster) {
-    return NextResponse.json({ error: 'Monster info not found' }, { status: 404 })
-  }
-  return new NextResponse(JSON.stringify(monster), {
-    headers: { "Content-Type": "application/json" }
-  });
-}

src/app/api/[locale]/monster/route.ts

@@ -1,22 +0,0 @@
-import { loadMonster } from "@/lib/loader";
-import { NextRequest, NextResponse } from "next/server";
-
-export async function POST(request: NextRequest, { params }: { params: Promise<{ locale: string }> }) {
-  try {
-    const body = await request.json();
-    const monsterIds = body.monsterIds as string[];
-    const { locale } = await params;
-
-    if (!Array.isArray(monsterIds) || monsterIds.some(id => typeof id !== 'string')) {
-      return NextResponse.json({ error: 'Invalid monsterIds' }, { status: 400 });
-    }
-
-    const monsterData = await loadMonster(monsterIds, locale);
-
-    return new NextResponse(JSON.stringify(monsterData), {
-      headers: { "Content-Type": "application/json" }
-    });
-  } catch {
-    return NextResponse.json({ error: 'Failed to load monster data' }, { status: 500 });
-  }
-}

src/app/api/[locale]/peak/[id]/route.ts

@@ -1,20 +0,0 @@
-import { NextRequest, NextResponse } from 'next/server'
-import { loadPeak } from '@/lib/loader'
-
-export async function GET(
-  req: NextRequest,
-  { params }: { params: Promise<{ id: string, locale: string }> }
-) {
-
-  const { id, locale } = await params
-  const peakData = await loadPeak([id], locale)
-  const peak = peakData[id]
-
-  if (!peak) {
-    return NextResponse.json({ error: 'Peak info not found' }, { status: 404 })
-  }
-
-  return new NextResponse(JSON.stringify(peak), {
-    headers: { "Content-Type": "application/json" }
-  });
-}

src/app/api/[locale]/peak/route.ts

@@ -1,22 +0,0 @@
-import { loadPeak } from "@/lib/loader";
-import { NextRequest, NextResponse } from "next/server";
-
-export async function POST(request: NextRequest, { params }: { params: Promise<{ locale: string }> }) {
-  try {
-    const body = await request.json();
-    const peakIds = body.peakIds as string[];
-    const { locale } = await params;
-    
-    if (!Array.isArray(peakIds) || peakIds.some(id => typeof id !== 'string')) {
-      return NextResponse.json({ error: 'Invalid peakIds' }, { status: 400 });
-    }
-
-    const peakData = await loadPeak(peakIds, locale);
-
-    return new NextResponse(JSON.stringify(peakData), {
-      headers: { "Content-Type": "application/json" }
-    });
-  } catch {
-    return NextResponse.json({ error: 'Failed to load peak data' }, { status: 500 });
-  }
-}

src/app/api/[locale]/pf/[id]/route.ts

@@ -1,21 +0,0 @@
-import { NextRequest, NextResponse } from 'next/server'
-import { loadPF } from '@/lib/loader'
-
-export async function GET(
-  req: NextRequest,
-  { params }: { params: Promise<{ id: string, locale: string }> }
-) {
-
-  const { id, locale } = await params
-  const pfData = await loadPF([id], locale)
-  const pf = pfData[id]
-
-  if (!pf) {
-    return NextResponse.json({ error: 'PF info not found' }, { status: 404 })
-  }
-
-
-  return new NextResponse(JSON.stringify(pf), {
-    headers: { "Content-Type": "application/json" }
-  });
-}

src/app/api/[locale]/pf/route.ts

@@ -1,22 +0,0 @@
-import { loadPF } from "@/lib/loader";
-import { NextRequest, NextResponse } from "next/server";
-
-export async function POST(request: NextRequest, { params }: { params: Promise<{ locale: string }> }) {
-  try {
-    const body = await request.json();
-    const pfIds = body.pfIds as string[];
-    const { locale } = await params;
-
-    if (!Array.isArray(pfIds) || pfIds.some(id => typeof id !== 'string')) {
-      return NextResponse.json({ error: 'Invalid pfIds' }, { status: 400 });
-    }
-
-    const pfData = await loadPF(pfIds, locale);
-
-    return new NextResponse(JSON.stringify(pfData), {
-      headers: { "Content-Type": "application/json" }
-    });
-  } catch {
-    return NextResponse.json({ error: 'Failed to load pf data' }, { status: 500 });
-  }
-}

src/app/api/[locale]/relics/[id]/route.ts

@@ -1,20 +0,0 @@
-import { NextRequest, NextResponse } from 'next/server'
-import { loadRelics } from '@/lib/loader'
-
-export async function GET(
-  req: NextRequest,
-  { params }: { params: Promise<{ id: string, locale: string }> }
-) {
-
-  const { id, locale } = await params
-  const relics = await loadRelics([id], locale)
-  const relic = relics[id]
-
-  if (!relic) {
-    return NextResponse.json({ error: 'Relic not found' }, { status: 404 })
-  }
-
-  return new NextResponse(JSON.stringify(relic), {
-    headers: { "Content-Type": "application/json" }
-  });
-}

src/app/api/[locale]/relics/route.ts

@@ -1,22 +0,0 @@
-import { NextRequest, NextResponse } from "next/server";
-import { loadRelics } from "@/lib/loader";
-
-export async function POST(request: NextRequest, { params }: { params: Promise<{ locale: string }> }) {
-  try {
-    const body = await request.json();
-    const relicIds = body.relicIds as string[];
-    const { locale } = await params;
-
-    if (!Array.isArray(relicIds) || relicIds.some(id => typeof id !== 'string')) {
-      return NextResponse.json({ error: 'Invalid relicIds' }, { status: 400 });
-    }
-
-    const relics = await loadRelics(relicIds, locale);
-
-    return new NextResponse(JSON.stringify(relics), {
-      headers: { "Content-Type": "application/json" }
-    });
-  } catch {
-    return NextResponse.json({ error: 'Failed to load relics' }, { status: 500 });
-  }
-}

src/app/api/config-maze/route.ts

@@ -1,13 +0,0 @@
-import { loadConfigMaze } from "@/lib/loader";
-import { NextResponse } from "next/server";
-
-export async function GET() {
-  try {
-    const configMaze = await loadConfigMaze();
-    return new NextResponse(JSON.stringify(configMaze), {
-      headers: { "Content-Type": "application/json" }
-    });
-  } catch {
-    return NextResponse.json({ error: 'Failed to load config maze' }, { status: 500 });
-  }
-}

src/app/api/main-affixes/route.ts

@@ -1,13 +0,0 @@
-import { loadMainAffix } from "@/lib/loader";
-import { NextResponse } from "next/server";
-
-export async function GET() {
-  try {
-    const mainAffix = await loadMainAffix();
-    return new NextResponse(JSON.stringify(mainAffix), {
-      headers: { "Content-Type": "application/json" }
-    });
-  } catch {
-    return NextResponse.json({ error: 'Failed to load main affix' }, { status: 500 });
-  }
-}

src/app/api/sub-affixes/route.ts

@@ -1,13 +0,0 @@
-import { loadSubAffix } from "@/lib/loader";
-import { NextResponse } from "next/server";
-
-export async function GET() {
-  try {
-    const subAffix = await loadSubAffix();
-    return new NextResponse(JSON.stringify(subAffix), {
-      headers: { "Content-Type": "application/json" }
-    });
-  } catch {
-    return NextResponse.json({ error: 'Failed to load sub affix' }, { status: 500 });
-  }
-}

src/components/actionBar/index.tsx

@@ -234,7 +234,7 @@ export default function ActionBar() {
                   <Image
                     src={`/icon/${avatarSelected.damageType.toLowerCase()}.webp`}
                     alt={'fire'}
-                    className="h-[40px] w-[40px] object-contain"
+                    className="h-10 w-10 object-contain"
                     width={100}
                     height={100}
                   />

src/components/showcaseCard/index.tsx

@@ -1,6 +1,5 @@
 "use client";
-
-import React, { useEffect, useState, useRef, useMemo, useCallback } from 'react';
+import { useEffect, useState, useRef, useMemo, useCallback } from 'react';
 import useAvatarStore from "@/stores/avatarStore";
 import { FastAverageColor, FastAverageColorResult } from 'fast-average-color';
 import NextImage from 'next/image';
@@ -53,7 +52,8 @@ export default function ShowCaseInfo() {
         link.href = canvas.toDataURL("image/png");
         link.click();
       })
-      .catch(() => {
+      .catch((e) => {
+        console.log(e)
         toast.error("Error generating showcase card!");
       });
   }, [cardRef, avatarSelected, locale]);
@@ -567,7 +567,7 @@ export default function ShowCaseInfo() {
               <div className="absolute top-4 left-4">
                 {avatarSelected && avatarInfo && avatarData?.data && typeof avatarData?.data?.rank === "number" && (
                   <div className="flex flex-col">
-                    {avatarInfo?.RankIcon.map((src, index) => {
+                    {avatarInfo?.RankIcon?.map((src, index) => {
                       const isActive = avatarData?.data?.rank > index;
 
                       return (

src/hooks/useFetchASData.ts

@@ -1,6 +1,7 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 "use client"
 import { useQuery } from '@tanstack/react-query'
-import { fetchASByIdsNative, getASEventListApi } from '@/lib/api'
+import { fetchASEventApi, getASEventListApi } from '@/lib/api'
 import { useEffect } from 'react'
 import { listCurrentLanguageApi } from '@/constant/constant'
 import useLocaleStore from '@/stores/localeStore'
@@ -21,8 +22,7 @@ export const useFetchASData = () => {
     const { data: dataASInfo, error: errorASInfo } = useQuery({
         queryKey: ['asInfoData', locale],
         queryFn: () =>
-            fetchASByIdsNative(
-                dataAS!.map((item) => item.id),
+            fetchASEventApi(
                 listCurrentLanguageApi[locale.toLowerCase()]
             ),
         staleTime: 1000 * 60 * 5,
@@ -33,13 +33,19 @@ export const useFetchASData = () => {
                 for (const item of newData[key].Level) {
                     item.EventIDList1 = item.EventIDList1.map((event: EventStageDetail) => ({
                         ...event,
-                        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                        MonsterList: event.MonsterList.map(({ $type, ...rest }) => rest)
+
+                        MonsterList: event.MonsterList.map((monster) => {
+                            const { $type, ...rest } = monster;
+                            return rest;
+                        })
                     }))
                     item.EventIDList2 = item.EventIDList2.map((event: EventStageDetail) => ({
                         ...event,
-                        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                        MonsterList: event.MonsterList.map(({ $type, ...rest }) => rest)
+      
+                        MonsterList: event.MonsterList.map((monster) => {
+                            const { $type, ...rest } = monster;
+                            return rest;
+                        })
                     }))
                 }
             }

src/hooks/useFetchAvatarData.ts

@@ -1,6 +1,7 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 "use client"
 import { useQuery } from '@tanstack/react-query'
-import { fetchCharactersByIdsNative, getCharacterListApi } from '@/lib/api'
+import { fetchCharactersApi, getCharacterListApi } from '@/lib/api'
 import { useEffect } from 'react'
 import { toast } from 'react-toastify'
 import useAvatarStore from '@/stores/avatarStore'
@@ -36,14 +37,12 @@ export const useFetchAvatarData = () => {
         for (const avatar of Object.values(avatarStore)) {
             setAvatar(avatar)
         }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [mapAvatarInfo])
     
     const { data: dataAvatarInfo, error: errorAvatarInfo } = useQuery({
         queryKey: ['avatarInfoData', locale],
         queryFn: () =>
-            fetchCharactersByIdsNative(
-                dataAvatar!.map((item) => item.id),
+            fetchCharactersApi(
                 listCurrentLanguageApi[locale.toLowerCase()]
             ),
         staleTime: 1000 * 60 * 5,
@@ -60,7 +59,6 @@ export const useFetchAvatarData = () => {
         } else if (errorAvatar) {
             toast.error("Failed to load avatar data")
         }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [dataAvatar, errorAvatar])
 
     useEffect(() => {
@@ -69,6 +67,5 @@ export const useFetchAvatarData = () => {
         } else if (errorAvatarInfo) {
             toast.error("Failed to load avatar info data")
         }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [dataAvatarInfo, errorAvatarInfo])
 }

src/hooks/useFetchLightconeData.ts

@@ -1,6 +1,6 @@
 "use client"
 import { useQuery } from '@tanstack/react-query'
-import { fetchLightconesByIdsNative, getLightconeListApi } from '@/lib/api'
+import { fetchLightconesApi, getLightconeListApi } from '@/lib/api'
 import { useEffect } from 'react'
 import useLightconeStore from '@/stores/lightconeStore'
 import { listCurrentLanguageApi } from '@/constant/constant'
@@ -20,8 +20,7 @@ export const useFetchLightconeData = () => {
     const { data: dataLightconeInfo, error: errorLightconeInfo } = useQuery({
         queryKey: ['lightconeInfoData', locale],
         queryFn: () =>
-            fetchLightconesByIdsNative(
-                dataLightcone!.map((item) => item.id),
+            fetchLightconesApi(
                 listCurrentLanguageApi[locale.toLowerCase()]
             ),
         staleTime: 1000 * 60 * 5,

src/hooks/useFetchMOCData.ts

@@ -1,6 +1,7 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 "use client"
 import { useQuery } from '@tanstack/react-query'
-import { fetchMOCByIdsNative, getMOCEventListApi } from '@/lib/api'
+import { fetchMOCEventApi, getMOCEventListApi } from '@/lib/api'
 import { useEffect } from 'react'
 import { listCurrentLanguageApi } from '@/constant/constant'
 import useLocaleStore from '@/stores/localeStore'
@@ -21,8 +22,7 @@ export const useFetchMOCData = () => {
     const { data: dataMOCInfo, error: errorMOCInfo } = useQuery({
         queryKey: ['mocInfoData', locale],
         queryFn: async () => {
-            const result = await fetchMOCByIdsNative(
-                dataMOC!.map((item) => item.id),
+            const result = await fetchMOCEventApi(
                 listCurrentLanguageApi[locale.toLowerCase()]
             );
             return result;
@@ -34,12 +34,10 @@ export const useFetchMOCData = () => {
                 for (const item of newData[key]) {
                     item.EventIDList1 = item.EventIDList1.map((event: EventStageDetail) => ({
                         ...event,
-                        // eslint-disable-next-line @typescript-eslint/no-unused-vars
                         MonsterList: event.MonsterList.map(({ $type, ...rest }) => rest)
                     }))
                     item.EventIDList2 = item.EventIDList2.map((event: EventStageDetail) => ({
                         ...event,
-                        // eslint-disable-next-line @typescript-eslint/no-unused-vars
                         MonsterList: event.MonsterList.map(({ $type, ...rest }) => rest)
                     }))
                 }

src/hooks/useFetchMonsterData.ts

@@ -1,6 +1,6 @@
 "use client"
 import { useQuery } from '@tanstack/react-query'
-import { getMonsterValueApi, getMonsterListApi, fetchMonsterByIdsNative } from '@/lib/api'
+import { getMonsterValueApi, getMonsterListApi, fetchMonstersApi } from '@/lib/api'
 import { useEffect } from 'react'
 import { toast } from 'react-toastify'
 import useMonsterStore from '@/stores/monsterStore'
@@ -25,8 +25,7 @@ export const useFetchMonsterData = () => {
     const { data: dataMonsterDetail, error: errorMonsterDetail } = useQuery({
         queryKey: ['monsterDetailData', locale],
         queryFn: () =>
-            fetchMonsterByIdsNative(
-                dataMonster!.list.map((item) => item.id),
+            fetchMonstersApi(
                 listCurrentLanguageApi[locale.toLowerCase()]
             ),
         staleTime: 1000 * 60 * 5,

src/hooks/useFetchPEAKData.ts

@@ -1,6 +1,7 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 "use client"
 import { useQuery } from '@tanstack/react-query'
-import { fetchPeakByIdsNative, getPEAKEventListApi } from '@/lib/api'
+import { fetchPeakEventApi, getPEAKEventListApi } from '@/lib/api'
 import { useEffect } from 'react'
 import { listCurrentLanguageApi } from '@/constant/constant'
 import useLocaleStore from '@/stores/localeStore'
@@ -21,8 +22,7 @@ export const useFetchPEAKData = () => {
     const { data: dataPEAKInfo, error: errorPEAKInfo } = useQuery({
         queryKey: ['peakInfoData', locale],
         queryFn: () =>
-            fetchPeakByIdsNative(
-                dataPEAK!.map((item) => item.id),
+            fetchPeakEventApi(
                 listCurrentLanguageApi[locale.toLowerCase()]
             ),
         staleTime: 1000 * 60 * 5,
@@ -32,18 +32,15 @@ export const useFetchPEAKData = () => {
                 for (const item of newData[key].PreLevel) {
                     item.EventIDList = item.EventIDList.map((event: EventStageDetail) => ({
                         ...event,
-                        // eslint-disable-next-line @typescript-eslint/no-unused-vars
                         MonsterList: event.MonsterList.map(({ $type, ...rest }) => rest)
                     }))
                 }
                 newData[key].BossLevel.EventIDList = newData[key].BossLevel.EventIDList.map((event: EventStageDetail) => ({
                     ...event,
-                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
                     MonsterList: event.MonsterList.map(({ $type, ...rest }) => rest)
                 }))
                 newData[key].BossConfig.EventIDList = newData[key].BossConfig.EventIDList.map((event: EventStageDetail) => ({
                     ...event,
-                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
                     MonsterList: event.MonsterList.map(({ $type, ...rest }) => rest)
                 }))
             }

src/hooks/useFetchPFData.ts

@@ -1,6 +1,7 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 "use client"
 import { useQuery } from '@tanstack/react-query'
-import { fetchPFByIdsNative, getPFEventListApi } from '@/lib/api'
+import { fetchPFEventApi, getPFEventListApi } from '@/lib/api'
 import { useEffect } from 'react'
 import { listCurrentLanguageApi } from '@/constant/constant'
 import useLocaleStore from '@/stores/localeStore'
@@ -21,8 +22,7 @@ export const useFetchPFData = () => {
     const { data: dataPFInfo, error: errorPFInfo } = useQuery({
         queryKey: ['pfInfoData', locale],
         queryFn: () =>
-            fetchPFByIdsNative(
-                dataPF!.map((item) => item.id),
+            fetchPFEventApi(
                 listCurrentLanguageApi[locale.toLowerCase()]
             ),
         staleTime: 1000 * 60 * 5,
@@ -33,12 +33,10 @@ export const useFetchPFData = () => {
                 for (const item of newData[key].Level) {
                     item.EventIDList1 = item.EventIDList1.map((event: EventStageDetail) => ({
                         ...event,
-                        // eslint-disable-next-line @typescript-eslint/no-unused-vars
                         MonsterList: event.MonsterList.map(({ $type, ...rest }) => rest)
                     }))
                     item.EventIDList2 = item.EventIDList2.map((event: EventStageDetail) => ({
                         ...event,
-                        // eslint-disable-next-line @typescript-eslint/no-unused-vars
                         MonsterList: event.MonsterList.map(({ $type, ...rest }) => rest)
                     }))
                 }