From 9c53cbf02cd455d6fb94e831c2ed7bd5e588b4c8 Mon Sep 17 00:00:00 2001
From: Nickii Miaro <miaronkirote@gmail.com>
Date: Mon, 11 Dec 2023 22:40:11 +0300
Subject: [PATCH] fix: update person details when mgt-person attributes are
 changed (#2871)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

fix bug in changing mgt-person attributes

---------

Co-authored-by: Sébastien Levert <sebastienlevert@users.noreply.github.com>
---
 .../src/components/mgt-person/mgt-person.ts   | 10 +++----
 .../person/person.properties.stories.js       | 26 +++++++++++++++++++
 2 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/packages/mgt-components/src/components/mgt-person/mgt-person.ts b/packages/mgt-components/src/components/mgt-person/mgt-person.ts
index a289ee7e85..8299be3738 100644
--- a/packages/mgt-components/src/components/mgt-person/mgt-person.ts
+++ b/packages/mgt-components/src/components/mgt-person/mgt-person.ts
@@ -156,7 +156,8 @@ export class MgtPerson extends MgtTemplatedComponent {
     }
 
     this._personQuery = value;
-    this.personDetailsInternal = null;
+    this._personDetailsInternal = null;
+    this._personDetails = null;
     void this.requestStateUpdate();
   }
 
@@ -203,7 +204,8 @@ export class MgtPerson extends MgtTemplatedComponent {
     }
 
     this._userId = value;
-    this.personDetailsInternal = null;
+    this._personDetailsInternal = null;
+    this._personDetails = null;
     void this.requestStateUpdate();
   }
 
@@ -273,7 +275,6 @@ export class MgtPerson extends MgtTemplatedComponent {
     this._fetchedPresence = null;
 
     void this.requestStateUpdate();
-    this.requestUpdate('personDetailsInternal');
   }
 
   /**
@@ -299,7 +300,6 @@ export class MgtPerson extends MgtTemplatedComponent {
     this._fetchedPresence = null;
 
     void this.requestStateUpdate();
-    this.requestUpdate('personDetails');
   }
 
   /**
@@ -321,9 +321,7 @@ export class MgtPerson extends MgtTemplatedComponent {
     }
 
     this._isInvalidImageSrc = !value;
-    const oldValue = this._personImage;
     this._personImage = value;
-    this.requestUpdate('personImage', oldValue);
   }
 
   /**
diff --git a/stories/components/person/person.properties.stories.js b/stories/components/person/person.properties.stories.js
index b150e19a25..70993ce898 100644
--- a/stories/components/person/person.properties.stories.js
+++ b/stories/components/person/person.properties.stories.js
@@ -44,6 +44,32 @@ export const setPersonDetails = () => html`
    </script>
  `;
 
+export const changePersonQuery = () => html`
+  <mgt-person class="my-person" person-query="me" view="threelines"></mgt-person>
+
+  <button class="button">Change person-query </button>
+  <script>
+    const person = document.querySelector('.my-person');
+    const button = document.querySelector('.button');
+    button.addEventListener('click', () => {
+      person.personQuery = 'Isaiah';
+    });
+  </script>
+  `;
+
+export const changeUserId = () => html`
+  <mgt-person class="my-person" person-query="me" view="threelines"></mgt-person>
+
+  <button class="button">Change user-id </button>
+  <script>
+    const person = document.querySelector('.my-person');
+    const button = document.querySelector('.button');
+    button.addEventListener('click', () => {
+      person.userId = '2804bc07-1e1f-4938-9085-ce6d756a32d2';
+    });
+  </script>
+  `;
+
 export const personFallbackDetails = () => html`
    <div class="example">
    <mgt-person person-query="mbowen" view="twoLines" show-presence fallback-details='{"displayName":"Megan Bowen"}'></mgt-person>