Poulter/53925 react upgrade

app/models/legacy_appeal.rb

@@ -399,6 +399,8 @@ def outcoded_by_name
   end
 
   def contested_claim
+    return false unless FeatureToggle.enabled?(:indicator_for_contested_claims)
+
     vacols_representatives&.any? do |r|
       VACOLS::Representative::CONTESTED_REPTYPES.values.pluck(:code).include?(r.reptype)
     end

client/app/components/ErrorBoundary.jsx

@@ -19,6 +19,7 @@ export class ErrorBoundary extends React.Component {
       error,
       info,
     });
+    console.log("Error caught:", error, info);
   }
 
   render() {

client/app/index.js

@@ -10,6 +10,7 @@ import 'pdfjs-dist/web/pdf_viewer.css';
 import React, { Suspense } from 'react';
 import ReactOnRails from 'react-on-rails';
 import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { forOwn } from 'lodash';
 import { BrowserRouter, Switch } from 'react-router-dom';
 
@@ -153,8 +154,11 @@ const componentWrapper = (component) => (props, railsContext, domNodeId) => {
 
   const renderApp = (Component) => {
     const element = wrapComponent(Component);
+    const container = document.getElementById(domNodeId);
+    const root = createRoot(container);
 
-    render(element, document.getElementById(domNodeId));
+    root.render(element);
+    // render(element, document.getElementById(domNodeId));
   };
 
   renderApp(component);

client/app/queue/QueueLoadingScreen.jsx

@@ -45,7 +45,6 @@ class QueueLoadingScreen extends React.PureComponent {
     if (role === 'sct_coordinator' && userIsSCTCoordinator && type === 'assign') {
       return this.props.fetchSpecialtyCaseTeamTasks(chosenUserId, userRole, type);
     }
-
     return this.props.fetchAmaTasksOfUser(chosenUserId, userRole, type);
   }
 
@@ -102,12 +101,16 @@ class QueueLoadingScreen extends React.PureComponent {
     if (this.isUserId(userUrlParam)) {
       const targetUserId = parseInt(userUrlParam, 10);
 
-      return ApiUtil.get(`/user?id=${targetUserId}`).then((resp) =>
-        this.props.setTargetUser(resp.body.user));
+      return ApiUtil.get(`/user?id=${targetUserId}`).then((resp) => {
+        this.props.setTargetUser(resp.body.user);
+        return resp.body.user; // Ensure the user is returned
+      });
     }
 
-    return ApiUtil.get(`/user?css_id=${userUrlParam}`).then((resp) =>
-      this.props.setTargetUser(resp.body.user));
+    return ApiUtil.get(`/user?css_id=${userUrlParam}`).then((resp) => {
+      this.props.setTargetUser(resp.body.user);
+      return resp.body.user; // Ensure the user is returned
+    });
   }
 
   isUserId = (str) => {
@@ -125,8 +128,8 @@ class QueueLoadingScreen extends React.PureComponent {
   }
 
   createLoadPromise = () => {
-    return this.maybeLoadTargetUserInfo().then(() => {
-      const chosenUserId = this.props.targetUserId || this.props.userId;
+    return this.maybeLoadTargetUserInfo().then((result) => {
+      const chosenUserId = result?.id || this.props.targetUserId || this.props.userId;
       const userIsCamoEmployee = this.props.userIsCamoEmployee;
 
       return Promise.all([

client/app/queue/UserManagement.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { flushSync } from 'react-dom';
 import { css } from 'glamor';
 import { sprintf } from 'sprintf-js';
 
@@ -33,6 +34,7 @@ export default class UserManagement extends React.PureComponent {
   // Search functions
   asyncLoadUser = (inputValue) => {
     // don't search till we have min length input
+
     if (inputValue.length < 2) {
       this.setState({ remainingUsers: [] });
 
@@ -42,7 +44,9 @@ export default class UserManagement extends React.PureComponent {
     return ApiUtil.get(`/users?css_id=${inputValue}`).then((response) => {
       const users = response.body.users.data;
 
-      this.setState({ remainingUsers: users });
+      flushSync(() => {
+        this.setState({ remainingUsers: users });
+      });
 
       return this.dropdownOptions();
     });
@@ -68,7 +72,7 @@ export default class UserManagement extends React.PureComponent {
         }
       });
     });
-  }
+  };
 
   // Status functions
 

client/app/queue/caseEvaluation/CaseTimelinessTimeline.jsx

@@ -5,6 +5,7 @@ import COPY from '../../../COPY';
 import { AttorneyDaysWorked } from './AttorneyDaysWorked';
 import { AttorneyTasksTreeTimeline } from './AttorneyTasksTreeTimeline';
 import { LegacyCaseTimeline } from './LegacyCaseTimeline';
+import ErrorMessage from '../../certification/components/ErrorMessage';
 
 export const CaseTimelinessTimeline = (props) => {
   const { appeal,
@@ -14,6 +15,10 @@ export const CaseTimelinessTimeline = (props) => {
     displayCaseTimelinessTimeline,
   } = props;
 
+  if (!task) {
+    return <ErrorMessage />;
+  }
+
   let dateAssigned = moment(task.previousTaskAssignedOn);
   const decisionSubmitted = moment(task.assignedOn);
 

client/app/queue/caseEvaluation/EvaluateDecisionView.jsx

@@ -320,14 +320,23 @@ const mapStateToProps = (state, ownProps) => {
       attorneyChildrenTasks = getLegacyTaskTree(state, {
         appealId: appeal.externalId, judgeDecisionReviewTask });
     } else {
-      // Get all tasks under the JudgeDecisionReviewTask
-      // Filters out those without a closedAt date or that are hideFromCaseTimeline
-      attorneyChildrenTasks = getTaskTreesForAttorneyTasks(state, {
-        appealId: appeal.externalId, judgeDecisionReviewTaskId: judgeDecisionReviewTask.uniqueId
-      });
+      if (judgeDecisionReviewTask && judgeDecisionReviewTask.uniqueId) {
+        // Get all tasks under the JudgeDecisionReviewTask
+        // Filters out those without a closedAt date or that are hideFromCaseTimeline
+        attorneyChildrenTasks = getTaskTreesForAttorneyTasks(state, {
+          appealId: appeal.externalId, judgeDecisionReviewTaskId: judgeDecisionReviewTask.uniqueId
+        });
+      } else {
+        console.error('Judge Decision Review Task or uniqueId is undefined');
+        attorneyChildrenTasks = [];
+      }
     }
   }
 
+   console.log('State:', state);
+  console.log('Task ID:', ownProps.taskId);
+  console.log('Judge Decision Review Task:', judgeDecisionReviewTask);
+
   return {
     appeal,
     attorneyChildrenTasks,

client/app/queue/colocatedTasks/AddColocatedTaskView.jsx

@@ -119,9 +119,15 @@ class AddColocatedTaskView extends React.PureComponent {
           this.props.setAppealAttrs(task.externalAppealId, { location: 'CASEFLOW' });
           this.props.deleteTask(task.uniqueId);
         }
+
+      const nextStepUrl = this.getNextStepUrl();
+      if (nextStepUrl) {
+        this.props.history.push(nextStepUrl);
+       }
       }).
-      catch(() => {
-        // handle the error from the frontend
+      catch((error) => {
+          console.error('Error in goToNextStep:', error);
+          // Handle the error appropriately
       });
   };
 

client/app/queue/components/AssignToAttorneyWidget.jsx

@@ -1,4 +1,5 @@
 import React, { useEffect } from 'react';
+import { flushSync } from 'react-dom';
 import { useSelector, useDispatch } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import { css } from 'glamor';
@@ -393,7 +394,7 @@ const AssignToAttorneyWidgetContainer = (props) => {
       showSuccessMessage={(val) => dispatch(showSuccessMessage(val))}
       resetSuccessMessages={(val) => dispatch(resetSuccessMessages(val))}
       resetAssignees={() => dispatch(resetAssignees())}
-      saveFailure={() => dispatch({ type: ACTIONS.SAVE_FAILURE })}
+      saveFailure={() => flushSync(() => dispatch({ type: ACTIONS.SAVE_FAILURE }))}
       {...props}
     />
   );

client/app/queue/mtv/checkout/MotionToVacateFlowContainer.jsx

@@ -21,11 +21,12 @@ export const MotionToVacateFlowContainer = () => {
 
   const appeal = useSelector((state) => appealWithDetailSelector(state, { appealId }));
 
-  const steps = useMemo(() => getSteps(appeal), [appeal.type, appeal.vacateType]);
+  // const steps = useMemo(() => getSteps(appeal), [appeal.type, appeal.vacateType]);
+  const steps = useMemo(() => getSteps(appeal), [appeal?.type, appeal?.vacateType]);
 
   const initialState = {
     // cloning the individual issues
-    decisionIssues: appeal.decisionIssues.map((issue) => ({ ...issue })),
+    decisionIssues: appeal?.decisionIssues.map((issue) => ({ ...issue })),
     steps,
     getNextUrl: (current) => (getNextStep(current, steps) ? `${basePath}/${getNextStep(current, steps)}` : null),
     getPrevUrl: (current) => (getPrevStep(current, steps) ? `${basePath}/${getPrevStep(current, steps)}` : null)

client/app/queue/mtv/checkout/mtvCheckoutSteps.js

@@ -6,7 +6,9 @@ export const views = {
 };
 
 // This might be more elegantly modeled w/ a finite state machine lib like xstate
-export const getSteps = ({ caseType, vacateType }) => {
+export const getSteps = (appeal = {}) => {
+  const { caseType = '', vacateType = '' } = appeal;
+
   switch (vacateType?.toLowerCase()) {
   case 'straight_vacate':
     return ['review_vacatures', 'submit'];

client/package.json

@@ -107,10 +107,10 @@
     "pluralize": "^7.0.0",
     "prop-types": "^15.7.2",
     "rc-collapse": "^1.11.8",
-    "react": "^16.13.1",
+    "react": "18.2.0",
     "react-copy-to-clipboard": "^5.0.1",
     "react-csv": "^1.1.1",
-    "react-dom": "^16.13.1",
+    "react-dom": "18.2.0",
     "react-draft-wysiwyg": "^1.12.11",
     "react-highlight-words": "^0.8.0",
     "react-hook-form": "^6.14.2",

client/yarn.lock

@@ -14036,15 +14036,13 @@ react-docgen@^5.0.0:
     node-dir "^0.1.10"
     strip-indent "^3.0.0"
 
-react-dom@^16.13.1:
-  version "16.13.1"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.13.1.tgz#c1bd37331a0486c078ee54c4740720993b2e0e7f"
-  integrity sha512-81PIMmVLnCNLO/fFOQxdQkvEq/+Hfpv24XNJfpyZhTRfO0QcmQIF/PgCa1zCOj2w1hrn12MFLyaJ/G0+Mxtfag==
+react-dom@18.2.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
+  integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    prop-types "^15.6.2"
-    scheduler "^0.19.1"
+    scheduler "^0.23.0"
 
 react-dom@^16.9.0:
   version "16.9.0"
@@ -14373,14 +14371,12 @@ react-virtualized@^9.21.2:
     prop-types "^15.6.0"
     react-lifecycles-compat "^3.0.4"
 
-react@^16.13.1:
-  version "16.13.1"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e"
-  integrity sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w==
+react@18.2.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
+  integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    prop-types "^15.6.2"
 
 react@^16.9.0:
   version "16.9.0"
@@ -15184,13 +15180,12 @@ scheduler@^0.18.0:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
-scheduler@^0.19.1:
-  version "0.19.1"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.19.1.tgz#4f3e2ed2c1a7d65681f4c854fa8c5a1ccb40f196"
-  integrity sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==
+scheduler@^0.23.0:
+  version "0.23.2"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.2.tgz#414ba64a3b282892e944cf2108ecc078d115cdc3"
+  integrity sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
 
 schema-utils@2.7.0, schema-utils@^2.6.5, schema-utils@^2.7.0:
   version "2.7.0"