FIX: fix bug not create avatar

src/hooks/useFetchAvatarData.ts

@@ -6,12 +6,13 @@ 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'
+import { converterToAvatarStore } from '@/helper'
+import { CharacterDetail } from '@/types'
 
 export const useFetchAvatarData = () => {
     const { setAvatars, avatars } = useUserDataStore()
-    const { setListAvatar, setAllMapAvatarInfo, setAvatarSelected } = useAvatarStore()
+    const { setListAvatar, setAllMapAvatarInfo, mapAvatarInfo, setAvatarSelected } = useAvatarStore()
     const { locale } = useLocaleStore()
     const { data: dataAvatar, error: errorAvatar } = useQuery({
         queryKey: ['avatarData'],
@@ -27,25 +28,37 @@ export const useFetchAvatarData = () => {
         staleTime: 1000 * 60 * 5,
     })
 
+
+    useEffect(() => {
+        const listAvatarId = Object.keys(avatars)
+        const listAvatarNotExist = Object.keys(mapAvatarInfo).filter((avatarId) => !listAvatarId.includes(avatarId))
+        const avatarDiff = listAvatarNotExist.reduce((acc, avatarId) => {
+            acc[avatarId] = mapAvatarInfo[avatarId]
+            return acc
+        }, {} as Record<string, CharacterDetail>)
+        const avatarStore = converterToAvatarStore(avatarDiff)
+        if (Object.keys(avatarStore).length === 0) return
+    
+        setAvatars({...avatarStore })
+    // 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),
-            listCurrentLanguageApi[locale.toLowerCase()]
-          ),
+            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")
         }
@@ -57,5 +70,5 @@ export const useFetchAvatarData = () => {
         } else if (errorAvatarInfo) {
             toast.error("Failed to load avatar info data")
         }
-    }, [dataAvatarInfo, errorAvatarInfo, setAllMapAvatarInfo])
+    }, [dataAvatarInfo, errorAvatarInfo, setAllMapAvatarInfo, setAvatars])
 }