From 0ba37cc78f0e1efe20e22247149218deb1066c68 Mon Sep 17 00:00:00 2001
From: Gavin Barron <gavinbarron@microsoft.com>
Date: Thu, 13 Jul 2023 04:43:14 -0700
Subject: [PATCH] fix: use iterator to load events from event-query (#2600)

---
 .../components/mgt-agenda/mgt-agenda.graph.ts | 16 ++++++++----
 .../src/components/mgt-agenda/mgt-agenda.ts   | 25 ++++++++-----------
 .../components/agenda/agenda.properties.js    |  2 +-
 3 files changed, 23 insertions(+), 20 deletions(-)

diff --git a/packages/mgt-components/src/components/mgt-agenda/mgt-agenda.graph.ts b/packages/mgt-components/src/components/mgt-agenda/mgt-agenda.graph.ts
index 1f08d12196..c401912b0c 100644
--- a/packages/mgt-components/src/components/mgt-agenda/mgt-agenda.graph.ts
+++ b/packages/mgt-components/src/components/mgt-agenda/mgt-agenda.graph.ts
@@ -8,6 +8,16 @@
 import { GraphPageIterator, IGraph, prepScopes } from '@microsoft/mgt-element';
 import * as MicrosoftGraph from '@microsoft/microsoft-graph-types';
 
+export const getEventsQueryPageIterator = async (
+  graph: IGraph,
+  query: string,
+  scopes = 'calendars.read'
+): Promise<GraphPageIterator<MicrosoftGraph.Event>> => {
+  const request = graph.api(query).middlewareOptions(prepScopes(scopes)).orderby('start/dateTime');
+
+  return GraphPageIterator.create<MicrosoftGraph.Event>(graph, request);
+};
+
 /**
  * returns Calender events iterator associated with either the logged in user or a specific groupId
  *
@@ -24,8 +34,6 @@ export const getEventsPageIterator = async (
   endDateTime: Date,
   groupId?: string
 ): Promise<GraphPageIterator<MicrosoftGraph.Event>> => {
-  const scopes = 'calendars.read';
-
   const sdt = `startdatetime=${startDateTime.toISOString()}`;
   const edt = `enddatetime=${endDateTime.toISOString()}`;
 
@@ -39,7 +47,5 @@ export const getEventsPageIterator = async (
 
   uri += `/calendarview?${sdt}&${edt}`;
 
-  const request = graph.api(uri).middlewareOptions(prepScopes(scopes)).orderby('start/dateTime');
-
-  return GraphPageIterator.create<MicrosoftGraph.Event>(graph, request);
+  return getEventsQueryPageIterator(graph, uri);
 };
diff --git a/packages/mgt-components/src/components/mgt-agenda/mgt-agenda.ts b/packages/mgt-components/src/components/mgt-agenda/mgt-agenda.ts
index 9a49c83861..c4a315b425 100644
--- a/packages/mgt-components/src/components/mgt-agenda/mgt-agenda.ts
+++ b/packages/mgt-components/src/components/mgt-agenda/mgt-agenda.ts
@@ -20,7 +20,7 @@ import {
 import '../../styles/style-helper';
 import '../mgt-person/mgt-person';
 import { styles } from './mgt-agenda-css';
-import { getEventsPageIterator } from './mgt-agenda.graph';
+import { getEventsPageIterator, getEventsQueryPageIterator } from './mgt-agenda.graph';
 import { SvgIcon, getSvg } from '../../utils/SvgHelper';
 import { MgtPeople } from '../mgt-people/mgt-people';
 import { registerFluentComponents } from '../../utils/FluentComponents';
@@ -182,9 +182,9 @@ export class MgtAgenda extends MgtTemplatedComponent {
 
   /**
    * allows developer to specify preferred timezone that should be used for
-   * retrieving events from Graph, eg. `Pacific Standard Time`. The preferred timezone for
-   * the current user can be retrieved by calling `me/mailboxSettings` and
-   * retrieving the value of the `timeZone` property.
+   * rendering events retrieved from Graph, eg. `America/Los_Angeles`.
+   * By default events are rendered using the current timezone of the
+   * device being used.
    *
    * @type {string}
    */
@@ -629,17 +629,14 @@ export class MgtAgenda extends MgtTemplatedComponent {
           } else {
             query = this.eventQuery;
           }
+          const iterator = await getEventsQueryPageIterator(graph, query, scope);
+          if (iterator?.value) {
+            events = iterator.value;
 
-          let request = graph.api(query);
-
-          if (scope) {
-            request = request.middlewareOptions(prepScopes(scope));
-          }
-
-          const results = (await request.get()) as CollectionResponse<MicrosoftGraph.Event>;
-
-          if (results?.value) {
-            events = results.value;
+            while (iterator.hasNext) {
+              await iterator.next();
+              events = iterator.value;
+            }
           }
           // eslint-disable-next-line no-empty
         } catch (e) {}
diff --git a/stories/components/agenda/agenda.properties.js b/stories/components/agenda/agenda.properties.js
index ec606a188b..4fc790694d 100644
--- a/stories/components/agenda/agenda.properties.js
+++ b/stories/components/agenda/agenda.properties.js
@@ -15,7 +15,7 @@ export default {
 };
 
 export const getByEventQuery = () => html`
-  <mgt-agenda event-query="/me/events?orderby=start/dateTime"></mgt-agenda>
+  <mgt-agenda event-query="/me/calendarview?$orderby=start/dateTime&startdatetime=2023-07-12T00:00:00.000Z&enddatetime=2023-07-18T00:00:00.000Z"></mgt-agenda>
 `;
 
 export const groupByDay = () => html`