ucdavis · sprucely · Dec 2, 2025 · Dec 2, 2025 · Dec 2, 2025 · coderabbitai
@@ -17,34 +17,30 @@
     "lint": "node node_modules/eslint/bin/eslint.js ClientApp --ext .tsx,.ts,.js,.jsx"
   },
   "dependencies": {
-    "axios": "^0.21.1",
+    "axios": "^1.7.9",
     "bootstrap-datepicker": "^1.8.0",
     "classnames": "^2.2.6",
-    "date-fns": "^1.30.1",
+    "date-fns": "^3.6.0",
     "pretty-checkbox": "^3.0.3",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "react-error-overlay": "6.0.9",
-    "react-dropzone": "^8.0.4",
-    "react-router-dom": "5.3.0",
-    "react-scripts": "5.0.1",
-    "recompose": "^0.30.0"
+    "react-dropzone": "^14.3.5",
+    "react-router-dom": "^6.28.0",
+    "react-scripts": "5.0.1"
   },
   "devDependencies": {
     "@types/bootstrap-datepicker": "^0.0.13",
     "@types/jquery": "^3.3.29",
-    "@types/node": "^14.14.31",
-    "@types/react": "^17.0.2",
-    "@types/react-dom": "^17.0.9",
+    "@types/node": "^22.10.1",
+    "@types/react": "^19.0.1",
+    "@types/react-dom": "^19.0.2",
     "@types/react-hot-loader": "^4.1.0",
-    "@types/react-router": "5.1.8",
-    "@types/react-router-dom": "5.1.8",
-    "@types/recompose": "^0.30.10",
     "eslint-config-prettier": "^8.3.0",
     "isomorphic-fetch": "2.2.1",
     "prettier": "2.0.5",
     "sass": "^1.49.9",
-    "typescript": "^4.6.2"
+    "typescript": "^5.7.2"
   },
   "eslintConfig": {
     "extends": [

@@ -3,6 +3,7 @@ import * as React from 'react';
 interface IProps {
   className: string;
   onDismiss: () => void;
+  children?: React.ReactNode;
 }
 
 export default class Alert extends React.Component<IProps, {}> {

@@ -3,6 +3,7 @@ import * as React from 'react';
 import FileUpload from './fileUpload';
 
 import { InvoiceAttachment } from '../models/InvoiceAttachment';
+import { Team } from '../models/Team';
 
 import TeamContext from '../contexts/TeamContext';
 
@@ -13,6 +14,7 @@ interface IProps {
 
 export default class AttachmentsControl extends React.Component<IProps, {}> {
   static contextType = TeamContext;
+  context!: Team;
 
   public render() {
     const { attachments } = this.props;
@@ -26,7 +28,7 @@ export default class AttachmentsControl extends React.Component<IProps, {}> {
   }
 
   private renderAttachment = (attachment: InvoiceAttachment) => {
-    const team = this.context;
+    const team = this.context as Team;
 
     const fileTypeIcon = this.getFileTypeIcon(attachment.contentType);
 

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { isAfter } from 'date-fns';
+import { isAfter, format } from 'date-fns';
 
 import { Coupon } from '../models/Coupon';
 import { InvoiceDiscount } from '../models/InvoiceDiscount';
@@ -140,7 +140,7 @@ export default class CouponSelectControl extends React.Component<
               <dd className='col-sm-8'>${discountAmount}</dd>
 
               <dt className='col-sm-4'>Expires On</dt>
-              <dd className='col-sm-8'>{expiresAt}</dd>
+              <dd className='col-sm-8'>{expiresAt ? format(expiresAt, 'MM/dd/yyyy') : ''}</dd>
             </dl>
           </div>
           <div className='col-md-3 d-flex flex-column justify-content-around align-items-center'>

@@ -50,7 +50,7 @@ export default class DateControl extends React.Component<IProps, {}> {
         className='input-group date'
         data-provide='datepicker'
         {...datePickerOptions}
-        ref={r => (this._datePicker = r)}
+        ref={r => { this._datePicker = r; }}
       >
         <input
           type='text'

@@ -58,19 +58,21 @@ export default class EditItemsTable extends React.Component<IProps, IState> {
     };
   }
 
-  public componentWillReceiveProps(nextProps: IProps) {
-    const items: IState['items'] = {
-      byHash: {},
-      byId: []
-    };
+  public componentDidUpdate(prevProps: IProps) {
+    if (prevProps.items !== this.props.items) {
+      const items: IState['items'] = {
+        byHash: {},
+        byId: []
+      };
 
-    nextProps.items.forEach((item, index) => {
-      const id = item.id;
-      items.byId.push(id);
-      items.byHash[id] = item;
-    });
+      this.props.items.forEach((item, index) => {
+        const id = item.id;
+        items.byId.push(id);
+        items.byHash[id] = item;
+      });
 
-    this.setState({ items });
+      this.setState({ items });
+    }
   }
 
   public render() {

@@ -1,9 +1,10 @@
 import * as React from 'react';
 
-import axios, { AxiosResponse, CancelTokenSource } from 'axios';
-import Dropzone, { DropzoneRenderArgs } from 'react-dropzone';
+import axios, { AxiosResponse, AxiosProgressEvent, CancelTokenSource } from 'axios';
+import { useDropzone } from 'react-dropzone';
 
 import { InvoiceAttachment } from '../models/InvoiceAttachment';
+import { Team } from '../models/Team';
 
 import TeamContext from '../contexts/TeamContext';
 
@@ -27,6 +28,7 @@ interface IState {
 
 export default class FileUpload extends React.Component<IProps, IState> {
   static contextType = TeamContext;
+  context!: Team;
 
   constructor(props) {
     super(props);
@@ -42,32 +44,13 @@ export default class FileUpload extends React.Component<IProps, IState> {
 
     return (
       <div className={className}>
-        <Dropzone onDrop={this.startUpload}>{this.renderDropzone}</Dropzone>
+        <DropzoneWrapper onDrop={this.startUpload} />
 
         {attachmentsUploading.map(this.renderUploadingAttachment)}
       </div>
     );
   }
 
-  private renderDropzone = (args: DropzoneRenderArgs) => {
-    return (
-      <div {...args.getRootProps()} className='dropzone'>
-        <input {...args.getInputProps()} />
-        <div className='d-flex justify-content-center align-items-center'>
-          <i className='fas fa-upload fa-2x me-4' />
-          <div className='d-flex flex-column align-items-center'>
-            {args.isDragActive ? (
-              <span>Drop files here...</span>
-            ) : (
-              <span>Drop files to attach, or click to Browse.</span>
-            )}
-            <span>(Individual file upload size limit 5 MB)</span>
-          </div>
-        </div>
-      </div>
-    );
-  };
-
   private renderUploadingAttachment = (
     attachment: UploadingInvoiceAttachment
   ) => {
@@ -146,7 +129,7 @@ export default class FileUpload extends React.Component<IProps, IState> {
     return `${(size / 1024 / 1024).toFixed(1)} MB`;
   };
 
-  private startUpload = (accepted: File[], rejected, event) => {
+  private startUpload = (accepted: File[]) => {
     const { slug } = this.context;
 
     // start uploads
@@ -189,7 +172,7 @@ export default class FileUpload extends React.Component<IProps, IState> {
   };
 
   private onUploadProgress = (
-    progressEvent: ProgressEvent,
+    progressEvent: AxiosProgressEvent,
     identifier: string
   ) => {
     const attachmentsUploading = [...this.state.attachmentsUploading];
@@ -198,7 +181,7 @@ export default class FileUpload extends React.Component<IProps, IState> {
     const index = attachmentsUploading.findIndex(
       a => a.identifier === identifier
     );
-    if (index > -1) {
+    if (index > -1 && progressEvent.total) {
       attachmentsUploading[index].progress =
         (progressEvent.loaded / progressEvent.total) * 100;
 
@@ -254,3 +237,25 @@ export default class FileUpload extends React.Component<IProps, IState> {
     });
   };
 }
+
+// Wrapper component to use the useDropzone hook
+function DropzoneWrapper({ onDrop }: { onDrop: (files: File[]) => void }) {
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });
+
+  return (
+    <div {...getRootProps()} className='dropzone'>
+      <input {...getInputProps()} />
+      <div className='d-flex justify-content-center align-items-center'>
+        <i className='fas fa-upload fa-2x me-4' />
+        <div className='d-flex flex-column align-items-center'>
+          {isDragActive ? (
+            <span>Drop files here...</span>
+          ) : (
+            <span>Drop files to attach, or click to Browse.</span>
+          )}
+          <span>(Individual file upload size limit 5 MB)</span>
+        </div>
+      </div>
+    </div>
+  );
+}
@@ -5,6 +5,7 @@ interface IProps {
     className?: string;
     validate: boolean;
     formRef?: (form: HTMLFormElement) => void;
+    children?: React.ReactNode;
 }
 
 export default class InvoiceForm extends React.Component<IProps, {}> {

@@ -5,6 +5,7 @@ import Portal from './portal';
 interface IProps {
   dialogClassName?: string;
   isOpen: boolean;
+  children?: React.ReactNode;
 
   onOpened?: () => void;
   onClosed?: () => void;
@@ -37,23 +38,26 @@ export default class LoadingModal extends React.Component<IProps, IState> {
 
   public componentDidMount() {
     this._isMounted = true;
+
+    if (this.props.isOpen) {
+      this.onOpen();
+    }
   }
 
-  public componentWillReceiveProps(nextProps) {
-    if (nextProps.isOpen !== this.props.isOpen) {
-      this.setState({ isOpen: nextProps.isOpen });
-    }
+  public componentDidUpdate(prevProps: IProps, prevState: IState) {
+    // Handle isOpen prop changes
+    if (prevProps.isOpen !== this.props.isOpen) {
+      this.setState({ isOpen: this.props.isOpen });
 
-    if (nextProps.isOpen) {
-      this.onOpen();
-    } else {
-      this.onClose();
+      if (this.props.isOpen) {
+        this.onOpen();
+      } else {
+        this.onClose();
+      }
     }
-  }
 
-  public componentWillUpdate(nextProps, nextState) {
-    // close -> open
-    if (nextState.isOpen && !this.state.isOpen) {
+    // Handle state changes: close -> open
+    if (this.state.isOpen && !prevState.isOpen) {
       this.init();
     }
   }
@@ -94,7 +98,7 @@ export default class LoadingModal extends React.Component<IProps, IState> {
       <div
         className={`modal-dialog modal-dialog-centered ${dialogClassName}`}
         role='document'
-        ref={r => (this._dialog = r)}
+        ref={r => { this._dialog = r; }}
       >
         <div className='modal-content'>{this.props.children}</div>
       </div>

@@ -37,10 +37,12 @@ export default class NumberControl extends React.PureComponent<IProps, IState> {
     };
   }
 
-  public componentWillReceiveProps(nextProps: IProps) {
-    this.setState({
-      value: this.valueToString(nextProps.value)
-    });
+  public componentDidUpdate(prevProps: IProps) {
+    if (prevProps.value !== this.props.value) {
+      this.setState({
+        value: this.valueToString(this.props.value)
+      });
+    }
   }
 
   public render() {

@@ -8,7 +8,8 @@ const canUseDOM = !!(
   );
 
 interface IProps {
-    node: Element
+    node: Element;
+    children?: React.ReactNode;
 }
 
 export default class Portal extends React.Component<IProps, {}> {

@@ -39,7 +39,7 @@ export default class PreviewFrame extends React.Component<IProps, {}> {
 
         return (
             <div>
-                <form method="post" action={action} target="iframe_preview" ref={r => this._previewForm = r}>
+                <form method="post" action={action} target="iframe_preview" ref={r => { this._previewForm = r; }}>
                     <input type="hidden" name="json" value={value} />
                 </form>
                 <div className="d-flex" style={{ minHeight: '60vh' }}>

@@ -1100,11 +1100,11 @@ export default class RechargeAccountsControl extends React.Component<
           <td className='cell-financial-segment'>
             <div className='input-group'>
               <input
-                ref={el =>
-                  (this.inputRefs[
+                ref={el => {
+                  this.inputRefs[
                     `${direction.toLowerCase()}-${index}-chart`
-                  ] = el)
-                }
+                  ] = el;
+                }}
                 type='text'
                 className={`form-control ${
                   account.isValidating

@@ -136,7 +136,7 @@ export default class CreateInvoiceContainer extends React.Component<
       <InvoiceForm
         className='card'
         validate={validate}
-        formRef={r => (this._formRef = r)}
+        formRef={r => { this._formRef = r; }}
       >
         <LoadingModal loading={loading} />
         <div className='card-header card-header-yellow'>
@@ -175,7 +175,7 @@ export default class CreateInvoiceContainer extends React.Component<
         {invoiceType === 'Recharge' && (
           <div className='card-body invoice-recharge-accounts'>
             <RechargeAccountsControl
-              ref={r => (this._rechargeAccountsRef = r)}
+              ref={r => { this._rechargeAccountsRef = r; }}
               rechargeAccounts={rechargeAccounts}
               invoiceTotal={calculateTotal(items, discount, taxPercent)}
               onChange={v => this.updateProperty('rechargeAccounts', v)}