fix: implement caching on the card state for person card (#3266)

* Cache the user card state

* Make the batch calls if person has person-card support
The calls will respond with network data or cache data. If no cache is found, it loads from network then creates the cache

* fix build

* fix lint issues

---------

Co-authored-by: Nickii Miaro <[email protected]>

Author: musale

packages/mgt-components/src/components/mgt-person-card/mgt-person-card.graph.ts

@@ -5,7 +5,7 @@
  * -------------------------------------------------------------------------------------------
  */
 
-import { BatchResponse, IBatch, IGraph, prepScopes } from '@microsoft/mgt-element';
+import { BatchResponse, CacheItem, CacheService, CacheStore, IBatch, IGraph, prepScopes } from '@microsoft/mgt-element';
 import { Chat, ChatMessage } from '@microsoft/microsoft-graph-types';
 import { Profile } from '@microsoft/microsoft-graph-types-beta';
 
@@ -15,6 +15,7 @@ import { MgtPersonCardState } from './mgt-person-card.types';
 import { MgtPersonCardConfig } from './MgtPersonCardConfig';
 import { validUserByIdScopes } from '../../graph/graph.user';
 import { validInsightScopes } from '../../graph/graph.files';
+import { schemas } from '../../graph/cacheStores';
 
 const userProperties =
   'businessPhones,companyName,department,displayName,givenName,jobTitle,mail,mobilePhone,officeLocation,preferredLanguage,surname,userPrincipalName,id,accountEnabled';
@@ -27,6 +28,11 @@ const batchKeys = {
   person: 'person'
 };
 
+interface CacheCardState extends MgtPersonCardState, CacheItem {}
+
+export const getCardStateInvalidationTime = (): number =>
+  CacheService.config.users.invalidationPeriod || CacheService.config.defaultInvalidationPeriod;
+
 /**
  * Get data to populate the person card
  *
@@ -44,6 +50,15 @@ export const getPersonCardGraphData = async (
 ): Promise<MgtPersonCardState> => {
   const userId = personDetails.id;
   const email = getEmailFromGraphEntity(personDetails);
+  const cache: CacheStore<CacheCardState> = CacheService.getCache<CacheCardState>(
+    schemas.users,
+    schemas.users.stores.cardState
+  );
+  const cardState = await cache.getValue(userId);
+
+  if (cardState && getCardStateInvalidationTime() > Date.now() - cardState.timeCached) {
+    return cardState;
+  }
 
   const isContactOrGroup =
     'classification' in personDetails ||
@@ -101,6 +116,8 @@ export const getPersonCardGraphData = async (
     data.directReports = data.directReports.filter(report => report.accountEnabled);
   }
 
+  await cache.putValue(userId, data);
+
   return data;
 };
 

packages/mgt-components/src/components/mgt-person/mgt-person.ts

@@ -38,6 +38,7 @@ import { personCardConverter, type PersonCardInteraction } from './../PersonCard
 import { styles } from './mgt-person-css';
 import { AvatarType, MgtPersonConfig, avatarTypeConverter } from './mgt-person-types';
 import { strings } from './strings';
+import { getPersonCardGraphData } from '../mgt-person-card/mgt-person-card.graph';
 
 /**
  * Person properties part of original set provided by graph by default
@@ -1202,6 +1203,12 @@ export class MgtPerson extends MgtTemplatedTaskComponent {
 
     details = this.personDetailsInternal || this.personDetails || this.fallbackDetails;
 
+    // load card data at this point
+    if (this.personCardInteraction !== 'none') {
+      // perform the batch requests and cache
+      void getPersonCardGraphData(graph, details, this.personQuery === 'me');
+    }
+
     // populate presence
     const defaultPresence: Presence = {
       activity: 'Offline',

packages/mgt-components/src/graph/cacheStores.ts

@@ -21,9 +21,10 @@ export const schemas = {
     stores: {
       users: 'users',
       usersQuery: 'usersQuery',
-      userFilters: 'userFilters'
+      userFilters: 'userFilters',
+      cardState: 'cardState'
     },
-    version: 3
+    version: 4
   },
   photos: {
     name: 'photos',