UPDATE: monster bar

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])
+}