Merge pull request #179 from StackOverflowIsBetterThanAnyAI/164-cache-profile-pictures-thumbnails-for-faster-access-to-images

store profile pictures in session storage, grab them if available

Author: StackOverflowIsBetterThanAnyAI

src/hooks/useFetchImageUrl.ts

@@ -1,5 +1,7 @@
 import { useEffect } from 'react'
+import { getItemFromStorage } from '../helper/getItemFromStorage'
 import { getProfilePicture } from '../helper/getProfilePicture'
+import { setItemInStorage } from '../helper/setItemInStorage'
 
 export const useFetchImageUrl = (
     setImageUrl: (value: React.SetStateAction<string>) => void,
@@ -8,11 +10,22 @@ export const useFetchImageUrl = (
     useEffect(() => {
         const fetchImageUrl = async () => {
             try {
-                const data = await getProfilePicture(user_id || '')
-                if (!data) {
-                    throw new Error()
+                const parsedData = getItemFromStorage()
+                const profilePictures = parsedData.profile_pictures || {}
+
+                if (profilePictures[user_id]) {
+                    setImageUrl(profilePictures[user_id])
                 } else {
-                    setImageUrl(data)
+                    const url = await getProfilePicture(user_id)
+                    if (!url) {
+                        throw new Error()
+                    } else {
+                        setImageUrl(url)
+                        const parsed = getItemFromStorage()
+                        const pictures = parsed.profile_pictures || {}
+                        pictures[user_id] = url
+                        setItemInStorage('profile_pictures', pictures)
+                    }
                 }
             } catch (error: any) {}
         }