Replaced deprecated sp-pnp-js with @pnp/js (#597)

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

@@ -1,7 +1,7 @@
-# React sample showing the use of sp-pnp-js with Async / Await
+# React sample showing the use of @pnp/js with Async / Await
 
 ## Summary
-This webpart demonstrates how to use [PnP JS Core](https://github.com/SharePoint/PnP-JS-Core) with Async functions into the SharePoint Framework as well as integrating [PnP JS and SPFx Logging systems](https://blog.josequinto.com/2017/04/30/how-to-integrate-pnp-js-core-and-sharepoint-framework-logging-systems/). Real example querying SharePoint library to show document sizes.
+This webpart demonstrates how to use [PnPJS](https://pnp.github.io/pnpjs/) with Async functions into the SharePoint Framework as well as integrating [PnP JS and SPFx Logging systems](https://blog.josequinto.com/2017/04/30/how-to-integrate-pnp-js-core-and-sharepoint-framework-logging-systems/). Real example querying SharePoint library to show document sizes.
 
 ![React-sp-pnp-js-async-await](./assets/async-await-sp-pnp-js.png)
 
@@ -24,8 +24,9 @@ react-async-await-sp-pnp-js | Jose Quinto ([@jquintozamora](https://twitter.com/
 
 Version|Date|Comments
 -------|----|--------
-1.0|May 1, 2017|Initial release
+1.2|Jul 20, 2018|Replaced deprecated sp-pnp-js with @pnp/js
 1.1|Mar 6, 2018|Update to 1.4.1
+1.0|May 1, 2017|Initial release
 
 ## Disclaimer
 **THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**

samples/react-async-await-sp-pnp-js/package-lock.json

@@ -1265,6 +1265,73 @@
         }
       }
     },
+    "@pnp/common": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@pnp/common/-/common-1.1.2.tgz",
+      "integrity": "sha1-AieN9cb8ds60eoHNBLxDANak5JI=",
+      "requires": {
+        "@types/adal-angular": "1.0.1",
+        "adal-angular": "1.0.17",
+        "tslib": "1.9.2"
+      },
+      "dependencies": {
+        "adal-angular": {
+          "version": "1.0.17",
+          "resolved": "https://registry.npmjs.org/adal-angular/-/adal-angular-1.0.17.tgz",
+          "integrity": "sha1-bpNuDkH5HTsqiOf/ypwvb29WLMQ="
+        },
+        "tslib": {
+          "version": "1.9.2",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.9.2.tgz",
+          "integrity": "sha512-AVP5Xol3WivEr7hnssHDsaM+lVrVXWUvd1cfXTRkTj80b//6g2wIFEH6hZG0muGZRnHGrfttpdzRk3YlBkWjKw=="
+        }
+      }
+    },
+    "@pnp/logging": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@pnp/logging/-/logging-1.1.2.tgz",
+      "integrity": "sha1-XxJmpCwA2wpPYyDNbg66s6wVqRA=",
+      "requires": {
+        "tslib": "1.9.2"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.9.2",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.9.2.tgz",
+          "integrity": "sha512-AVP5Xol3WivEr7hnssHDsaM+lVrVXWUvd1cfXTRkTj80b//6g2wIFEH6hZG0muGZRnHGrfttpdzRk3YlBkWjKw=="
+        }
+      }
+    },
+    "@pnp/odata": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@pnp/odata/-/odata-1.1.2.tgz",
+      "integrity": "sha1-RaKSK4NKsd5RPPwYyfN4ZiZbVAc=",
+      "requires": {
+        "tslib": "1.9.2"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.9.2",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.9.2.tgz",
+          "integrity": "sha512-AVP5Xol3WivEr7hnssHDsaM+lVrVXWUvd1cfXTRkTj80b//6g2wIFEH6hZG0muGZRnHGrfttpdzRk3YlBkWjKw=="
+        }
+      }
+    },
+    "@pnp/sp": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@pnp/sp/-/sp-1.1.2.tgz",
+      "integrity": "sha1-D6XT6QSxmTRKLd6L2ClbPrRkawQ=",
+      "requires": {
+        "tslib": "1.9.2"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.9.2",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.9.2.tgz",
+          "integrity": "sha512-AVP5Xol3WivEr7hnssHDsaM+lVrVXWUvd1cfXTRkTj80b//6g2wIFEH6hZG0muGZRnHGrfttpdzRk3YlBkWjKw=="
+        }
+      }
+    },
     "@types/adal": {
       "version": "1.0.27",
       "resolved": "https://registry.npmjs.org/@types/adal/-/adal-1.0.27.tgz",
@@ -1273,6 +1340,11 @@
         "@types/angular": "1.6.43"
       }
     },
+    "@types/adal-angular": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@types/adal-angular/-/adal-angular-1.0.1.tgz",
+      "integrity": "sha512-2sRGxJYrluhvIz8ae98i5k5woe9Fics4dMFHTcNfY2xAkj5QGZor+sfZzlgM58Fpw7Kklau9Gn6OhgJP25dKug=="
+    },
     "@types/angular": {
       "version": "1.6.43",
       "resolved": "https://registry.npmjs.org/@types/angular/-/angular-1.6.43.tgz",
@@ -1429,11 +1501,6 @@
         "@types/node": "6.0.64"
       }
     },
-    "@types/microsoft-ajax": {
-      "version": "0.0.33",
-      "resolved": "https://registry.npmjs.org/@types/microsoft-ajax/-/microsoft-ajax-0.0.33.tgz",
-      "integrity": "sha512-R31YIw2FUZsx62yzH1LX9+SV0xCxRn+r6FpYhaEKHAms+3zozMYZZvsJO+I3za+wlE/z03PrePGgCO1rxv7dUg=="
-    },
     "@types/mime": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@types/mime/-/mime-2.0.0.tgz",
@@ -1559,14 +1626,6 @@
         "@types/mime": "2.0.0"
       }
     },
-    "@types/sharepoint": {
-      "version": "2013.1.10",
-      "resolved": "https://registry.npmjs.org/@types/sharepoint/-/sharepoint-2013.1.10.tgz",
-      "integrity": "sha512-rDsQNjMnRkzIU4Iz5GWHivR3CXZAbsGMAmPDakMZkgDSl2uzAFcm78ugMnbV0B6vi0ClDGiVrsiPCdkFExhVSw==",
-      "requires": {
-        "@types/microsoft-ajax": "0.0.33"
-      }
-    },
     "@types/sinon": {
       "version": "1.16.34",
       "resolved": "https://registry.npmjs.org/@types/sinon/-/sinon-1.16.34.tgz",
@@ -15347,14 +15406,6 @@
       "integrity": "sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM=",
       "dev": true
     },
-    "sp-pnp-js": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/sp-pnp-js/-/sp-pnp-js-2.0.6.tgz",
-      "integrity": "sha1-zWeDkx30gT5EGZpw9HbnpiQNoSo=",
-      "requires": {
-        "@types/sharepoint": "2013.1.10"
-      }
-    },
     "sparkles": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/sparkles/-/sparkles-1.0.0.tgz",

samples/react-async-await-sp-pnp-js/package.json

@@ -8,15 +8,18 @@
   "dependencies": {
     "@microsoft/sp-core-library": "~1.4.1",
     "@microsoft/sp-webpart-base": "~1.4.1",
+    "@pnp/common": "^1.1.2",
+    "@pnp/logging": "^1.1.2",
+    "@pnp/odata": "^1.1.2",
+    "@pnp/sp": "^1.1.2",
+    "@types/react": "0.14.46",
+    "@types/react-addons-shallow-compare": "0.14.17",
+    "@types/react-addons-test-utils": "0.14.15",
+    "@types/react-addons-update": "0.14.14",
+    "@types/react-dom": "0.14.18",
     "@types/webpack-env": ">=1.12.1 <1.14.0",
     "react": "15.4.2",
-    "react-dom": "15.4.2",
+    "react-dom": "15.4.2"
-    "@types/react": "0.14.46",
-    "@types/react-dom": "0.14.18",
-    "@types/react-addons-shallow-compare": "0.14.17",
-    "@types/react-addons-update": "0.14.14",
-    "@types/react-addons-test-utils": "0.14.15",
-    "sp-pnp-js": "2.0.6"
   },
   "devDependencies": {
     "@microsoft/sp-build-web": "~1.4.1",

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

@@ -5,7 +5,9 @@ import styles from "./AsyncAwaitPnPJs.module.scss";
 import { IFile, IResponseItem } from "../interfaces";
 
 // import pnp and pnp logging system
-import { Logger, FunctionListener, LogEntry, LogLevel, Web } from "sp-pnp-js";
+import { Web } from "@pnp/sp";
+import { Logger, LogLevel, LogEntry, FunctionListener } from "@pnp/logging";
+
 // import SPFx Logging system
 import { Log } from "@microsoft/sp-core-library";
 
@@ -102,7 +104,7 @@ export default class AsyncAwaitPnPJs extends React.Component<IAsyncAwaitPnPJsPro
 
       // 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" };
+      const logLevelConversion = { 0: "verbose", 1: "info", 2: "warn", 3: "error" };
 
       // create Message. Two importante notes here:
       // 1. Use JSON.stringify to output everything. It´s helpful when some internal exception comes thru.
@@ -116,7 +118,7 @@ export default class AsyncAwaitPnPJs extends React.Component<IAsyncAwaitPnPJsPro
       }
 
       // [SPFx Logging] Calculate method to invoke verbose, info, warn or error
-      const method = logLevelConversion[LogLevel[entry.level]];
+      const method = logLevelConversion[entry.level];
 
       // [SPFx Logging] Call SPFx Logging system with the message received from PnP JS Logging
       Log[method](componentName, formatedMessage);