use the ProcessInstanceTask interface where we can and move some stuff around better for useEffect

spiffworkflow-frontend/src/interfaces.ts

@@ -24,20 +24,28 @@ export interface RecentProcessModel {
 export interface ProcessInstanceTask {
   id: number;
   task_id: string;
+
+  calling_subprocess_task_id: string;
+  created_at_in_seconds: number;
+  current_user_is_potential_owner: number;
+  data: any;
+  form_schema: any;
+  form_ui_schema: any;
+  lane_assignment_id: string;
+  name: string;
+  process_identifier: string;
+  process_initiator_username: string;
   process_instance_id: number;
+  process_instance_status: string;
   process_model_display_name: string;
   process_model_identifier: string;
-  task_title: string;
-  lane_assignment_id: string;
-  process_instance_status: string;
+  properties: any;
   state: string;
-  process_identifier: string;
-  name: string;
-  process_initiator_username: string;
-  created_at_in_seconds: number;
+  task_title: string;
+  title: string;
+  type: string;
   updated_at_in_seconds: number;
-  current_user_is_potential_owner: number;
-  calling_subprocess_task_id: string;
+
   potential_owner_usernames?: string;
   assigned_user_group_identifier?: string;
 }

spiffworkflow-frontend/src/routes/ProcessInstanceShow.tsx

@@ -154,8 +154,8 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
       }
     }
   }, [
-    //    targetUris,
-    //    params,
+    targetUris,
+    params,
     modifiedProcessModelId,
     permissionsLoaded,
     ability,

spiffworkflow-frontend/src/routes/TaskShow.tsx

@@ -20,11 +20,11 @@ import HttpService from '../services/HttpService';
 import useAPIError from '../hooks/UseApiError';
 import { modifyProcessIdentifierForPathParam } from '../helpers';
 import { useUriListForPermissions } from '../hooks/UriListForPermissions';
-import { PermissionsToCheck } from '../interfaces';
+import { PermissionsToCheck, ProcessInstanceTask } from '../interfaces';
 import { usePermissionFetcher } from '../hooks/PermissionService';
 
 export default function TaskShow() {
-  const [task, setTask] = useState(null);
+  const [task, setTask] = useState<ProcessInstanceTask | null>(null);
   const [userTasks, setUserTasks] = useState(null);
   const params = useParams();
   const navigate = useNavigate();
@@ -39,16 +39,18 @@ export default function TaskShow() {
     permissionRequestData
   );
 
-  const processResult = (result: any) => {
+  useEffect(() => {
+    if (permissionsLoaded) {
+      const processResult = (result: ProcessInstanceTask) => {
+        // Assure we get a valid process model identifier back
+        if (!result.process_model_identifier) {
+          return null;
+        }
         setTask(result);
         const url = `/task-data/${modifyProcessIdentifierForPathParam(
           result.process_model_identifier
         )}/${params.process_instance_id}`;
-    if (
-      result.process_model_identifier &&
-      ability.can('GET', url)
-      // Assure we get a valid process model identifier back
-    ) {
+        if (ability.can('GET', url)) {
           HttpService.makeCallToBackend({
             path: url,
             successCallback: setUserTasks,
@@ -57,17 +59,17 @@ export default function TaskShow() {
             },
           });
         }
+        return null;
       };
-
-  useEffect(() => {
-    if (permissionsLoaded) {
       HttpService.makeCallToBackend({
         path: `/tasks/${params.process_instance_id}/${params.task_id}`,
         successCallback: processResult,
         failureCallback: addError,
       });
     }
-  }, [permissionsLoaded, ability]); // params and targetUris (which deps on params) cause this to re-fire in an infinite loop on error.
+    // FIXME: not sure what to do about addError. adding it to this array causes the page to endlessly reload
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [permissionsLoaded, ability, params, targetUris]);
 
   const processSubmitResult = (result: any) => {
     removeError();
@@ -173,12 +175,16 @@ export default function TaskShow() {
     return errors;
   };
 
-  const formElement = (taskToUse: any) => {
+  const formElement = () => {
+    if (!task) {
+      return null;
+    }
+
     let formUiSchema;
-    let taskData = taskToUse.data;
-    let jsonSchema = taskToUse.form_schema;
+    let taskData = task.data;
+    let jsonSchema = task.form_schema;
     let reactFragmentToHideSubmitButton = null;
-    if (taskToUse.type === 'Manual Task') {
+    if (task.type === 'Manual Task') {
       taskData = {};
       jsonSchema = {
         type: 'object',
@@ -196,10 +202,10 @@ export default function TaskShow() {
           'ui:widget': 'hidden',
         },
       };
-    } else if (taskToUse.form_ui_schema) {
-      formUiSchema = JSON.parse(taskToUse.form_ui_schema);
+    } else if (task.form_ui_schema) {
+      formUiSchema = JSON.parse(task.form_ui_schema);
     }
-    if (taskToUse.state !== 'READY') {
+    if (task.state !== 'READY') {
       formUiSchema = Object.assign(formUiSchema || {}, {
         'ui:readonly': true,
       });
@@ -211,7 +217,7 @@ export default function TaskShow() {
       reactFragmentToHideSubmitButton = <div />;
     }
 
-    if (taskToUse.type === 'Manual Task' && taskToUse.state === 'READY') {
+    if (task.type === 'Manual Task' && task.state === 'READY') {
       reactFragmentToHideSubmitButton = (
         <div>
           <Button type="submit">Continue</Button>
@@ -241,10 +247,13 @@ export default function TaskShow() {
     );
   };
 
-  const instructionsElement = (taskToUse: any) => {
+  const instructionsElement = () => {
+    if (!task) {
+      return null;
+    }
     let instructions = '';
-    if (taskToUse.properties.instructionsForEndUser) {
-      instructions = taskToUse.properties.instructionsForEndUser;
+    if (task.properties.instructionsForEndUser) {
+      instructions = task.properties.instructionsForEndUser;
     }
     return (
       <div className="markdown">
@@ -256,21 +265,19 @@ export default function TaskShow() {
   };
 
   if (task) {
-    const taskToUse = task as any;
     let statusString = '';
-    if (taskToUse.state !== 'READY') {
-      statusString = ` ${taskToUse.state}`;
+    if (task.state !== 'READY') {
+      statusString = ` ${task.state}`;
     }
 
     return (
       <main>
         <div>{buildTaskNavigation()}</div>
         <h3>
-          Task: {taskToUse.title} ({taskToUse.process_model_display_name})
-          {statusString}
+          Task: {task.title} ({task.process_model_display_name}){statusString}
         </h3>
-        {instructionsElement(taskToUse)}
-        {formElement(taskToUse)}
+        {instructionsElement()}
+        {formElement()}
       </main>
     );
   }