Merge pull request #72 from AJ-Quran/71-overloading-avatar

Overloading Avatar

src/pages/Main/components/Account/components/AccountData/AccountData.jsx

@@ -22,6 +22,7 @@ import { msgData } from '../../../../../../js/utils/message'
 import { elText } from '../../../../../../js/utils/copy'
 import { load } from '../../../../../../js/db/db'
 import { getImgBlob } from '../../../../../../js/utils/img'
+import { avatars } from '../utils/getAvatar'
 
 import './AccountData.css'
 
@@ -77,6 +78,8 @@ export default function AccountData() {
     const userNewData = { ...formData, img: { img: profileImg } }
     const editedData = await editUser(username, userNewData)
 
+    avatars.get(username).img = profileImg
+
     if (!editedData.ok) {
       setMessage({ msg: editedData.msg, type: editedData.msgType, show: true })
       setTimeout(

src/pages/Main/components/Account/components/utils/Avatar.jsx

@@ -1,27 +1,15 @@
 import { useEffect, useState } from 'react'
 
-import { load } from '../../../../../../js/db/db'
-import { loadLocal } from '../../../../../../js/db/localStorage'
+import { getAvatar } from './getAvatar'
 
 import './Avatar.css'
 
-async function getUserAvatar(username) {
-  username = username ? username : loadLocal('quran').accounts.active
-
-  const img = await load(`accounts/${username}/user/img/img`)
-  const name = await load(`accounts/${username}/user/name`)
-
-  return { name: name[0], img }
-}
-
 export default function Avatar({ style, username, children, ...props }) {
   const [data, setData] = useState({ name: '', img: '' })
 
   useEffect(() => {
     async function loadData() {
-      const userAvatar = username
-        ? await getUserAvatar(username)
-        : await getUserAvatar()
+      const userAvatar = await getAvatar(username)
       setData(userAvatar)
     }
     loadData()

src/pages/Main/components/Account/components/utils/getAvatar.js

@@ -0,0 +1,18 @@
+import { load } from '../../../../../../js/db/db'
+import { loadLocal } from '../../../../../../js/db/localStorage'
+
+const avatars = new Map()
+export { avatars }
+
+export async function getAvatar(username) {
+  username = username ? username : loadLocal('quran').accounts.active
+  if (avatars.get(username)) return avatars.get(username)
+
+  const img = await load(`accounts/${username}/user/img/img`)
+  const name = await load(`accounts/${username}/user/name`)
+
+  const avatar = { name: name[0], img }
+
+  avatars.set(username, avatar)
+  return avatar
+}