Skip to content

Commit 4e67fb7

Browse files
ErwanDecosterErwanDecoster
committed
feat: integrate StatusCell component for task status display in buildTaskDetails and columns
1 parent 77b576a commit 4e67fb7

File tree

3 files changed

+83
-71
lines changed

3 files changed

+83
-71
lines changed

‎src/modules/tasks/StatusCell.tsx‎

Lines changed: 64 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -12,60 +12,96 @@ type StatusEnumType =
1212
const StatusCell = ({
1313
statusEnum,
1414
timeoutTimestamp = 0,
15+
bare = false,
1516
}: {
1617
statusEnum: StatusEnumType;
1718
timeoutTimestamp?: number;
19+
bare?: boolean;
1820
}) => {
19-
let status, color;
2021
const timeout = timeoutTimestamp && timeoutTimestamp < Date.now();
22+
23+
let label = '';
24+
let colorClass = '';
25+
let bgClass = '';
26+
let borderClass = '';
27+
2128
switch (statusEnum) {
22-
// task satus
2329
case 'INACTIVE':
24-
status = 'INACTIVE';
25-
color = timeout ? '#EF5353' : '#F4C503';
30+
label = 'INACTIVE';
31+
colorClass = timeout
32+
? 'text-danger-foreground'
33+
: 'text-warning-foreground';
34+
bgClass = timeout
35+
? 'bg-danger-foreground/10'
36+
: 'bg-warning-foreground/10';
37+
borderClass = timeout ? 'border-danger-border' : 'border-warning-border';
2638
break;
2739
case 'ACTIVE':
28-
status = 'STARTED';
29-
color = timeout ? '#EF5353' : '#F4C503';
40+
label = 'STARTED';
41+
colorClass = timeout
42+
? 'text-danger-foreground'
43+
: 'text-warning-foreground';
44+
bgClass = timeout
45+
? 'bg-danger-foreground/10'
46+
: 'bg-warning-foreground/10';
47+
borderClass = timeout ? 'border-danger-border' : 'border-warning-border';
3048
break;
3149
case 'REVEALING':
32-
status = 'REVEALING';
33-
color = timeout ? '#EF5353' : '#F4C503';
50+
label = 'REVEALING';
51+
colorClass = timeout
52+
? 'text-danger-foreground'
53+
: 'text-warning-foreground';
54+
bgClass = timeout
55+
? 'bg-danger-foreground/10'
56+
: 'bg-warning-foreground/10';
57+
borderClass = timeout ? 'border-danger-border' : 'border-warning-border';
3458
break;
3559
case 'COMPLETED':
36-
status = 'COMPLETED';
37-
color = '#11B15E';
60+
label = 'COMPLETED';
61+
colorClass = 'text-success-foreground';
62+
bgClass = 'bg-success-foreground/10';
63+
borderClass = 'border-success-border';
3864
break;
3965
case 'FAILLED':
40-
status = 'CLAIMED';
41-
color = '#EF5353';
66+
label = 'CLAIMED';
67+
colorClass = 'text-danger-foreground';
68+
bgClass = 'bg-danger-foreground/10';
69+
borderClass = 'border-danger-border';
4270
break;
43-
//contribution status
4471
case 'CONTRIBUTED':
45-
status = 'CONTRIBUTED';
46-
color = '#F4C503';
72+
label = 'CONTRIBUTED';
73+
colorClass = 'text-warning-foreground';
74+
bgClass = 'bg-warning-foreground/10';
75+
borderClass = 'border-warning-border';
4776
break;
4877
case 'PROVED':
49-
status = 'PROVED';
50-
color = '#11B15E';
78+
label = 'PROVED';
79+
colorClass = 'text-success-foreground';
80+
bgClass = 'bg-success-foreground/10';
81+
borderClass = 'border-success-border';
5182
break;
5283
case 'REJECTED':
53-
status = 'REJECTED';
54-
color = '#EF5353';
84+
label = 'REJECTED';
85+
colorClass = 'text-danger-foreground';
86+
bgClass = 'bg-danger-foreground/10';
87+
borderClass = 'border-danger-border';
5588
break;
5689
default:
57-
status = '';
58-
color = '#F4C503';
90+
label = 'UNSET';
91+
colorClass = 'text-warning-foreground';
92+
bgClass = 'bg-warning-foreground/10';
93+
borderClass = 'border-warning-border';
94+
break;
5995
}
6096

97+
const classes = bare
98+
? `${colorClass}`
99+
: `rounded-full border px-2 py-1 ${colorClass} ${bgClass} ${borderClass}`;
100+
61101
return (
62-
<div
63-
style={{
64-
color: color,
65-
}}
66-
>
67-
{status}
68-
</div>
102+
<span className="flex flex-wrap items-center gap-2">
103+
<span className={classes}>{label}</span>
104+
</span>
69105
);
70106
};
71107

‎src/modules/tasks/task/buildTaskDetails.tsx‎

Lines changed: 18 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import {
1010
formatElapsedTime,
1111
} from '@/utils/formatElapsedTime';
1212
import { truncateAddress } from '@/utils/truncateAddress';
13+
import StatusCell from '../StatusCell';
1314

1415
export function buildTaskDetails({
1516
task,
@@ -18,19 +19,6 @@ export function buildTaskDetails({
1819
task: Task;
1920
isConnected: boolean;
2021
}) {
21-
const tasksCount = parseInt(task?.deal.botSize) || 1;
22-
const completedTasksCount = parseInt(task?.deal.completedTasksCount) || 0;
23-
const claimedTasksCount = parseInt(task?.deal.claimedTasksCount) || 0;
24-
const pendingTasksCount =
25-
tasksCount - (completedTasksCount + claimedTasksCount);
26-
27-
const completedRatio = completedTasksCount / tasksCount;
28-
const claimedRatio = claimedTasksCount / tasksCount;
29-
const pendingRatio = pendingTasksCount / tasksCount;
30-
31-
const isClaimable =
32-
task.finalDeadline * 1000 < Date.now() && isConnected && pendingRatio > 0;
33-
3422
return {
3523
...(task.taskid && {
3624
Taskid: (
@@ -128,38 +116,25 @@ export function buildTaskDetails({
128116
/>
129117
),
130118
}),
131-
...((pendingRatio || completedRatio || claimedRatio) && {
119+
...(task.status && {
132120
Status: (
133-
<span>
134-
<span className="flex flex-wrap items-center gap-2 text-xs font-medium">
135-
{completedRatio > 0 && (
136-
<span className="bg-success-foreground/10 border-success-border text-success-foreground rounded-full border px-2 py-1">
137-
{Math.round(completedRatio * 100)}% COMPLETED
138-
</span>
139-
)}
140-
141-
{claimedRatio > 0 && (
142-
<span className="bg-info-foreground/10 border-info-border text-info-foreground rounded-full border px-2 py-1">
143-
{Math.round(claimedRatio * 100)}% CLAIMED
144-
</span>
145-
)}
146-
147-
{pendingRatio > 0 && (
148-
<span
149-
className={`rounded-full border px-2 py-1 ${
150-
isClaimable
151-
? 'bg-info-foreground/10 border-info-border text-info-foreground'
152-
: 'bg-warning-foreground/10 border-warning-border text-warning-foreground'
153-
}`}
154-
>
155-
{Math.round(pendingRatio * 100)}%{' '}
156-
{isClaimable ? 'CLAIMABLE' : 'PENDING'}
157-
</span>
158-
)}
159-
</span>
121+
<>
122+
<StatusCell statusEnum={task.status} />
123+
{/* {task.finalDeadline &&
124+
task.finalDeadline * 1000 < Date.now() &&
125+
task.status !== 'COMPLETED' &&
126+
task.status !== 'FAILLED' &&
127+
isConnected && (
128+
<>
129+
TODO add claim button
130+
</>
131+
)} */}
160132

161-
{/* {isClaimable && <ClaimFailedTask taskId="" />} // TODO */}
162-
</span>
133+
{/* {task.results &&
134+
taskResultToObject(task.results)?.storage === 'ipfs' && (
135+
TODO add Download result archive button
136+
)} */}
137+
</>
163138
),
164139
}),
165140
...(task.results && {

‎src/modules/tasks/tasksTable/columns.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ export const columns: ColumnDef<Task>[] = [
4646
<StatusCell
4747
statusEnum={status}
4848
timeoutTimestamp={finalDeadlineTimestamp}
49+
bare
4950
/>
5051
);
5152
},

0 commit comments

Comments
 (0)