IE11 Compatible. Testing and working with IE11 (#203)

* update react-taxonomypicker styles

* react async await PnP JS Core with Logging first release

* update react

* update license

* Establish SPFx Context

* IE11 compatible

samples/react-async-await-sp-pnp-js/README.md

@@ -51,6 +51,7 @@ https://your-domain.sharepoint.com/_layouts/15/workbench.aspx
 
 ## Features
 - [Async / Await functionality working with PnP JS sample](https://github.com/jquintozamora/spfx-react-async-await-sp-pnp-js/blob/master/src/webparts/asyncAwaitPnPJs/components/AsyncAwaitPnPJs.tsx#L93)
+  - Tested and working on IE11 (as TypeScript config provides Promise polyfill)
 - React Container for the initial load. [Smart Component](https://github.com/jquintozamora/spfx-react-async-await-sp-pnp-js/blob/master/src/webparts/asyncAwaitPnPJs/components/IAsyncAwaitPnPJsState.ts)
 - [Interface best practices](https://github.com/jquintozamora/spfx-react-async-await-sp-pnp-js/tree/master/src/webparts/asyncAwaitPnPJs/interfaces)
 - [PnP JS and SPFx Logging systems integration](https://blog.josequinto.com/2017/04/30/how-to-integrate-pnp-js-core-and-sharepoint-framework-logging-systems)

samples/react-async-await-sp-pnp-js/src/webparts/asyncAwaitPnPJs/AsyncAwaitPnPJsWebPart.ts

@@ -12,8 +12,20 @@ import AsyncAwaitPnPJs from './components/AsyncAwaitPnPJs';
 import { IAsyncAwaitPnPJsProps } from './components/IAsyncAwaitPnPJsProps';
 import { IAsyncAwaitPnPJsWebPartProps } from './IAsyncAwaitPnPJsWebPartProps';
 
+// import pnp from "sp-pnp-js";
+
 export default class AsyncAwaitPnPJsWebPart extends BaseClientSideWebPart<IAsyncAwaitPnPJsWebPartProps> {
 
+  // // https://github.com/SharePoint/PnP-JS-Core/wiki/Using-sp-pnp-js-in-SharePoint-Framework
+  // public onInit(): Promise<void> {
+  //   return super.onInit().then(_ => {
+  //     // establish SPFx context
+  //     pnp.setup({
+  //       spfxContext: this.context
+  //     });
+  //   });
+  // }
+
   public render(): void {
     const element: React.ReactElement<IAsyncAwaitPnPJsProps > = React.createElement(
       AsyncAwaitPnPJs,

samples/react-async-await-sp-pnp-js/src/webparts/asyncAwaitPnPJs/components/AsyncAwaitPnPJs.tsx

@@ -46,9 +46,12 @@ export default class AsyncAwaitPnPJs extends React.Component<IAsyncAwaitPnPJsPro
       : 0;
     return (
       <div className={styles.container}>
-        <div className={`ms-Grid-row ms-bgColor-themeDark ms-fontColor-white ${styles.row}`}>
+        <div className={"ms-Grid-row ms-bgColor-themeDark ms-fontColor-white " + styles.row"}>
           <div className="ms-Grid-col ms-u-lg10 ms-u-xl8 ms-u-xlPush2 ms-u-lgPush1">
             <span className="ms-font-xl ms-fontColor-white">Welcome to SharePoint Async Await SP PnP JS Demo!</span>
+            <div>
+              {this._gerErrors()}
+            </div>
             <p className="ms-font-l ms-fontColor-white">List of documents:</p>
             <div>
               <div className={styles.row}>
@@ -78,6 +81,51 @@ export default class AsyncAwaitPnPJs extends React.Component<IAsyncAwaitPnPJsPro
     );
   }
 
+  private _enableLogging() {
+    ////////////////////////////////////////////////////////////////////////
+    // enable Logging system
+    ////////////////////////////////////////////////////////////////////////
+    // we will integrate PnP JS Logging System with SPFx Logging system
+    // 1. Logger object => PnP JS Logger
+    //    https://github.com/SharePoint/PnP-JS-Core/wiki/Working-With:-Logging
+    // 2. Log object => SPFx Logger
+    //    https://github.com/SharePoint/sp-dev-docs/wiki/Working-with-the-Logging-API
+    ////////////////////////////////////////////////////////////////////////
+    // [PnP JS Logging] activate Info level
+    Logger.activeLogLevel = LogLevel.Info;
+
+    // [PnP JS Logging] create a custom FunctionListener to integrate PnP JS and SPFx Logging systems
+    const listener = new FunctionListener((entry: LogEntry) => {
+
+      // get React component name
+      const componentName: string = (this as any)._reactInternalInstance._currentElement.props.description;
+
+      // mapping betwween PnP JS Log types and SPFx logging methods
+      // instead of using switch we use object easy syntax
+      const logLevelConversion = { Verbose: "verbose", Info: "info", Warning: "warn", Error: "error" };
+
+      // create Message. Two importante notes here:
+      // 1. Use JSON.stringify to output everything. It´s helpful when some internal exception comes thru.
+      // 2. Use JavaScript´s Error constructor allows us to output more than 100 characters using SPFx logging
+      let formatedMessage;
+      if (entry.level === LogLevel.Error) {
+        formatedMessage = new Error(`Message: ${entry.message} Data: ${JSON.stringify(entry.data)}`);
+        // formatedMessage = `Message: ${entry.message} Data: ${JSON.stringify(entry.data)}`;
+      } else {
+        formatedMessage = `Message: ${entry.message} Data: ${JSON.stringify(entry.data)}`;
+      }
+
+      // [SPFx Logging] Calculate method to invoke verbose, info, warn or error
+      const method = logLevelConversion[LogLevel[entry.level]];
+
+      // [SPFx Logging] Call SPFx Logging system with the message received from PnP JS Logging
+      Log[method](componentName, formatedMessage);
+    });
+
+    // [PnP JS Logging] Once create the custom listerner we should subscribe to it
+    Logger.subscribe(listener);
+  }
+
   // Async functions were introduced with ES3/ES5 native support in TypeScript 2.1
   // https://blogs.msdn.microsoft.com/typescript/2016/12/07/announcing-typescript-2-1/
   // Async function always return a Promise, on this scenario we return void Promise
@@ -95,7 +143,7 @@ export default class AsyncAwaitPnPJs extends React.Component<IAsyncAwaitPnPJsPro
         .items
         .select("Title", "FileLeafRef")
         .expand("File/Length")
-        .usingCaching()
+        // .usingCaching()
         .get();
 
       // use map to convert IResponseItem[] into our internal object IFile[]
@@ -116,35 +164,18 @@ export default class AsyncAwaitPnPJs extends React.Component<IAsyncAwaitPnPJsPro
     }
   }
 
-  private _enableLogging() {
+  private _gerErrors() {
-    ////////////////////////////////////////////////////////////////////////
+    return this.state.errors.length > 0
-    // enable Logging system
+      ?
-    ////////////////////////////////////////////////////////////////////////
+      <div style={{ color: "orangered" }} >
-    // we will integrate PnP JS Logging System with SPFx Logging system
+        <div>Errors:</div>
-    // 1. Logger object => PnP JS Logger
+        {
-    //    https://github.com/SharePoint/PnP-JS-Core/wiki/Working-With:-Logging
+          this.state.errors.map((item) => {
-    // 2. Log object => SPFx Logger
+            return (<div>{JSON.stringify(item)}</div>);
-    //    https://github.com/SharePoint/sp-dev-docs/wiki/Working-with-the-Logging-API
+          })
-    ////////////////////////////////////////////////////////////////////////
-    // [PnP JS Logging] activate Info level
-    Logger.activeLogLevel = LogLevel.Info;
-    // [PnP JS Logging] create a custom FunctionListener to integrate PnP JS and SPFx Logging systems
-    let listener = new FunctionListener((entry: LogEntry) => {
-      // get React component name
-      const componentName: string = (this as any)._reactInternalInstance._currentElement.type.name;
-      // mapping betwween PnP JS Log types and SPFx logging methods
-      // instead of using switch we use object easy syntax
-      const logLevelConversion = { Verbose: "verbose", Info: "info", Warning: "warn", Error: "error" };
-      // create Message. Two importante notes here:
-      // 1. Use JSON.stringify to output everything. It´s helpful when some internal exception comes thru.
-      // 2. Use JavaScript´s Error constructor allows us to output more than 100 characters using SPFx logging
-      const formatedMessage: Error = new Error(`Message: ${entry.message} Data: ${JSON.stringify(entry.data)}`);
-      // [SPFx Logging] Calculate method to invoke verbose, info, warn or error
-      const method = logLevelConversion[LogLevel[entry.level]];
-      // [SPFx Logging] Call SPFx Logging system with the message received from PnP JS Logging
-      Log[method](componentName, formatedMessage);
-    });
-    // [PnP JS Logging] Once create the custom listerner we should subscribe to it
-    Logger.subscribe(listener);
         }
+      </div>
+      : null
+  }
+                                
 }