UPDATE: monster bar

src/hooks/index.ts

@@ -0,0 +1,9 @@
+export * from "./useFetchConfigData";
+export * from "./useChangeTheme";
+export * from "./useFetchAvatarData";
+export * from "./useFetchLightconeData";
+export * from "./useFetchRelicData";
+export * from "./useFetchMonsterData";
+export * from "./useFetchPFData";
+export * from "./useFetchMOCData";
+export * from "./useFetchASData";

src/hooks/useFetchASData.ts

@@ -0,0 +1,66 @@
+"use client"
+import { useQuery } from '@tanstack/react-query'
+import { fetchASByIdsNative, getASEventListApi } from '@/lib/api'
+import { useEffect } from 'react'
+import { listCurrentLanguageApi } from '@/lib/constant'
+import useLocaleStore from '@/stores/localeStore'
+import { toast } from 'react-toastify'
+import useEventStore from '@/stores/eventStore'
+import { EventStageDetail } from '@/types'
+
+export const useFetchASData = () => {
+    const { setASEvent, setMapASInfo } = useEventStore()
+    const { locale } = useLocaleStore()
+    const { data: dataAS, error: errorAS } = useQuery({
+        queryKey: ['asData'],
+        queryFn: getASEventListApi,
+        select: (data) => data.sort((a, b) => Number(b.id) - Number(a.id)),
+        staleTime: 1000 * 60 * 5,
+    })
+
+    const { data: dataASInfo, error: errorASInfo } = useQuery({
+        queryKey: ['asInfoData', locale],
+        queryFn: () =>
+            fetchASByIdsNative(
+                dataAS!.map((item) => item.id),
+                listCurrentLanguageApi[locale.toLowerCase()]
+            ),
+        staleTime: 1000 * 60 * 5,
+        enabled: !!dataAS,
+        select: (data) => {
+            const newData = { ...data }
+            for (const key in newData) {
+                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)
+                    }))
+                }
+            }
+            return newData
+        },
+    });
+
+    useEffect(() => {
+        if (dataAS && !errorAS) {
+            setASEvent(dataAS)
+        } else if (errorAS) {
+            toast.error("Failed to load AS data")
+        }
+    }, [dataAS, errorAS, setASEvent])
+
+    useEffect(() => {
+        if (dataASInfo && !errorASInfo) {
+            setMapASInfo(dataASInfo)
+        } else if (errorASInfo) {
+            toast.error("Failed to load AS info data")
+        }
+
+    }, [dataASInfo, errorASInfo, setMapASInfo])
+}

src/hooks/useFetchAvatarData.ts

@@ -0,0 +1,61 @@
+"use client"
+import { useQuery } from '@tanstack/react-query'
+import { fetchCharactersByIdsNative, getCharacterListApi } from '@/lib/api'
+import { useEffect } from 'react'
+import { toast } from 'react-toastify'
+import useAvatarStore from '@/stores/avatarStore'
+import { listCurrentLanguageApi } from '@/lib/constant'
+import useLocaleStore from '@/stores/localeStore'
+import { converterToAvatarStore, getAvatarNotExist } from '@/helper'
+import useUserDataStore from '@/stores/userDataStore'
+
+export const useFetchAvatarData = () => {
+    const { setAvatars, avatars } = useUserDataStore()
+    const { setListAvatar, setAllMapAvatarInfo, setAvatarSelected } = useAvatarStore()
+    const { locale } = useLocaleStore()
+    const { data: dataAvatar, error: errorAvatar } = useQuery({
+        queryKey: ['avatarData'],
+        queryFn: getCharacterListApi,
+        select: (data) => data.sort((a, b) => {
+            const aHasRelease = typeof a.release === 'number';
+            const bHasRelease = typeof b.release === 'number';
+            if (!aHasRelease && !bHasRelease) return 0;
+            if (!aHasRelease) return -1;
+            if (!bHasRelease) return 1;
+            return b.release! - a.release!;
+        }),
+        staleTime: 1000 * 60 * 5,
+    })
+
+    const { data: dataAvatarInfo, error: errorAvatarInfo } = useQuery({
+        queryKey: ['avatarInfoData', locale],
+        queryFn: () =>
+          fetchCharactersByIdsNative(
+            dataAvatar!.map((item) => item.id),
+            listCurrentLanguageApi[locale.toLowerCase()]
+          ),
+        staleTime: 1000 * 60 * 5,
+        enabled: !!dataAvatar,
+      });
+
+    useEffect(() => {
+        if (dataAvatar && !errorAvatar) {
+            setListAvatar(dataAvatar)
+            setAvatarSelected(dataAvatar[0])
+            const avatarStore = converterToAvatarStore(getAvatarNotExist())
+            if (Object.keys(avatarStore).length > 0) {
+                setAvatars({ ...avatars, ...avatarStore })
+            }
+        } else if (errorAvatar) {
+            toast.error("Failed to load avatar data")
+        }
+    }, [dataAvatar, errorAvatar, setAvatarSelected, setAvatars, setListAvatar, avatars])
+
+    useEffect(() => {
+        if (dataAvatarInfo && !errorAvatarInfo) {
+            setAllMapAvatarInfo(dataAvatarInfo)
+        } else if (errorAvatarInfo) {
+            toast.error("Failed to load avatar info data")
+        }
+    }, [dataAvatarInfo, errorAvatarInfo, setAllMapAvatarInfo])
+}

src/hooks/useFetchConfigData.ts

@@ -0,0 +1,37 @@
+"use client"
+import { useQuery } from '@tanstack/react-query'
+import { getConfigMazeApi, getMainAffixApi, getSubAffixApi } from '@/lib/api'
+import useAffixStore from '@/stores/affixStore'
+import useMazeStore from '@/stores/mazeStore'
+import { useEffect } from 'react'
+import { toast } from 'react-toastify'
+
+export const useFetchConfigData = () => {
+
+    const { setMapMainAffix, setMapSubAffix } = useAffixStore()
+    const { setAllMazeData } = useMazeStore()
+
+    const { data, error } = useQuery({
+        queryKey: ['initialConfigData'],
+        queryFn: async () => {
+            const [maze, main, sub] = await Promise.all([
+                getConfigMazeApi(),
+                getMainAffixApi(),
+                getSubAffixApi(),
+            ])
+            return { maze, main, sub }
+        },
+        staleTime: 1000 * 60 * 5,
+    })
+
+    useEffect(() => {
+        if (data && !error) {
+            setAllMazeData(data.maze)
+            setMapMainAffix(data.main)
+            setMapSubAffix(data.sub)
+        }
+        else if (error) {
+            toast.error("Failed to load initial config data")
+        }
+    }, [data, error, setAllMazeData, setMapMainAffix, setMapSubAffix])
+}

src/hooks/useFetchLightconeData.ts

@@ -0,0 +1,47 @@
+"use client"
+import { useQuery } from '@tanstack/react-query'
+import { fetchLightconesByIdsNative, getLightconeListApi } from '@/lib/api'
+import { useEffect } from 'react'
+import useLightconeStore from '@/stores/lightconeStore'
+import { listCurrentLanguageApi } from '@/lib/constant'
+import useLocaleStore from '@/stores/localeStore'
+import { toast } from 'react-toastify'
+
+export const useFetchLightconeData = () => {
+    const { setListLightcone, setAllMapLightconeInfo } = useLightconeStore()
+    const { locale } = useLocaleStore()
+    const { data: dataLightcone, error: errorLightcone } = useQuery({
+        queryKey: ['lightconeData'],
+        queryFn: getLightconeListApi,
+        select: (data) => data.sort((a, b) => Number(b.id) - Number(a.id)),
+        staleTime: 1000 * 60 * 5,
+    })
+
+    const { data: dataLightconeInfo, error: errorLightconeInfo } = useQuery({
+        queryKey: ['lightconeInfoData', locale],
+        queryFn: () =>
+            fetchLightconesByIdsNative(
+                dataLightcone!.map((item) => item.id),
+                listCurrentLanguageApi[locale.toLowerCase()]
+            ),
+        staleTime: 1000 * 60 * 5,
+        enabled: !!dataLightcone,
+    });
+
+    useEffect(() => {
+        if (dataLightcone && !errorLightcone) {
+            setListLightcone(dataLightcone)
+        } else if (errorLightcone) {
+            toast.error("Failed to load lightcone data")
+        }
+    }, [dataLightcone, errorLightcone, setListLightcone])
+
+    useEffect(() => {
+        if (dataLightconeInfo && !errorLightconeInfo) {
+            setAllMapLightconeInfo(dataLightconeInfo)
+        } else if (errorLightconeInfo) {
+            toast.error("Failed to load lightcone info data")
+        }
+
+    }, [dataLightconeInfo, errorLightconeInfo, setAllMapLightconeInfo])
+}

src/hooks/useFetchMOCData.ts

@@ -0,0 +1,68 @@
+"use client"
+import { useQuery } from '@tanstack/react-query'
+import { fetchMOCByIdsNative, getMOCEventListApi } from '@/lib/api'
+import { useEffect } from 'react'
+import { listCurrentLanguageApi } from '@/lib/constant'
+import useLocaleStore from '@/stores/localeStore'
+import { toast } from 'react-toastify'
+import useEventStore from '@/stores/eventStore'
+import { EventStageDetail, MocDetail } from '@/types'
+
+export const useFetchMOCData = () => {
+    const { setMOCEvent, setMapMOCInfo } = useEventStore()
+    const { locale } = useLocaleStore()
+    const { data: dataMOC, error: errorMOC } = useQuery({
+        queryKey: ['mocData'],
+        queryFn: getMOCEventListApi,
+        select: (data) => data.sort((a, b) => Number(b.id) - Number(a.id)),
+        staleTime: 1000 * 60 * 5,
+    })
+
+    const { data: dataMOCInfo, error: errorMOCInfo } = useQuery({
+        queryKey: ['mocInfoData', locale],
+        queryFn: async () => {
+            const result = await fetchMOCByIdsNative(
+                dataMOC!.map((item) => item.id),
+                listCurrentLanguageApi[locale.toLowerCase()]
+            );
+            return result;
+        },
+        staleTime: 1000 * 60 * 5,
+        select: (data) => {
+            const newData = { ...data }
+            for (const key in newData) {
+                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)
+                    }))
+                }
+            }
+            return newData
+        },
+        enabled: !!dataMOC,
+    });
+
+    useEffect(() => {
+        if (dataMOC && !errorMOC) {
+            setMOCEvent(dataMOC)
+        } else if (errorMOC) {
+            toast.error("Failed to load MOC data")
+        }
+    }, [dataMOC, errorMOC, setMOCEvent])
+
+    useEffect(() => {
+        if (dataMOCInfo && !errorMOCInfo) {
+            setMapMOCInfo(dataMOCInfo as Record<string, MocDetail[]>)
+        } else if (errorMOCInfo) {
+            toast.error("Failed to load MOC info data")
+        }
+
+    }, [dataMOCInfo, errorMOCInfo, setMapMOCInfo])
+}

src/hooks/useFetchMonsterData.ts

@@ -0,0 +1,37 @@
+"use client"
+import { useQuery } from '@tanstack/react-query'
+import { getMonsterDetailApi, getMonsterListApi } from '@/lib/api'
+import { useEffect } from 'react'
+import { toast } from 'react-toastify'
+import useMonsterStore from '@/stores/monsterStore'
+
+export const useFetchMonsterData = () => {
+    const { setAllMapMonster, setListMonster, setAllMapMonsterInfo } = useMonsterStore()
+    const { data: dataMonster, error: errorMonster } = useQuery({
+        queryKey: ['monsterData'],
+        queryFn: getMonsterListApi,
+        staleTime: 1000 * 60 * 5,
+    })
+    const { data: dataMonsterInfo, error: errorMonsterInfo } = useQuery({
+        queryKey: ['monsterInfoData'],
+        queryFn: getMonsterDetailApi,
+        staleTime: 1000 * 60 * 5,
+    })
+
+    useEffect(() => {
+        if (dataMonster && !errorMonster) {
+            setListMonster(dataMonster.list.sort((a, b) => Number(b.id) - Number(a.id)))
+            setAllMapMonster(dataMonster.map)
+        } else if (errorMonster) {
+            toast.error("Failed to load monster data")
+        }
+    }, [dataMonster, errorMonster, setAllMapMonster, setListMonster])
+
+    useEffect(() => {
+        if (dataMonsterInfo && !errorMonsterInfo) {
+            setAllMapMonsterInfo(dataMonsterInfo)
+        } else if (errorMonsterInfo) {
+            toast.error("Failed to load monster info data")
+        }
+    }, [dataMonsterInfo, errorMonsterInfo, setAllMapMonsterInfo])
+}

src/hooks/useFetchPFData.ts

@@ -0,0 +1,66 @@
+"use client"
+import { useQuery } from '@tanstack/react-query'
+import { fetchPFByIdsNative, getPFEventListApi } from '@/lib/api'
+import { useEffect } from 'react'
+import { listCurrentLanguageApi } from '@/lib/constant'
+import useLocaleStore from '@/stores/localeStore'
+import { toast } from 'react-toastify'
+import useEventStore from '@/stores/eventStore'
+import { EventStageDetail } from '@/types'
+
+export const useFetchPFData = () => {
+    const { setPFEvent, setMapPFInfo } = useEventStore()
+    const { locale } = useLocaleStore()
+    const { data: dataPF, error: errorPF } = useQuery({
+        queryKey: ['pfData'],
+        queryFn: getPFEventListApi,
+        select: (data) => data.sort((a, b) => Number(b.id) - Number(a.id)),
+        staleTime: 1000 * 60 * 5,
+    })
+
+    const { data: dataPFInfo, error: errorPFInfo } = useQuery({
+        queryKey: ['pfInfoData', locale],
+        queryFn: () =>
+            fetchPFByIdsNative(
+                dataPF!.map((item) => item.id),
+                listCurrentLanguageApi[locale.toLowerCase()]
+            ),
+        staleTime: 1000 * 60 * 5,
+        enabled: !!dataPF,
+        select: (data) => {
+            const newData = { ...data }
+            for (const key in newData) {
+                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)
+                    }))
+                }
+            }
+            return newData
+        },
+    });
+
+    useEffect(() => {
+        if (dataPF && !errorPF) {
+            setPFEvent(dataPF)
+        } else if (errorPF) {
+            toast.error("Failed to load PF data")
+        }
+    }, [dataPF, errorPF, setPFEvent])
+
+    useEffect(() => {
+        if (dataPFInfo && !errorPFInfo) {
+            setMapPFInfo(dataPFInfo)
+        } else if (errorPFInfo) {
+            toast.error("Failed to load PF info data")
+        }
+
+    }, [dataPFInfo, errorPFInfo, setMapPFInfo])
+}

src/hooks/useFetchRelicData.ts

@@ -0,0 +1,46 @@
+"use client"
+import { useQuery } from '@tanstack/react-query'
+import { fetchRelicsByIdsNative, getRelicSetListApi } from '@/lib/api'
+import { useEffect } from 'react'
+import useRelicStore from '@/stores/relicStore'
+import { listCurrentLanguageApi } from '@/lib/constant'
+import useLocaleStore from '@/stores/localeStore'
+import { toast } from 'react-toastify'
+
+export const useFetchRelicData = () => {
+    const { setListRelic, setAllMapRelicInfo } = useRelicStore()
+    const { locale } = useLocaleStore()
+    const { data: dataRelic, error: errorRelic } = useQuery({
+        queryKey: ['relicData'],
+        queryFn: getRelicSetListApi,
+        staleTime: 1000 * 60 * 5,
+    })
+
+    const { data: dataRelicInfo, error: errorRelicInfo } = useQuery({
+        queryKey: ['relicInfoData', locale],
+        queryFn: () =>
+            fetchRelicsByIdsNative(
+                dataRelic!.map((item) => item.id),
+                listCurrentLanguageApi[locale.toLowerCase()]
+            ),
+        staleTime: 1000 * 60 * 5,
+        enabled: !!dataRelic,
+    });
+
+    useEffect(() => {
+        if (dataRelic && !errorRelic) {
+            setListRelic(dataRelic)
+        } else if (errorRelic) {
+            toast.error("Failed to load relic data")
+        }
+    }, [dataRelic, errorRelic, setListRelic])
+
+    useEffect(() => {
+        if (dataRelicInfo && !errorRelicInfo) {
+            setAllMapRelicInfo(dataRelicInfo)
+        } else if (errorRelicInfo) {
+            toast.error("Failed to load relic info data")
+        }
+
+    }, [dataRelicInfo, errorRelicInfo, setAllMapRelicInfo])
+}