From e7183645bfccfd57632338c7ad14390a46dad00b Mon Sep 17 00:00:00 2001
From: dappvibe <57523522+dappvibe@users.noreply.github.com>
Date: Mon, 2 Mar 2026 08:53:10 +0000
Subject: [PATCH] Refactor: use named constants for Deal state

Replaced hardcoded magic numbers for deal states with a defined
DealState constant object. Exported DealState from src/model/Deal.js
and refactored src/pages/Me/UserDeals.tsx to utilize these constants
instead of fragile index-based mapping. Updated UserDeals.test.tsx
to mock the DealState successfully.

Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com>
---
 src/model/Deal.js               | 13 ++++++++++++-
 src/pages/Me/UserDeals.test.tsx | 10 ++++++++++
 src/pages/Me/UserDeals.tsx      | 17 +++++++++++++----
 3 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/src/model/Deal.js b/src/model/Deal.js
index 82d4d39e..7561a058 100644
--- a/src/model/Deal.js
+++ b/src/model/Deal.js
@@ -1,3 +1,14 @@
+export const DealState = {
+  Created: 0,
+  Accepted: 1,
+  Funded: 2,
+  Paid: 3,
+  Disputed: 4,
+  Cancelled: 5,
+  Resolved: 6,
+  Released: 7,
+}
+
 export default class Deal {
   constructor(contract) {
     this.contract = contract
@@ -32,7 +43,7 @@ export default class Deal {
         this.taker = taker
         this.tokenAmount = Number(tokenAmount)
         this.fiatAmount = Number(fiatAmount) / 10 ** 6 // FIXME test with large input
-        this.state = Number(state) // FIXME constants
+        this.state = Number(state)
         this.paymentInstructions = paymentInstructions
         this.allowCancelUnacceptedAfter = new Date(Number(allowCancelUnacceptedAfter) * 1000)
         this.allowCancelUnpaidAfter = new Date(Number(allowCancelUnpaidAfter) * 1000)
diff --git a/src/pages/Me/UserDeals.test.tsx b/src/pages/Me/UserDeals.test.tsx
index a168ba32..fd2e6f11 100644
--- a/src/pages/Me/UserDeals.test.tsx
+++ b/src/pages/Me/UserDeals.test.tsx
@@ -17,6 +17,16 @@ vi.mock('@/hooks/useContract', () => ({
 // Mock models
 vi.mock('@/model/Deal.js', () => {
   return {
+    DealState: {
+      Created: 0,
+      Accepted: 1,
+      Funded: 2,
+      Paid: 3,
+      Disputed: 4,
+      Cancelled: 5,
+      Resolved: 6,
+      Released: 7,
+    },
     default: class Deal {
       // mocked constructor
       constructor(c) {
diff --git a/src/pages/Me/UserDeals.tsx b/src/pages/Me/UserDeals.tsx
index c8139a1f..0a56651e 100644
--- a/src/pages/Me/UserDeals.tsx
+++ b/src/pages/Me/UserDeals.tsx
@@ -1,14 +1,23 @@
 import { Link } from 'react-router-dom'
 import { Empty, List, Skeleton, Tag } from 'antd'
 import React, { useEffect, useState } from 'react'
-import Deal from '@/model/Deal.js'
+import Deal, { DealState } from '@/model/Deal.js'
 import { useAccount } from 'wagmi'
 import { useContract } from '@/hooks/useContract'
 import Offer from '@/model/Offer.js'
 
-function StateTag(args) {
-  const index = ['Initiated', 'Accepted', 'Funded', 'Paid', 'Disputed', 'Canceled', 'Resolved', 'Completed']
-  return <Tag color={args.state === 7 ? 'green' : 'blue'}>{index[args.state]}</Tag>
+function StateTag({ state }: { state: number }) {
+  const stateNames = {
+    [DealState.Created]: 'Initiated',
+    [DealState.Accepted]: 'Accepted',
+    [DealState.Funded]: 'Funded',
+    [DealState.Paid]: 'Paid',
+    [DealState.Disputed]: 'Disputed',
+    [DealState.Cancelled]: 'Canceled',
+    [DealState.Resolved]: 'Resolved',
+    [DealState.Released]: 'Completed',
+  }
+  return <Tag color={state === DealState.Released ? 'green' : 'blue'}>{stateNames[state]}</Tag>
 }
 
 function DealItem({ deal }) {