PnPjs Version 3 Sample

samples/react-pnp-js-sample/.yo-rc.json

@@ -3,7 +3,7 @@
     "plusBeta": true,
     "isCreatingSolution": true,
     "environment": "spo",
-    "version": "1.14.0-beta.4",
+    "version": "1.14.0",
     "libraryName": "spfx-pnp-js-example",
     "libraryId": "d20ceaf6-094b-4086-b7a0-85761bc8be23",
     "packageManager": "npm",
@@ -11,4 +11,4 @@
     "isDomainIsolated": false,
     "componentType": "webpart"
   }
-}
+}

samples/react-pnp-js-sample/package.json

@@ -14,8 +14,8 @@
     "@microsoft/sp-office-ui-fabric-core": "1.14.0",
     "@microsoft/sp-property-pane": "1.14.0",
     "@microsoft/sp-webpart-base": "1.14.0",
-    "@pnp/logging": "^3.0.0",
-    "@pnp/sp": "^3.0.0",
+    "@pnp/logging": "^3.0.2",
+    "@pnp/sp": "^3.0.2",
     "office-ui-fabric-react": "7.174.1",
     "react": "16.13.1",
     "react-dom": "16.13.1"
@@ -31,4 +31,4 @@
     "ajv": "~5.2.2",
     "gulp": "~4.0.2"
   }
-}
+}

samples/react-pnp-js-sample/src/webparts/pnPjsExample/components/PnPjsExample.tsx

@@ -42,40 +42,45 @@ export default class PnPjsExample extends React.Component<IPnPjsExampleProps, II
   }
 
   public render(): React.ReactElement<IAsyncAwaitPnPJsProps> {
-    // calculate total of file sizes
-    const totalDocs: number = this.state.items.length > 0
-      ? this.state.items.reduce<number>((acc: number, item: IFile) => {
-        return (acc + Number(item.Size));
-      }, 0)
-      : 0;
-    return (
-      <div className={styles.pnPjsExample}>
-        <Label>Welcome to PnP JS Version 3 Demo!</Label>
-        <PrimaryButton onClick={this._updateTitles}>Update Item Titles</PrimaryButton>
-        <Label>List of documents:</Label>
-        <table width="100%">
-          <tr>
-            <td><strong>Title</strong></td>
-            <td><strong>Name</strong></td>
-            <td><strong>Size (KB)</strong></td>
-          </tr>
-          {this.state.items.map((item, idx) => {
-            return (
-              <tr key={idx}>
-                <td>{item.Title}</td>
-                <td>{item.Name}</td>
-                <td>{(item.Size / 1024).toFixed(2)}</td>
-              </tr>
-            );
-          })}
-          <tr>
-            <td></td>
-            <td><strong>Total:</strong></td>
-            <td><strong>{(totalDocs / 1024).toFixed(2)}</strong></td>
-          </tr>
-        </table>
-      </div >
-    );
+    try {
+      // calculate total of file sizes
+      const totalDocs: number = this.state.items.length > 0
+        ? this.state.items.reduce<number>((acc: number, item: IFile) => {
+          return (acc + Number(item.Size));
+        }, 0)
+        : 0;
+      return (
+        <div className={styles.pnPjsExample}>
+          <Label>Welcome to PnP JS Version 3 Demo!</Label>
+          <PrimaryButton onClick={this._updateTitles}>Update Item Titles</PrimaryButton>
+          <Label>List of documents:</Label>
+          <table width="100%">
+            <tr>
+              <td><strong>Title</strong></td>
+              <td><strong>Name</strong></td>
+              <td><strong>Size (KB)</strong></td>
+            </tr>
+            {this.state.items.map((item, idx) => {
+              return (
+                <tr key={idx}>
+                  <td>{item.Title}</td>
+                  <td>{item.Name}</td>
+                  <td>{(item.Size / 1024).toFixed(2)}</td>
+                </tr>
+              );
+            })}
+            <tr>
+              <td></td>
+              <td><strong>Total:</strong></td>
+              <td><strong>{(totalDocs / 1024).toFixed(2)}</strong></td>
+            </tr>
+          </table>
+        </div >
+      );
+    } catch (err) {
+      Logger.write(`${this.LOG_SOURCE} (render) - ${JSON.stringify(err)} - `, LogLevel.Error);
+    }
+    return null;
   }
 
   private _readAllFilesSize = async (): Promise<void> => {