[mgt-agenda] Adding the reload functionality (#754)

* Adding the reload functionality

* Removing unnecessary this.render();

* Removing commented code!

* Making public + docs

* Update packages/mgt/src/components/mgt-agenda/mgt-agenda.ts

Co-authored-by: Nikola Metulev <[email protected]>

Co-authored-by: Nikola Metulev <[email protected]>

Author: sebastienlevert

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

@@ -259,6 +259,15 @@ export class MgtAgenda extends MgtTemplatedComponent {
     `;
   }
 
+  /**
+   * Reloads the component with its current settings and potential new data
+   *
+   * @memberof MgtAgenda
+   */
+  public async reload() {
+    this.events = await this.loadEvents();
+  }
+
   /**
    * Render the loading state
    *
@@ -496,7 +505,40 @@ export class MgtAgenda extends MgtTemplatedComponent {
       return;
     }
 
+    const events = await this.loadEvents();
+    if (events && events.length > 0) {
+      this.events = events;
+    }
+  }
+
+  private async reloadState() {
+    this.events = null;
+    this.requestStateUpdate(true);
+  }
+
+  private onResize() {
+    this._isNarrow = this.offsetWidth < 600;
+  }
+
+  private eventClicked(event: MicrosoftGraph.Event) {
+    this.fireCustomEvent('eventClick', { event });
+  }
+
+  private getEventTimeString(event: MicrosoftGraph.Event) {
+    if (event.isAllDay) {
+      return 'ALL DAY';
+    }
+
+    const start = this.prettyPrintTimeFromDateTime(new Date(event.start.dateTime));
+    const end = this.prettyPrintTimeFromDateTime(new Date(event.end.dateTime));
+
+    return `${start} - ${end}`;
+  }
+
+  private async loadEvents(): Promise<MicrosoftGraph.Event[]> {
     const p = Providers.globalProvider;
+    let events: MicrosoftGraph.Event[] = [];
+
     if (p && p.state === ProviderState.SignedIn) {
       const graph = p.graph.forComponent(this);
 
@@ -525,7 +567,7 @@ export class MgtAgenda extends MgtTemplatedComponent {
           const results = await request.get();
 
           if (results && results.value) {
-            this.events = results.value;
+            events = results.value;
           }
           // tslint:disable-next-line: no-empty
         } catch (e) {}
@@ -538,42 +580,20 @@ export class MgtAgenda extends MgtTemplatedComponent {
           const iterator = await getEventsPageIterator(graph, start, end, this.groupId, this.preferredTimezone);
 
           if (iterator && iterator.value) {
-            this.events = iterator.value;
+            events = iterator.value;
 
             while (iterator.hasNext) {
               await iterator.next();
-              this.events = iterator.value;
+              events = iterator.value;
             }
           }
         } catch (error) {
           // noop - possible error with graph
         }
       }
     }
-  }
-
-  private async reloadState() {
-    this.events = null;
-    this.requestStateUpdate(true);
-  }
-
-  private onResize() {
-    this._isNarrow = this.offsetWidth < 600;
-  }
-
-  private eventClicked(event: MicrosoftGraph.Event) {
-    this.fireCustomEvent('eventClick', { event });
-  }
-
-  private getEventTimeString(event: MicrosoftGraph.Event) {
-    if (event.isAllDay) {
-      return 'ALL DAY';
-    }
 
-    const start = this.prettyPrintTimeFromDateTime(new Date(event.start.dateTime));
-    const end = this.prettyPrintTimeFromDateTime(new Date(event.end.dateTime));
-
-    return `${start} - ${end}`;
+    return events;
   }
 
   private prettyPrintTimeFromDateTime(date: Date) {