Upgrade react-functional-component-with-data-fetch to SPFx 1.13.1

samples/react-functional-component-with-data-fetch/.editorconfig

@@ -1,25 +0,0 @@
-# EditorConfig helps developers define and maintain consistent
-# coding styles between different editors and IDEs
-# editorconfig.org
-
-root = true
-
-
-[*]
-
-# change these settings to your own preference
-indent_style = space
-indent_size = 2
-
-# we recommend you to keep these unchanged
-end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true
-
-[*.md]
-trim_trailing_whitespace = false
-
-[{package,bower}.json]
-indent_style = space
-indent_size = 2

samples/react-functional-component-with-data-fetch/.gitignore

@@ -11,6 +11,7 @@ dist
 lib
 solution
 temp
+release
 *.sppkg
 
 # Coverage directory used by tools like istanbul
@@ -30,3 +31,7 @@ obj
 
 # Styles Generated Code
 *.scss.ts
+# .CER Certificates
+*.cer
+# .PEM Certificates
+*.pem

samples/react-functional-component-with-data-fetch/.npmignore

@@ -0,0 +1,16 @@
+!dist
+config
+
+gulpfile.js
+
+release
+src
+temp
+
+tsconfig.json
+tslint.json
+
+*.log
+
+.yo-rc.json
+.vscode

samples/react-functional-component-with-data-fetch/.yo-rc.json

@@ -1,6 +1,6 @@
 {
   "@microsoft/generator-sharepoint": {
-    "version": "1.8.2",
+    "version": "1.13.1",
     "libraryName": "teams-tracker",
     "libraryId": "f5a39f0e-c504-4969-8e47-1ed85d9f8a68",
     "environment": "spo",

samples/react-functional-component-with-data-fetch/README.md

@@ -2,19 +2,19 @@
 
 ## Summary
 
-This web part demonstrates building a React functional component that uses data from a remote service, in this case the Microsoft Graph, using the recently introduced React Hooks feature. The example web part renders a list of the user's Teams and, optionally, the channels in each Team.
+This web part demonstrates building a React functional component that uses data from a remote service, in this case the Microsoft Graph, using the React Hooks feature. The example web part renders a list of the user's Teams and, optionally, the channels in each Team.
 
 ![Screenshot](Screenshot.png "Screenshot - Teams Tracker web part")
 
 
 ## Compatibility
 
-![SPFx 1.8.2](https://img.shields.io/badge/SPFx-1.8.2-green.svg) 
+![SPFx 1.13.1](https://img.shields.io/badge/SPFx-1.13.1-green.svg) 
-![Node.js v10 | v8](https://img.shields.io/badge/Node.js-v10%20%7C%20v8-green.svg) 
+![Node.js v14 | v12](https://img.shields.io/badge/Node.js-v14%20%7C%20v12-green.svg) 
 ![Compatible with SharePoint Online](https://img.shields.io/badge/SharePoint%20Online-Compatible-green.svg)
 ![Does not work with SharePoint 2019](https://img.shields.io/badge/SharePoint%20Server%202019-Incompatible-red.svg "SharePoint Server 2019 requires SPFx 1.4.1 or lower")
 ![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1")
-![Local Workbench Compatible](https://img.shields.io/badge/Local%20Workbench-Compatible-green.svg)
+![Local Workbench Unsupported](https://img.shields.io/badge/Local%20Workbench-Unsupported-red.svg 'Local workbench is no longer available as of SPFx 1.13 and above')
 ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg)
 
 ## Applies to
@@ -23,22 +23,20 @@ This web part demonstrates building a React functional component that uses data
 * [Office 365 tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment)
 * [PnPJS library](https://github.com/pnp/pnpjs)
 
-## Prerequisites
-
-This sample was built with version 1.8.2 of the SharePoint Framework. It has been modified to use version 16.8 of the React framework (by default the version used is React 16.7). React 16.8 supports React Hooks which is required to support state management in a React functional component.
-With future versions of SPFx it will be possible to use the built-in React version, which avoids the need to add a specific version of React to the bundle. This sample also uses the PnPJS library to retrieve Microsoft Graph data.
 
 ## Solution
 
 Solution|Author(s)
 --------|---------
 react-functional-component-with-data-fetch | Bill Ayers
+react-functional-component-with-data-fetch | Don Kirkham
 
 ## Version history
 
 Version|Date|Comments
 -------|----|--------
 1.0|June 14, 2019|Initial release
+2.0|February 15, 2022|Upgrade to SPFx v1.13.1
 
 ## Minimal Path to Awesome
 
@@ -64,11 +62,7 @@ This is an extension of the approach used in the [React-Functional-Component](ht
 * Team.tsx Component
 <img src="https://pnptelemetry.azurewebsites.net/sp-dev-fx-webparts/samples/react-functional-component-with-data-fetch" />
 
-## TeamsTrackerWebPart.ts Simplification
+## TeamsTrackerWebPart.ts Initialise PnPJS
-
-A number of simplifications have been made to the TeamsTrackerWebPart.ts file compared to the Yeoman generator starter project. The use of an external string collection has been removed - they are simply hard coded into the file to make it clear how the property pane configuration works.
-
-The properties interface is declared inline in TeamsTrackerWebPart.ts and the same properties are  passed to the component as props. The property will then be available to the component through its **props** collection.
 
 The onInit method of BaseClientSideWebPart is overriden to initialise the PnPJS graph object. The web part is then able to get access to the Microsoft Graph using the PnPJS library. The User.Read.All permission is implicitly provided.
 
@@ -133,7 +127,7 @@ If this were a real application, rather than a demonstration, you would need to
 
 ## Building and testing
 
-In the `react-functional-component` directory, run `npm install` to resolve all the dependencies. Once this has completed you can run `gulp serve --nobrowser` to test the web part in the workbench of your tenant (*https://mytenant.sharepoint.com/_layouts/15/workbench.aspx*). You could run it in the local workbench, but the PnPJS promise will never return and so you will just see the loading spinner.
+In the `react-functional-component-with-data-fetch` directory, run `npm install` to resolve all the dependencies. Once this has completed you can run `gulp serve --nobrowser` to test the web part in the workbench of your tenant (*https://mytenant.sharepoint.com/_layouts/15/workbench.aspx*). 
 
 
 ## Disclaimer

samples/react-functional-component-with-data-fetch/config/copy-assets.json

@@ -1,4 +0,0 @@
-{
-  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/copy-assets.schema.json",
-  "deployCdnPath": "temp/deploy"
-}

samples/react-functional-component-with-data-fetch/config/deploy-azure-storage.json

@@ -1,6 +1,6 @@
 {
   "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
-  "workingDir": "./temp/deploy/",
+  "workingDir": "./release/assets/",
   "account": "<!-- STORAGE ACCOUNT NAME -->",
   "container": "teams-tracker",
   "accessKey": "<!-- ACCESS KEY -->"

samples/react-functional-component-with-data-fetch/config/package-solution.json

@@ -3,7 +3,14 @@
   "solution": {
     "name": "teams-tracker-client-side-solution",
     "id": "f5a39f0e-c504-4969-8e47-1ed85d9f8a68",
-    "version": "1.0.0.0",
+    "version": "2.0.0.0",
+        "developer": {
+          "name": "",
+          "privacyUrl": "",
+          "termsOfUseUrl": "",
+          "websiteUrl": "",
+          "mpnId": "SPFx-1.13.1"
+        },
     "includeClientSideAssets": true,
     "isDomainIsolated": false
   },

samples/react-functional-component-with-data-fetch/config/serve.json

@@ -2,9 +2,5 @@
   "$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
   "port": 4321,
   "https": true,
-  "initialPage": "https://localhost:5432/workbench",
+  "initialPage": "https://enter-your-SharePoint-site/_layouts/workbench.aspx"
-  "api": {
-    "port": 5432,
-    "entryPath": "node_modules/@microsoft/sp-webpart-workbench/lib/api/"
-  }
 }

samples/react-functional-component-with-data-fetch/gulpfile.js

@@ -10,4 +10,13 @@ build.configureWebpack.mergeConfig({
     }
 });
 
+var getTasks = build.rig.getTasks;
+build.rig.getTasks = function () {
+  var result = getTasks.call(build.rig);
+
+  result.set('serve', result.get('serve-deprecated'));
+
+  return result;
+};
+
 build.initialize(gulp);

samples/react-functional-component-with-data-fetch/package.json

@@ -2,46 +2,41 @@
   "name": "teams-tracker",
   "version": "0.0.1",
   "private": true,
-  "engines": {
+  "engines": {},
-    "node": ">=0.10.0"
+  "main": "lib/index.js",
-  },
   "scripts": {
     "build": "gulp bundle",
     "clean": "gulp clean",
     "test": "gulp test"
   },
   "dependencies": {
-    "@microsoft/sp-core-library": "1.8.2",
+    "@microsoft/sp-core-library": "1.13.1",
-    "@microsoft/sp-lodash-subset": "1.8.2",
+    "@microsoft/sp-lodash-subset": "1.13.1",
-    "@microsoft/sp-office-ui-fabric-core": "1.8.2",
+    "@microsoft/sp-office-ui-fabric-core": "1.13.1",
-    "@microsoft/sp-property-pane": "1.8.2",
+    "@microsoft/sp-property-pane": "1.13.1",
-    "@microsoft/sp-webpart-base": "1.8.2",
+    "@microsoft/sp-webpart-base": "1.13.1",
     "@pnp/common": "^1.3.3",
     "@pnp/graph": "^1.3.3",
     "@pnp/logging": "^1.3.3",
     "@pnp/odata": "^1.3.3",
-    "@types/es6-promise": "0.0.33",
+    "office-ui-fabric-react": "7.174.1",
-    "@types/webpack-env": "1.13.1",
+    "react": "16.13.1",
-    "office-ui-fabric-react": "6.143.0",
+    "react-dom": "16.13.1"
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6"
   },
   "resolutions": {
-    "@types/react": "16.7.22"
+    "@types/react": "16.8.8"
   },
   "devDependencies": {
-    "@microsoft/rush-stack-compiler-2.9": "0.7.7",
+    "@microsoft/rush-stack-compiler-3.9": "0.4.47",
-    "@microsoft/rush-stack-compiler-3.3": "^0.2.15",
+    "@microsoft/sp-build-web": "1.13.1",
-    "@microsoft/sp-build-web": "1.8.2",
+    "@microsoft/sp-module-interfaces": "1.13.1",
-    "@microsoft/sp-module-interfaces": "1.8.2",
+    "@microsoft/sp-tslint-rules": "1.13.1",
-    "@microsoft/sp-tslint-rules": "1.8.2",
+    "@types/es6-promise": "0.0.33",
-    "@microsoft/sp-webpart-workbench": "1.8.2",
+    "@types/react": "16.9.51",
-    "@types/chai": "3.4.34",
+    "@types/react-dom": "16.9.8",
-    "@types/mocha": "2.2.38",
+    "@types/webpack-env": "1.13.1",
-    "@types/react": "^16.8.19",
-    "@types/react-dom": "^16.8.4",
     "ajv": "~5.2.2",
-    "gulp": "~3.9.1",
+    "gulp": "4.0.2",
     "typescript": "^3.5.1"
   }
 }

samples/react-functional-component-with-data-fetch/src/webparts/teamsTracker/components/TeamsTracker.module.scss

@@ -1,4 +1,4 @@
-@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
+@import '~office-ui-fabric-react/dist/sass/References.scss';
 
 .container {
   max-width: 700px;

samples/react-functional-component-with-data-fetch/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "./node_modules/@microsoft/rush-stack-compiler-3.3/includes/tsconfig-web.json",
+  "extends": "./node_modules/@microsoft/rush-stack-compiler-3.9/includes/tsconfig-web.json",
   "compilerOptions": {
     "target": "es5",
     "forceConsistentCasingInFileNames": true,
@@ -19,20 +19,17 @@
       "./node_modules/@microsoft"
     ],
     "types": [
-      "es6-promise",
       "webpack-env"
     ],
     "lib": [
       "es5",
       "dom",
-      "es2015.collection"
+      "es2015.collection",
+      "es2015.promise"
     ]
   },
   "include": [
-    "src/**/*.ts"
+    "src/**/*.ts",
-  ],
+    "src/**/*.tsx"
-  "exclude": [
-    "node_modules",
-    "lib"
   ]
 }

samples/react-functional-component-with-data-fetch/tslint.json

@@ -1,5 +1,5 @@
 {
-  "extends": "@microsoft/sp-tslint-rules/base-tslint.json",
+  "extends": "./node_modules/@microsoft/sp-tslint-rules/base-tslint.json",
   "rules": {
     "class-name": false,
     "export-name": false,
@@ -17,7 +17,6 @@
     "no-switch-case-fall-through": true,
     "no-unnecessary-semicolons": true,
     "no-unused-expression": true,
-    "no-use-before-declare": true,
     "no-with-statement": true,
     "semicolon": true,
     "trailing-comma": false,