1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
|
import { useAppSelector } from "@/hooks";
import confetti from "canvas-confetti";
import { useEffect } from "react";
// getOutcomeStr: function () {
// return {
// 0: "UNKNOWN", 1: "ENTER",
// 2: "INCOMPLETE", 3: "COMPLETE"
// }[this.get('status')] || '';
// }
export const Complete = () => {
const ts = useAppSelector((state) => state.app.taskStatus);
return (
<>
<h2 className="text-lg">Survey Completed</h2>
<p className="text-emerald-700 text-lg font-bold">
Congratulations! You completed the Survey.
</p>
<p className="text-emerald-700 text-2xl font-bold">
{ts?.user_payout_string}
</p>
<p className="text-slate-300">
You may close this tab and return to submit the HIT
</p>
</>
);
};
export const Enter = () => {
return (
<>
<h2 className="text-lg">Entered</h2>
<p className="text-slate-800 text-lg font-bold">
You're currently in the Survey
</p>
<p className="text-slate-300">
You may close this tab and return to submit the HIT
</p>
</>
);
};
export const InComplete = () => {
const ts = useAppSelector((state) => state.app.taskStatus);
if (!ts) {
return null;
}
return (
<>
<h2 className="text-lg">HIT Complete</h2>
<p className="text-rose-800 text-lg font-bold">
Survey terminated the attempt.
</p>
<p className="text-slate-300">
You may close this tab and return to submit the HIT
</p>
</>
);
};
export const Unknown = () => {
return (
<>
<h2 className="text-lg">Task Issue</h2>
<p className="text-rose-800 text-lg font-bold">
You're not currently eligible for any Surveys
</p>
<p className="text-slate-300">
You may close this tab and return to submit the HIT
</p>
</>
);
};
export const Loading = () => {
return <p className="text-2xl font-semibold">Loading...</p>;
};
const Result = () => {
const ts = useAppSelector((state) => state.app.taskStatus);
const confettiCannons = () => {
const end = Date.now() + 3 * 1000;
const colors = ["#84cc16", "#1e3a8a", "#ec4899"];
const frame = () => {
if (Date.now() > end) return;
confetti({
particleCount: 3,
angle: 60,
spread: 55,
startVelocity: 80,
gravity: 0.7,
origin: { x: 0, y: 0.8 },
colors: colors,
});
confetti({
particleCount: 3,
angle: 120,
spread: 55,
startVelocity: 80,
gravity: 0.7,
origin: { x: 1, y: 0.8 },
colors: colors,
});
requestAnimationFrame(frame);
};
frame();
};
useEffect(() => {
if (ts?.status === 3) {
confettiCannons();
}
}, [ts]);
switch (ts?.status) {
case 0: // UNKNOWN
return <Unknown />;
case 1: // ENTER
return <Enter />;
case 2: // INCOMPLETE
return <InComplete />;
case 3: // COMPLETE
return <Complete />;
default:
return <Loading />;
}
};
export default Result;
|
