Merge pull request #113 from weaponsforge/fix/viky-112

put real profile_picture on /contacts with initial as fallback

client/package.json

@@ -29,6 +29,6 @@
     "next": "13.2.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "use-sync-v": "^2.0.10"
+    "use-sync-v": "^2.0.16"
   }
 }

client/src/components/contacts/display/contactsCardContainer/contactCardGroup/contactCard/index.js

@@ -1,6 +1,7 @@
+import { downloadBlobFromStorage } from '@/lib/utils/firebase/storageutils'
 import { Avatar, Paper, Typography, useTheme } from '@mui/material'
 import { useRouter } from 'next/router'
-import { updateSyncV } from 'use-sync-v'
+import { updateSyncV, useQueryV } from 'use-sync-v'
 
 const getInitial = (first, second, last) => {
   const firstInitial = (first.match(
@@ -28,6 +29,12 @@ export const ContactCard = ({ contact }) => {
   const router = useRouter()
   const theme = useTheme()
 
+  const { data } = useQueryV(`public_picture.${JSON.stringify(contact.profile_picture_url)}`, async () => {
+    const response = await downloadBlobFromStorage(contact.profile_picture_url)
+    const public_picture_url = URL.createObjectURL(response)
+    return public_picture_url
+  })
+
   const initial = getInitial(
     contact.first_name,
     contact.middle_name,
@@ -68,6 +75,7 @@ export const ContactCard = ({ contact }) => {
             backgroundColor: `hsla(${backgroundColor},50%,80%,50%)`,
             border: '1px solid grey',
           }}
+          src={data}
         >
           {initial}
         </Avatar>
@@ -109,6 +117,7 @@ export const ContactCard = ({ contact }) => {
             backgroundColor: `hsla(${backgroundColor},50%,80%,50%)`,
             border: '1px solid grey',
           }}
+          src={data}
         >
           {initial}
         </Avatar>