Merge pull request #16 from wellmaintained/bugfix/10-no-stakeholders-without-photoURL

Fix stakeholder display issues with missing photoURL or displayName

Author: mrdavidlaing

app/organisation/[organisationId]/decision/[id]/identify/page.tsx

@@ -229,9 +229,11 @@ export default function DecisionIdentityPage() {
                                 />
                                 <AvatarFallback>
                                   {driverStakeholder?.displayName
-                                    ?.split(" ")
-                                    .map((n) => n[0])
-                                    .join("") || "?"}
+                                    ? driverStakeholder.displayName
+                                        .split(" ")
+                                        .map((n) => n[0])
+                                        .join("")
+                                    : "👤"}
                                 </AvatarFallback>
                               </Avatar>
                               {driverStakeholder?.displayName}
@@ -269,7 +271,7 @@ export default function DecisionIdentityPage() {
                                     .split(" ")
                                     .map((n) => n[0])
                                     .join("")
-                                : "?"}
+                                : "👤"}
                             </AvatarFallback>
                           </Avatar>
                           {stakeholder.displayName}

components/StakeholderManagement.tsx

@@ -340,10 +340,12 @@ export function StakeholderManagement({ organisationId }: StakeholderManagementP
                         <AvatarImage src={stakeholder.photoURL} />
                         <AvatarFallback>
                           {stakeholder.displayName
-                            .split(' ')
-                            .map((n) => n[0])
-                            .join('')
-                            .toUpperCase()}
+                            ? stakeholder.displayName
+                                .split(' ')
+                                .map((n) => n[0])
+                                .join('')
+                                .toUpperCase()
+                            : "👤"}
                         </AvatarFallback>
                       </Avatar>
                       <div>

components/stakeholder-section.tsx

@@ -132,7 +132,7 @@ export function StakeholderSection({
                                   .split(" ")
                                   .map((n) => n[0])
                                   .join("")
-                              : "?"}
+                              : "👤"}
                           </AvatarFallback>
                         </Avatar>
                         <div>

components/stakeholders/StakeholderListView.tsx

@@ -103,10 +103,12 @@ export function StakeholderListView({
                   <AvatarImage src={stakeholder.photoURL} alt={stakeholder.displayName} />
                   <AvatarFallback>
                     {stakeholder.displayName
-                      .split(" ")
-                      .map((n) => n[0])
-                      .join("")
-                      .toUpperCase()}
+                      ? stakeholder.displayName
+                          .split(" ")
+                          .map((n) => n[0])
+                          .join("")
+                          .toUpperCase()
+                      : "👤"}
                   </AvatarFallback>
                 </Avatar>
                 <div className="flex flex-col">

components/stakeholders/TeamHierarchyTree.tsx

@@ -207,10 +207,12 @@ export function TeamHierarchyTree({
                   <AvatarImage src={stakeholder.photoURL} alt={stakeholder.displayName} />
                   <AvatarFallback>
                     {stakeholder.displayName
-                      .split(" ")
-                      .map((n) => n[0])
-                      .join("")
-                      .toUpperCase()}
+                      ? stakeholder.displayName
+                          .split(" ")
+                          .map((n) => n[0])
+                          .join("")
+                          .toUpperCase()
+                      : "👤"}
                   </AvatarFallback>
                 </Avatar>
                 <div className="flex flex-col flex-1">

lib/infrastructure/firestoreStakeholdersRepository.ts

@@ -65,6 +65,7 @@ export class FirestoreStakeholdersRepository implements StakeholdersRepository {
     // Create new stakeholder
     const docRef = await addDoc(collection(db, this.collectionPath), {
       email: props.email,
+      displayName: props.displayName,
       photoURL: props.photoURL,
     });