From 731af8a3b8f2c7ec8a8bf409e4546581d214b896 Mon Sep 17 00:00:00 2001
From: Dejan <panovskidejan@yahoo.com>
Date: Sat, 26 Oct 2024 14:58:44 +0200
Subject: [PATCH] - Added the profile image or the initials if profile picture
 is missing to the grocery item

---
 components/pages/grocery/GroceryItem.tsx | 52 +++++++++++++++++++-----
 1 file changed, 41 insertions(+), 11 deletions(-)

diff --git a/components/pages/grocery/GroceryItem.tsx b/components/pages/grocery/GroceryItem.tsx
index dbc6047..32c79ad 100644
--- a/components/pages/grocery/GroceryItem.tsx
+++ b/components/pages/grocery/GroceryItem.tsx
@@ -56,6 +56,10 @@ const GroceryItem = ({
     }
   };
 
+  const getInitials = (firstName: string, lastName: string) => {
+    return `${firstName.charAt(0)}${lastName.charAt(0)}`;
+  };
+
   return (
     <View
       key={item.id}
@@ -142,17 +146,43 @@ const GroceryItem = ({
             <View height={0.7} backgroundColor="#e7e7e7" width={"98%"} />
           </View>
           <View paddingL-0 paddingT-12 flexS row centerV>
-            <ImageBackground
-              style={{
-                width: 22.36,
-                aspectRatio: 1,
-                borderRadius: 50,
-                backgroundColor: "red",
-                marginRight: 10,
-                overflow: "hidden",
-              }}
-              source={require("../../../assets/images/child-picture.png")}
-            />
+            {profileData?.pfp ?  <ImageBackground
+                source={require("../../../assets/images/child-picture.png")}
+                style={{
+                  height: 24.64,
+                  aspectRatio: 1,
+                  borderRadius: 22,
+                  overflow: "hidden",
+                }}
+            /> : <View
+                style={{
+                  position: "relative",
+                  width: 24.64,
+                  aspectRatio: 1,
+                  marginRight: 4
+                }}
+            >
+              <View
+                  style={{
+                    backgroundColor: "#ccc",
+                    justifyContent: "center",
+                    alignItems: "center",
+                    borderRadius: 100, // Circular shape
+                    width: "100%",
+                    height: "100%",
+                  }}
+              >
+                <Text
+                    style={{
+                      color: "#fff",
+                      fontSize: 12,
+                      fontWeight: "bold",
+                    }}
+                >
+                  {getInitials(itemCreator.firstName, itemCreator.lastName ?? "")}
+                </Text>
+              </View>
+            </View>}
             <Text color="#858585" style={styles.authorTxt}>
               Requested by {itemCreator?.firstName}
             </Text>