Merge pull request #2189 from yhabersaat/react-my-teams-spfx-upgrade

react-my-teams - Upgrade sample to SPFx v1.13.1 (Node.js 14)

samples/react-my-teams/.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-my-teams/.gitignore

@@ -9,6 +9,7 @@ node_modules
 # Build generated files
 dist
 lib
+release
 solution
 temp
 *.sppkg

samples/react-my-teams/.npmignore

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

samples/react-my-teams/.yo-rc.json

@@ -10,10 +10,10 @@
     "environment": "spo",
     "framework": "react",
     "isCreatingSolution": true,
-    "version": "1.7.1",
+    "version": "1.13.1",
     "libraryName": "my-teams",
     "libraryId": "9bf27890-01d8-4041-8030-72831ed570aa",
     "packageManager": "npm",
     "componentType": "webpart"
   }
-}
+}

samples/react-my-teams/README.md

@@ -10,13 +10,11 @@ The web part can be configured to open the team on the web browser or client app
 
 # Compatibility
 
-![SPFx 1.7.1](https://img.shields.io/badge/SPFx-1.7.1-green.svg) 
+![SPFx 1.13.1](https://img.shields.io/badge/SPFx-1.13.1-green.svg) 
-![Node.js v8](https://img.shields.io/badge/Node.js-v8-green.svg) 
+![Node.js v14](https://img.shields.io/badge/Node.js-v14-green.svg) 
 ![Compatible with SharePoint Online](https://img.shields.io/badge/SharePoint%20Online-Compatible-green.svg)
 ![Compatible with SharePoint 2019](https://img.shields.io/badge/SharePoint%20Server%202019-Compatible-green.svg)
 ![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)
-![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg)
 
 ## Applies to
 
@@ -24,7 +22,7 @@ The web part can be configured to open the team on the web browser or client app
 
 ## Prerequisites
 
-- Office 365 subscription with SharePoint Online licence
+- Microsoft 365 subscription with SharePoint Online license
 - SharePoint Framework [development environment](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment) already set up.
 
 ## Solution
@@ -32,12 +30,15 @@ The web part can be configured to open the team on the web browser or client app
 | Solution       | Author(s)      |
 | -------------- | -------------- |
 | react-my-teams | Joel Rodrigues |
+| react-my-teams | [Yves Habersaat](https://github.com/yhabersaat) |
+
 
 ## Version history
 
-| Version | Date              | Comments        |
+| Version | Date              | Comments                  |
-| ------- | ----------------- | --------------- |
+| ------- | ----------------- | ------------------------- |
-| 1.0     | February 26, 2019 | Initial release |
+| 1.1     | December 18, 2021 | Upgraded for SPFx v1.13.1 |
+| 1.0     | February 26, 2019 | Initial release           |
 
 ## Disclaimer
 

samples/react-my-teams/assets/sample.json

@@ -9,7 +9,7 @@
       "This sample uses Microsoft Graph to list the Teams the current user is a member of. When the user clicks on one of the teams, the web part retrieves information about the default channel (General) and opens it. The web part can be configured to open the team on the web browser or client app."
     ],
     "creationDateTime": "2019-02-26",
-    "updateDateTime": "2019-02-26",
+    "updateDateTime": "2021-12-18",
     "products": [
       "SharePoint"
     ],
@@ -20,7 +20,7 @@
       },
       {
         "key": "SPFX-VERSION",
-        "value": "1.7.1"
+        "value": "1.13.1"
       }
     ],
     "thumbnails": [
@@ -38,6 +38,12 @@
         "pictureUrl": "https://github.com/joelfmrodrigues.png",
         "name": "Joel Rodrigues",
         "twitter": "joelfmrodrigues"
+      },
+      {
+        "gitHubAccount": "yhabersaat",
+        "pictureUrl": "https://github.com/yhabersaat.png",
+        "name": "Yves Habersaat",
+        "twitter": "yhabersaat"
       }
     ],
     "references": [
@@ -48,4 +54,4 @@
       }
     ]
   }
-]
+]

samples/react-my-teams/config/deploy-azure-storage.json

@@ -1,7 +1,7 @@
 {
   "$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": "my-teams",
   "accessKey": "<!-- ACCESS KEY -->"
-}
+}

samples/react-my-teams/config/package-solution.json

@@ -3,7 +3,7 @@
   "solution": {
     "name": "my-teams-client-side-solution",
     "id": "9bf27890-01d8-4041-8030-72831ed570aa",
-    "version": "1.0.0.0",
+    "version": "1.1.0.0",
     "includeClientSideAssets": true,
     "skipFeatureDeployment": true,
     "webApiPermissionRequests": [

samples/react-my-teams/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-my-teams/gulpfile.js

@@ -3,8 +3,8 @@
 
 // check if gulp dist was called
 if (process.argv.indexOf('dist') !== -1) {
-    // add ship options to command call
+  // add ship options to command call
-    process.argv.push('--ship');
+  process.argv.push('--ship');
 }
 
 const path = require('path');
@@ -25,5 +25,13 @@ gulp.task('dist', gulpSequence('clean', 'bundle', 'package-solution'));
  * Custom Framework Specific gulp tasks
  */
 
+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-my-teams/package.json

@@ -2,9 +2,7 @@
   "name": "my-teams",
   "version": "0.0.1",
   "private": true,
-  "engines": {
+  "main": "lib/index.js",
-    "node": ">=0.10.0"
-  },
   "scripts": {
     "build": "gulp bundle",
     "clean": "gulp clean",
@@ -12,30 +10,27 @@
     "test:watch": "./node_modules/.bin/jest --config ./config/jest.config.json --watchAll"
   },
   "dependencies": {
-    "@microsoft/sp-core-library": "1.7.1",
+    "@microsoft/sp-core-library": "1.13.1",
-    "@microsoft/sp-lodash-subset": "1.7.1",
+    "@microsoft/sp-lodash-subset": "1.13.1",
-    "@microsoft/sp-office-ui-fabric-core": "1.7.1",
+    "@microsoft/sp-office-ui-fabric-core": "1.13.1",
-    "@microsoft/sp-webpart-base": "1.7.1",
+    "@microsoft/sp-property-pane": "1.13.1",
-    "@types/es6-promise": "0.0.33",
+    "@microsoft/sp-webpart-base": "1.13.1",
-    "@types/react": "16.4.2",
+    "office-ui-fabric-react": "7.174.1",
-    "@types/react-dom": "16.0.5",
+    "react": "16.13.1",
-    "@types/webpack-env": "1.13.1",
+    "react-dom": "16.13.1"
-    "react": "16.3.2",
-    "react-dom": "16.3.2"
   },
   "resolutions": {
-    "@types/react": "16.4.2"
+    "@types/react": "16.8.8"
   },
   "devDependencies": {
-    "@microsoft/sp-build-web": "1.7.1",
+    "@microsoft/rush-stack-compiler-3.9": "0.4.47",
-    "@microsoft/sp-module-interfaces": "1.7.1",
+    "@microsoft/sp-build-web": "1.13.1",
-    "@microsoft/sp-tslint-rules": "1.7.1",
+    "@microsoft/sp-module-interfaces": "1.13.1",
-    "@microsoft/sp-webpart-workbench": "1.7.1",
+    "@microsoft/sp-tslint-rules": "1.13.1",
-    "@types/chai": "3.4.34",
+    "@types/es6-promise": "0.0.33",
-    "@types/mocha": "2.2.38",
+    "@types/webpack-env": "1.13.1",
     "@voitanos/jest-preset-spfx-react16": "^1.1.0",
     "ajv": "~5.2.2",
-    "gulp": "~3.9.1",
     "gulp-sequence": "^1.0.0",
     "jest": "^23.6.0"
   }

samples/react-my-teams/src/webparts/myTeams/MyTeamsWebPart.manifest.json

@@ -13,6 +13,8 @@
   // https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f
   "requiresCustomScript": false,
 
+  "supportedHosts": ["SharePointWebPart"],
+
   "preconfiguredEntries": [{
     "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other
     "group": { "default": "Other" },

samples/react-my-teams/src/webparts/myTeams/MyTeamsWebPart.ts

@@ -1,12 +1,8 @@
 import * as React from 'react';
 import * as ReactDom from 'react-dom';
-import { Version, Environment, EnvironmentType } from '@microsoft/sp-core-library';
+import { Version } from '@microsoft/sp-core-library';
-import {
+import { BaseClientSideWebPart } from "@microsoft/sp-webpart-base";
-  BaseClientSideWebPart,
+import { IPropertyPaneConfiguration, PropertyPaneToggle } from "@microsoft/sp-property-pane";
-  IPropertyPaneConfiguration,
-  PropertyPaneToggle
-} from '@microsoft/sp-webpart-base';
-
 import * as strings from 'MyTeamsWebPartStrings';
 import { MyTeams, IMyTeamsProps } from './components/myTeams';
 import { MSGraphClient } from '@microsoft/sp-http';
@@ -22,14 +18,8 @@ export default class MyTeamsWebPart extends BaseClientSideWebPart<IMyTeamsWebPar
   private _teamsService: ITeamsService;
 
   public async onInit(): Promise<void> {
-
+    this._graphClient = await this.context.msGraphClientFactory.getClient();
-    if (DEBUG && Environment.type === EnvironmentType.Local) {
+    this._teamsService = new TeamsService(this._graphClient);
-      console.log("Mock data service not implemented yet");
-    } else {
-
-      this._graphClient = await this.context.msGraphClientFactory.getClient();
-      this._teamsService = new TeamsService(this._graphClient);
-    }
 
     return super.onInit();
   }

samples/react-my-teams/src/webparts/myTeams/components/myTeams/MyTeams.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';
 
 .myTeams {
   .container {

samples/react-my-teams/src/webparts/myTeams/components/myTeams/MyTeams.tsx

@@ -3,7 +3,6 @@ import { FocusZone } from 'office-ui-fabric-react/lib/FocusZone';
 import { List } from 'office-ui-fabric-react/lib/List';
 import styles from '../myTeams/MyTeams.module.scss';
 import { IMyTeamsProps, IMyTeamsState } from '.';
-import { escape } from '@microsoft/sp-lodash-subset';
 import { ITeam, IChannel } from '../../../../shared/interfaces';
 
 export class MyTeams extends React.Component<IMyTeamsProps, IMyTeamsState> {

samples/react-my-teams/tsconfig.json

@@ -1,4 +1,5 @@
 {
+  "extends": "./node_modules/@microsoft/rush-stack-compiler-3.9/includes/tsconfig-web.json",
   "compilerOptions": {
     "target": "es5",
     "forceConsistentCasingInFileNames": true,
@@ -10,25 +11,25 @@
     "experimentalDecorators": true,
     "skipLibCheck": true,
     "outDir": "lib",
+    "inlineSources": false,
+    "strictNullChecks": false,
+    "noUnusedLocals": false,
     "typeRoots": [
       "./node_modules/@types",
       "./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-my-teams/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,

samples/react-quotes/.gitignore

@@ -1,32 +0,0 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-
-# Dependency directories
-node_modules
-
-# Build generated files
-dist
-lib
-solution
-temp
-*.sppkg
-
-# Coverage directory used by tools like istanbul
-coverage
-
-# OSX
-.DS_Store
-
-# Visual Studio files
-.ntvs_analysis.dat
-.vs
-bin
-obj
-
-# Resx Generated Code
-*.resx.ts
-
-# Styles Generated Code
-*.scss.ts