fix: use iterator to load events from event-query (#2600)

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);
 };

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) {}

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`