Fixed mgt-agenda days not working and added support for paging (#340)

* Fixed loadState getting called prematurely

* added page iterator

Author: nmetulev

src/components/baseComponent.ts

@@ -78,7 +78,7 @@ export abstract class MgtBaseComponent extends LitElement {
   }
 
   /**
-   * A flag to check if the component's firstUpdated method has fired.
+   * A flag to check if the component is loading data state.
    *
    * @protected
    * @memberof MgtBaseComponent
@@ -87,6 +87,18 @@ export abstract class MgtBaseComponent extends LitElement {
     return this._isLoadingState;
   }
 
+  /**
+   * A flag to check if the component has updated once.
+   *
+   * @readonly
+   * @protected
+   * @type {boolean}
+   * @memberof MgtBaseComponent
+   */
+  protected get isFirstUpdated(): boolean {
+    return this._isFirstUpdated;
+  }
+
   private static _useShadowRoot: boolean = true;
 
   /**
@@ -96,6 +108,7 @@ export abstract class MgtBaseComponent extends LitElement {
   @property({ attribute: false })
   private _isLoadingState: boolean = false;
 
+  private _isFirstUpdated = false;
   private _currentLoadStatePromise: Promise<unknown>;
 
   constructor() {
@@ -126,6 +139,7 @@ export abstract class MgtBaseComponent extends LitElement {
    */
   protected firstUpdated(changedProperties): void {
     super.firstUpdated(changedProperties);
+    this._isFirstUpdated = true;
     Providers.onProviderUpdated(() => this.requestStateUpdate());
     this.requestStateUpdate();
   }
@@ -193,6 +207,11 @@ export abstract class MgtBaseComponent extends LitElement {
    * @memberof MgtBaseComponent
    */
   protected async requestStateUpdate(force: boolean = false): Promise<unknown> {
+    // the component is still bootstraping - wait until first updated
+    if (!this._isFirstUpdated) {
+      return;
+    }
+
     // Wait for the current load promise to complete (unless forced).
     if (this._isLoadingState && !force) {
       await this._currentLoadStatePromise;
@@ -218,6 +237,8 @@ export abstract class MgtBaseComponent extends LitElement {
     // Return the load state promise.
     // If loading + forced, chain the promises.
     return (this._currentLoadStatePromise =
-      this._isLoadingState && force ? this._currentLoadStatePromise.then(() => loadStatePromise) : loadStatePromise);
+      this._isLoadingState && !!this._currentLoadStatePromise && force
+        ? this._currentLoadStatePromise.then(() => loadStatePromise)
+        : loadStatePromise);
   }
 }

src/components/mgt-agenda/mgt-agenda.graph.ts

@@ -8,22 +8,23 @@
 import * as MicrosoftGraph from '@microsoft/microsoft-graph-types';
 import { IGraph } from '../../IGraph';
 import { prepScopes } from '../../utils/GraphHelpers';
+import { GraphPageIterator } from '../../utils/GraphPageIterator';
 
 /**
- * async promise, returns Calender events associated with either the logged in user or a specific groupId
+ * returns Calender events iterator associated with either the logged in user or a specific groupId
  *
  * @param {Date} startDateTime
  * @param {Date} endDateTime
  * @param {string} [groupId]
  * @returns {(Promise<Event[]>)}
  * @memberof Graph
  */
-export async function getEvents(
+export function getEventsPageIterator(
   graph: IGraph,
   startDateTime: Date,
   endDateTime: Date,
   groupId?: string
-): Promise<MicrosoftGraph.Event[]> {
+): Promise<GraphPageIterator<MicrosoftGraph.Event>> {
   const scopes = 'calendars.read';
 
   const sdt = `startdatetime=${startDateTime.toISOString()}`;
@@ -39,10 +40,10 @@ export async function getEvents(
 
   uri += `/calendarview?${sdt}&${edt}`;
 
-  const calendarView = await graph
+  const request = graph
     .api(uri)
     .middlewareOptions(prepScopes(scopes))
-    .orderby('start/dateTime')
-    .get();
-  return calendarView ? calendarView.value : null;
+    .orderby('start/dateTime');
+
+  return GraphPageIterator.create<MicrosoftGraph.Event>(graph, request);
 }

src/components/mgt-agenda/mgt-agenda.ts

@@ -15,7 +15,7 @@ import { getDayOfWeekString, getMonthString } from '../../utils/Utils';
 import '../mgt-person/mgt-person';
 import { MgtTemplatedComponent } from '../templatedComponent';
 import { styles } from './mgt-agenda-css';
-import { getEvents } from './mgt-agenda.graph';
+import { getEventsPageIterator } from './mgt-agenda.graph';
 
 /**
  * Web Component which represents events in a user or group calendar.
@@ -50,46 +50,64 @@ export class MgtAgenda extends MgtTemplatedComponent {
   }
 
   /**
-   * array containing events from user agenda.
-   * @type {Array<MicrosoftGraph.Event>}
+   * stores current date for initial calender selection in events.
+   * @type {string}
    */
   @property({
-    attribute: 'events'
+    attribute: 'date',
+    type: String
   })
-  public events: MicrosoftGraph.Event[];
+  public get date(): string {
+    return this._date;
+  }
+  public set date(value) {
+    if (this._date === value) {
+      return;
+    }
 
-  /**
-   * allows developer to define agenda to group events by day.
-   * @type {Boolean}
-   */
-  @property({
-    attribute: 'group-by-day',
-    reflect: true,
-    type: Boolean
-  })
-  public groupByDay: boolean;
+    this._date = value;
+    this.requestStateUpdate(true);
+  }
 
   /**
-   * stores current date for initial calender selection in events.
+   * determines if agenda events come from specific group
    * @type {string}
    */
   @property({
-    attribute: 'date',
-    reflect: true,
+    attribute: 'group-id',
     type: String
   })
-  public date: string;
+  public get groupId(): string {
+    return this._groupId;
+  }
+  public set groupId(value) {
+    if (this._groupId === value) {
+      return;
+    }
+
+    this._groupId = value;
+    this.requestStateUpdate(true);
+  }
 
   /**
    * sets number of days until end date, 3 is the default
    * @type {number}
    */
   @property({
     attribute: 'days',
-    reflect: true,
     type: Number
   })
-  public days: number;
+  public get days(): number {
+    return this._days;
+  }
+  public set days(value) {
+    if (this._days === value) {
+      return;
+    }
+
+    this._days = value;
+    this.requestStateUpdate(true);
+  }
 
   /**
    * allows developer to specify a different graph query that retrieves events
@@ -99,7 +117,26 @@ export class MgtAgenda extends MgtTemplatedComponent {
     attribute: 'event-query',
     type: String
   })
-  public eventQuery: string;
+  public get eventQuery(): string {
+    return this._eventQuery;
+  }
+  public set eventQuery(value) {
+    if (this._eventQuery === value) {
+      return;
+    }
+
+    this._eventQuery = value;
+    this.requestStateUpdate(true);
+  }
+
+  /**
+   * array containing events from user agenda.
+   * @type {Array<MicrosoftGraph.Event>}
+   */
+  @property({
+    attribute: 'events'
+  })
+  public events: MicrosoftGraph.Event[];
 
   /**
    * allows developer to define max number of events shown
@@ -112,24 +149,29 @@ export class MgtAgenda extends MgtTemplatedComponent {
   public showMax: number;
 
   /**
-   * determines if agenda events come from specific group
-   * @type {string}
+   * allows developer to define agenda to group events by day.
+   * @type {Boolean}
    */
   @property({
-    attribute: 'group-id',
-    type: String
+    attribute: 'group-by-day',
+    type: Boolean
   })
-  public groupId: string;
+  public groupByDay: boolean;
 
   /**
    * determines width available for agenda component.
    * @type {boolean}
    */
   @property({ attribute: false }) private _isNarrow: boolean;
+  @property({ attribute: false }) private _isLoadingEvents: boolean;
+
+  private _eventQuery: string;
+  private _days: number = 3;
+  private _groupId: string;
+  private _date: string;
 
   constructor() {
     super();
-    this.days = 3;
     this.onResize = this.onResize.bind(this);
   }
 
@@ -154,22 +196,6 @@ export class MgtAgenda extends MgtTemplatedComponent {
     super.disconnectedCallback();
   }
 
-  /**
-   * Synchronizes property values when attributes change.
-   *
-   * @param {*} name
-   * @param {*} oldValue
-   * @param {*} newValue
-   * @memberof MgtAgenda
-   */
-  public attributeChangedCallback(name, oldValue, newValue) {
-    if (oldValue !== newValue && (name === 'date' || name === 'days' || name === 'group-id')) {
-      this.events = null;
-      this.requestStateUpdate();
-    }
-    super.attributeChangedCallback(name, oldValue, newValue);
-  }
-
   /**
    * Invoked on each update to perform rendering tasks. This method must return a lit-html TemplateResult.
    * Setting properties inside this method will not trigger the element to update
@@ -179,7 +205,7 @@ export class MgtAgenda extends MgtTemplatedComponent {
    */
   public render(): TemplateResult {
     // Loading
-    if (this.isLoadingState) {
+    if (this.isLoadingState && !this._isLoadingEvents) {
       return this.renderLoading();
     }
 
@@ -204,10 +230,25 @@ export class MgtAgenda extends MgtTemplatedComponent {
     return html`
       <div class="agenda${this._isNarrow ? ' narrow' : ''}${this.groupByDay ? ' grouped' : ''}">
         ${this.groupByDay ? this.renderGroups(events) : this.renderEvents(events)}
+        ${this._isLoadingEvents ? this.renderLoading() : html``}
       </div>
     `;
   }
 
+  /**
+   * Request to reload the state.
+   * Use reload instead of load to ensure loading events are fired.
+   *
+   * @protected
+   * @memberof MgtBaseComponent
+   */
+  protected async requestStateUpdate(force?: boolean) {
+    if (force) {
+      this.events = null;
+    }
+    super.requestStateUpdate(force);
+  }
+
   /**
    * Render the loading state
    *
@@ -484,9 +525,21 @@ export class MgtAgenda extends MgtTemplatedComponent {
         const end = new Date(start.getTime());
         end.setDate(start.getDate() + this.days);
         try {
-          this.events = await getEvents(graph, start, end, this.groupId);
+          const iterator = await getEventsPageIterator(graph, start, end, this.groupId);
+
+          if (iterator && iterator.value) {
+            this._isLoadingEvents = true;
+            this.events = iterator.value;
+
+            while (iterator.hasNext) {
+              await iterator.next();
+              this.events = iterator.value;
+            }
+          }
         } catch (error) {
           // noop - possible error with graph
+        } finally {
+          this._isLoadingEvents = false;
         }
       }
     }