Upgraded react-teams-lead-dashboard to SPFx 1.16

samples/react-teams-lead-dashboard/.eslintrc.js

@@ -1,5 +1,15 @@
 require('@rushstack/eslint-config/patch/modern-module-resolution');
 module.exports = {
   extends: ['@microsoft/eslint-config-spfx/lib/profiles/react'],
-  parserOptions: { tsconfigRootDir: __dirname }
+  parserOptions: { tsconfigRootDir: __dirname },
+  rules: {
+    "@typescript-eslint/no-inferrable-types": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-unused-vars": "off",
+    "@microsoft/spfx/no-async-await": "off",
+    "react/jsx-no-bind": "off",
+    "@typescript-eslint/no-empty-function": "off",
+    "@typescript-eslint/no-empty-interface": "off",
+    "@typescript-eslint/ban-types": "off"
+  }
 };

samples/react-teams-lead-dashboard/README.md

@@ -36,6 +36,7 @@ Lead Assist Dashboard | [PnP](https://pnp.github.io/)
 
 Version|Date|Comments
 -------|----|--------
+1.0.2|November 22, 2022|Upgraded to SPFx v1.16.0
 1.0.1|November 15, 2022|Upgraded to SPFx v1.16.0-rc.0
 1.0.0|October 5, 2021|Initial release
 

samples/react-teams-lead-dashboard/config/package-solution.json

@@ -3,7 +3,7 @@
   "solution": {
     "name": "lead-assist-client-side-solution",
     "id": "c311a0fc-3dcb-4316-a798-fd7d8a6d5344",
-    "version": "1.0.14.0",
+    "version": "1.0.20.0",
     "includeClientSideAssets": true,
     "skipFeatureDeployment": true,
     "isDomainIsolated": false,

samples/react-teams-lead-dashboard/package.json

@@ -10,16 +10,16 @@
     "build": "gulp bundle",
     "clean": "gulp clean",
     "serve": "gulp serve --nobrowser",
-    "package": "gulp bundle --ship & gulp package-solution --ship"
+    "package": "gulp bundle --ship && gulp package-solution --ship"
   },
   "dependencies": {
     "@microsoft/mgt-react": "^2.2.0",
     "@microsoft/mgt-spfx": "^2.2.0",
-    "@microsoft/sp-core-library": "1.16.0-rc.0",
+    "@microsoft/sp-core-library": "1.16.0",
-    "@microsoft/sp-lodash-subset": "1.16.0-rc.0",
+    "@microsoft/sp-lodash-subset": "1.16.0",
-    "@microsoft/sp-office-ui-fabric-core": "1.16.0-rc.0",
+    "@microsoft/sp-office-ui-fabric-core": "1.16.0",
-    "@microsoft/sp-property-pane": "1.16.0-rc.0",
+    "@microsoft/sp-property-pane": "1.16.0",
-    "@microsoft/sp-webpart-base": "1.16.0-rc.0",
+    "@microsoft/sp-webpart-base": "1.16.0",
     "@pnp/sp": "^2.7.0",
     "@pnp/spfx-controls-react": "3.11.0",
     "@pnp/spfx-property-controls": "3.10.0",
@@ -29,11 +29,11 @@
     "tslib": "2.3.1"
   },
   "devDependencies": {
-    "@microsoft/eslint-plugin-spfx": "1.16.0-rc.0",
+    "@microsoft/eslint-plugin-spfx": "1.16.0",
-    "@microsoft/eslint-config-spfx": "1.16.0-rc.0",
+    "@microsoft/eslint-config-spfx": "1.16.0",
     "@microsoft/rush-stack-compiler-4.5": "0.2.2",
     "@microsoft/sp-build-web": "1.16.0-rc.0",
-    "@microsoft/sp-module-interfaces": "1.16.0-rc.0",
+    "@microsoft/sp-module-interfaces": "1.16.0",
     "@rushstack/eslint-config": "2.5.1",
     "@types/react": "17.0.45",
     "@types/react-dom": "17.0.17",

samples/react-teams-lead-dashboard/src/services/DataService.tsx

@@ -76,8 +76,8 @@ export default class DataService {
      * @returns Numeric array of demo data
      */
     public static generateNumericDemoData(length: number): number[] {
-        let demoData = [...Array(length)].map(() => {
+        const demoData = [...Array(length)].map(() => {
-            let n = Math.floor(Math.random() * 9);
+            const n = Math.floor(Math.random() * 9);
 
             return n;
         });
@@ -172,13 +172,13 @@ export default class DataService {
      */
     public static async generateGraphDemoData(): Promise<void> {
         if (confirm(strings.ConfirmAddGraphDemoData) == true) {
-            let provider = Providers.globalProvider;
+            const provider = Providers.globalProvider;
             if (provider) {
                 // Get the Graph client
-                let graphClient = provider.graph.client;
+                const graphClient = provider.graph.client;
 
                 // Add new task
-                let taskLists = await graphClient.api("me/todo/lists").get();
+                const taskLists = await graphClient.api("me/todo/lists").get();
 
                 // Simple task
                 await graphClient.api(`me/todo/lists/${taskLists.value[0].id}/tasks`).create({
@@ -193,7 +193,7 @@ export default class DataService {
                 });
 
                 // Task with due date
-                let taskDate = new Date();
+                const taskDate = new Date();
                 taskDate.setDate(taskDate.getDate() + 1);
                 await graphClient.api(`me/todo/lists/${taskLists.value[0].id}/tasks`).create({
                     "title": strings.DemoTaskWithDateTitle,
@@ -211,8 +211,8 @@ export default class DataService {
                 });
 
                 // Start and end date for events
-                let startDate = new Date();
+                const startDate = new Date();
-                let endDate = new Date();
+                const endDate = new Date();
 
                 // Set the start and end date to tomorrow
                 startDate.setDate(startDate.getDate() + 1);
@@ -331,7 +331,7 @@ export default class DataService {
      * @param typeKindId Type kind id of the field
      */
     private static async ensureWebField(fieldName: string, fieldType: string, typeKindId: number) {
-        var existingField = (await sp.web.fields.get()).filter(f => f.StaticName == fieldName);
+        const existingField = (await sp.web.fields.get()).filter(f => f.StaticName == fieldName);
         
         // If the field has not been added yet create it
         if (existingField && existingField.length == 0) {

samples/react-teams-lead-dashboard/src/webparts/leadAssistDashboard/components/CustomAgendaTemplate.tsx

@@ -50,7 +50,7 @@ export default class CustomAgendaTemplate {
      * @returns The element to display the loading state
      */
     public static loadingTemplate = (props: MgtTemplateProps): JSX.Element => {
-        return <Spinner label="Loading..."></Spinner>;
+        return <Spinner label="Loading..." />;
     }
 
     /**

samples/react-teams-lead-dashboard/src/webparts/leadAssistDashboard/components/CustomTodoTemplate.tsx

@@ -16,7 +16,7 @@ export default class CustomTodoTemplate {
         const title: string = task.title;
         const dueDateTime: Date = (task.dueDateTime) ? new Date(task.dueDateTime.dateTime) : undefined;
         
-        let result: JSX.Element = <div></div>;
+        let result: JSX.Element = <div />;
 
         // If task is not completed
         if (task.status != "completed") {

samples/react-teams-lead-dashboard/src/webparts/leadAssistDashboard/components/LeadAssistDashboard.tsx

@@ -254,7 +254,7 @@ export default class LeadAssistDashboard extends React.Component<ILeadAssistDash
         <div className={`${styles.row} ${styles.padding5}`}>
           <div className={(this.props.isTeamsContext) ? styles.smallColumnTeams : styles.smallColumn}>
             <div>
-              <span className={styles.chartCallDot}></span>
+              <span className={styles.chartCallDot} />
               {strings.ActivityChartLegendCalls}
             </div>
             <div className={styles.chartNumber}>
@@ -263,7 +263,7 @@ export default class LeadAssistDashboard extends React.Component<ILeadAssistDash
           </div>
           <div className={styles.smallColumn}>
             <div>
-                <span className={styles.chartEmailDot}></span>
+                <span className={styles.chartEmailDot} />
                 {strings.ActivityChartLegendEmails}
             </div>
             <div className={styles.chartNumber}>
@@ -272,7 +272,7 @@ export default class LeadAssistDashboard extends React.Component<ILeadAssistDash
           </div>
           <div className={styles.smallColumn}>
             <div>
-                <span className={styles.chartTextDot}></span>
+                <span className={styles.chartTextDot} />
                 {strings.ActivityChartLegendTexts}
             </div>
             <div className={styles.chartNumber}>
@@ -411,7 +411,7 @@ export default class LeadAssistDashboard extends React.Component<ILeadAssistDash
         displayName: " ",
         minWidth: 50,
         render: (item?: any, index?: number, column?: any) => {
-          let content = <div></div>;
+          let content = <div />;
           // If the element exists
           if (item) {
             // Create an clickable icon to open the SharePoint list item