Fixed an issue with state updates in RiskActionPlanner (#1273)

SharePointFramework/.eslintrc.yaml

@@ -27,7 +27,7 @@ rules:
   "no-console": 2
   "default-case": 0
   "eqeqeq": 1
-  "max-classes-per-file": 1
+  "max-classes-per-file": 0
   "jsx-quotes":
     - "error"
     - "prefer-single"

SharePointFramework/ProjectExtensions/src/riskAction/components/RiskAction/RiskAction.tsx

@@ -7,15 +7,15 @@ import { RiskActionContext } from './context'
 import { useRiskAction } from './useRiskAction'
 
 export const RiskAction: FC = () => {
-  const { fluentProviderId, context } = useRiskAction()
+  const { fluentProviderId, contextValue } = useRiskAction()
   return (
     <FluentProvider
       id={fluentProviderId}
       theme={webLightTheme}
       className={styles.root}
       style={{ background: 'transparent' }}
     >
-      <RiskActionContext.Provider value={context}>
+      <RiskActionContext.Provider value={contextValue}>
         <RiskActionPopover>
           <RiskActionFieldValue />
         </RiskActionPopover>

SharePointFramework/ProjectExtensions/src/riskAction/components/RiskAction/useRiskAction.ts

@@ -1,10 +1,17 @@
 import { useId } from '@fluentui/react-components'
-import { useState } from 'react'
+import { useMemo, useState } from 'react'
 import { useRiskActionFieldCustomizerContext } from '../../context'
 
 export function useRiskAction() {
   const fluentProviderId = useId('risk-action-fluent-provider')
   const context = useRiskActionFieldCustomizerContext()
   const [itemContext, setItemContext] = useState(context.itemContext)
-  return { fluentProviderId, context: { itemContext, setItemContext } }
+  const contextValue = useMemo(
+    () => ({
+      itemContext,
+      setItemContext
+    }),
+    [itemContext]
+  )
+  return { fluentProviderId, contextValue }
 }

SharePointFramework/ProjectExtensions/src/riskAction/dataAdapter.ts

@@ -27,15 +27,6 @@ export class DataAdapter extends SPDataAdapterBase {
     this.list = this.sp.web.lists.getById(this._context.pageContext.list.id.toString())
   }
 
-  /**
-   * Encodes the provided `url` to be used as a reference in a Planner task.
-   *
-   * @param url URL to encode
-   */
-  private _encodeUrl(url: string): string {
-    return url.split('%').join('%25').split('.').join('%2E').split(':').join('%3A')
-  }
-
   /**
    * Gets the ID of the user with the provided `mail`.
    *
@@ -138,12 +129,7 @@ export class DataAdapter extends SPDataAdapterBase {
       await task.details.update(
         {
           description: model.get('description') ?? '',
-          references: {
-            [this._encodeUrl(itemContext.url)]: {
-              '@odata.type': 'microsoft.graph.plannerExternalReference',
-              alias: itemContext.title
-            }
-          }
+          references: itemContext.references
         },
         eTag
       )

SharePointFramework/ProjectExtensions/src/riskAction/types.ts

@@ -1,3 +1,4 @@
+import { PlannerExternalReferences } from '@microsoft/microsoft-graph-types'
 import { IFieldCustomizerCellEventParameters } from '@microsoft/sp-listview-extensibility'
 import { PageContext } from '@microsoft/sp-page-context'
 
@@ -15,11 +16,6 @@ export class RiskActionItemContext {
    */
   public title: string
 
-  /**
-   * The URL of the risk action item.
-   */
-  public url: string
-
   /**
    * The value of the field associated with the risk action item.
    */
@@ -30,18 +26,39 @@ export class RiskActionItemContext {
    */
   public hiddenFieldValue: RiskActionHiddenFieldValues
 
+  /**
+   * Represents a RiskAction object.
+   *
+   * @constructor
+   *
+   * @param _event - The `IFieldCustomizerCellEventParameters` object
+   * @param _pageContext - The `PageContext` object
+   * @param hiddenFieldValues - The Map object containing hidden field values.
+   */
   private constructor(
-    event: IFieldCustomizerCellEventParameters,
-    pageContext: PageContext,
-    hiddenFieldValues: Map<string, any>
+    private _event: IFieldCustomizerCellEventParameters,
+    private _pageContext: PageContext,
+    hiddenFieldValues: Map<string, any> = new Map<string, any>()
   ) {
-    this.id = event.listItem.getValueByName('ID')
-    this.title = event.listItem.getValueByName('Title').toString()
-    this.url = `${window.location.protocol}//${window.location.host}${pageContext.list.serverRelativeUrl}/DispForm.aspx?ID=${this.id}`
-    this.fieldValue = event.fieldValue
+    this.id = _event.listItem.getValueByName('ID')
+    this.title = _event.listItem.getValueByName('Title').toString()
+    this.fieldValue = _event.fieldValue
     this.hiddenFieldValue = hiddenFieldValues.get(this.id.toString())
   }
 
+  /**
+   * The reference to the risk action item used for the Planner tasks.
+   */
+  public get references(): PlannerExternalReferences {
+    const url = `${window.location.protocol}//${window.location.host}${this._pageContext?.list?.serverRelativeUrl}/DispForm.aspx?ID=${this.id}`
+    return {
+      [this._encodeUrl(url)]: {
+        '@odata.type': 'microsoft.graph.plannerExternalReference',
+        alias: this.title
+      }
+    }
+  }
+
   /**
    * Updates the current RiskActionItemContext with the provided tasks.
    *
@@ -50,13 +67,23 @@ export class RiskActionItemContext {
    * @returns The updated RiskActionItemContext object.
    */
   public update(tasks: RiskActionPlannerTaskReference[]): RiskActionItemContext {
-    this.fieldValue = tasks.map((task) => task.title).join('\n')
-    this.hiddenFieldValue = {
+    const newContext = new RiskActionItemContext(this._event, this._pageContext)
+    newContext.fieldValue = tasks.map((task) => task.title).join('\n')
+    newContext.hiddenFieldValue = {
       ...this.hiddenFieldValue,
       data: RiskActionPlannerTaskReference.toString(tasks),
       tasks
     }
-    return this
+    return newContext
+  }
+
+  /**
+   * Encodes the provided `url` to be used as a reference in a Planner task.
+   *
+   * @param url URL to encode
+   */
+  private _encodeUrl(url: string): string {
+    return url.split('%').join('%25').split('.').join('%2E').split(':').join('%3A')
   }
 
   /**