From ba381c83ac182e855edce9217c7c072197fa165d Mon Sep 17 00:00:00 2001
From: Michael Keller <chaelli@gmail.com>
Date: Mon, 18 Sep 2023 17:49:15 +0200
Subject: [PATCH] fix(MgtProfile): Fix handling of null values for educations &
 work positions (#2717)

improved nullish value handling for education and work, only render when data is present

---------

Co-authored-by: Michael Keller <michael.keller@viu.ch>
Co-authored-by: Gavin Barron <gavinbarron@microsoft.com>
---
 .../src/components/mgt-profile/mgt-profile.ts | 47 ++++++++++++++-----
 1 file changed, 36 insertions(+), 11 deletions(-)

diff --git a/packages/mgt-components/src/components/mgt-profile/mgt-profile.ts b/packages/mgt-components/src/components/mgt-profile/mgt-profile.ts
index e3d0a691c4..3824fa8e8e 100644
--- a/packages/mgt-components/src/components/mgt-profile/mgt-profile.ts
+++ b/packages/mgt-components/src/components/mgt-profile/mgt-profile.ts
@@ -5,8 +5,14 @@
  * -------------------------------------------------------------------------------------------
  */
 
-import { EducationalActivity, PersonAnnualEvent, PersonInterest, Profile } from '@microsoft/microsoft-graph-types-beta';
-import { html, TemplateResult } from 'lit';
+import {
+  EducationalActivity,
+  PersonAnnualEvent,
+  PersonInterest,
+  PhysicalAddress,
+  Profile
+} from '@microsoft/microsoft-graph-types-beta';
+import { html, TemplateResult, nothing } from 'lit';
 import { BasePersonCardSection } from '../BasePersonCardSection';
 import { getSvg, SvgIcon } from '../../utils/SvgHelper';
 import { styles } from './mgt-profile-css';
@@ -306,7 +312,7 @@ export class MgtProfile extends BasePersonCardSection {
                  ${position?.detail?.company?.displayName}
                </div>
                <div class="work-position__location" tabindex="0">
-                 ${position?.detail?.company?.address?.city}, ${position?.detail?.company?.address?.state}
+                 ${this.displayLocation(position?.detail?.company?.address)}
                </div>
              </div>
            </div>
@@ -351,11 +357,14 @@ export class MgtProfile extends BasePersonCardSection {
                ${this.getDisplayDateRange(educationalActivity)}
              </div>
            </div>
-           <div class="data-list__item__content">
-             <div class="educational-activity__degree" tabindex="0">
-               ${educationalActivity.program.displayName || 'Bachelors Degree'}
-             </div>
-           </div>
+           ${
+             educationalActivity.program.displayName
+               ? html`<div class="data-list__item__content">
+                  <div class="educational-activity__degree" tabindex="0">
+                  ${educationalActivity.program.displayName}
+                </div>`
+               : nothing
+           }
          </div>
        `);
     }
@@ -492,16 +501,32 @@ export class MgtProfile extends BasePersonCardSection {
     });
   }
 
-  private getDisplayDateRange(event: EducationalActivity): string {
+  private getDisplayDateRange(event: EducationalActivity): string | symbol {
+    // if startMonthYear is not defined, we do not show the date range (otherwise it will always start with 1970)
+    if (!event.startMonthYear) {
+      return nothing;
+    }
+
     const start = new Date(event.startMonthYear).getFullYear();
-    if (start === 0) {
-      return null;
+    // if the start year is 0 or 1 - it's probably an error or a strange "undefined"-value
+    if (start === 0 || start === 1) {
+      return nothing;
     }
 
     const end = event.endMonthYear ? new Date(event.endMonthYear).getFullYear() : this.strings.currentYearSubtitle;
     return `${start} — ${end}`;
   }
 
+  private displayLocation(address: PhysicalAddress | undefined): string | symbol {
+    if (address?.city) {
+      if (address.state) {
+        return `${address.city}, ${address.state}`;
+      }
+      return address.city;
+    }
+    return nothing;
+  }
+
   private initPostRenderOperations(): void {
     setTimeout(() => {
       try {