Enter the email address you want to use for James Billings.
- - {state === "sent" &&Check your email to finish linking your account.
} - {state === "failed" &&Unable to send the link. Please try again.
} - {state === "missing-worker" &&This page is missing your MTurk worker ID.
} - {mockLink && ( -- Development link: continue -
- )} -Enter the email address you want to use for James Billings.
+ + {state === "sent" && ( +Check your email to finish linking your account.
+ )} + {state === "failed" && ( +Unable to send the link. Please try again.
+ )} + {state === "missing-worker" && ( +This page is missing your MTurk worker ID.
+ )} + {mockLink && ( ++ Development link:{" "} + + continue + +
+ )} +This login link is missing its token.
; + const started = useRef(false); + const [state, setState] = useStateThis login link is invalid or has expired.
; - } - returnSigning you in…
; + + // Keep the credential out of browser history and subsequent Referer headers. + window.history.replaceState({}, "", window.location.pathname); + + void fetch("/auth/magic-link/exchange", { + method: "POST", + credentials: "include", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ token: token }), + }) + .then((response) => { + if (!response.ok) throw new Error("Magic-link exchange failed"); + window.location.replace("/"); + }) + .catch(() => setState("failed")); + }, []); + + if (state === "missing") { + returnThis login link is missing its token.
; + } + if (state === "failed") { + returnThis login link is invalid or has expired.
; + } + returnSigning you in…
; }; export default MagicLink; diff --git a/jb-ui/src/pages/Preview.tsx b/jb-ui/src/pages/Preview.tsx index 153b4bb..6e50b0d 100644 --- a/jb-ui/src/pages/Preview.tsx +++ b/jb-ui/src/pages/Preview.tsx @@ -1,287 +1,300 @@ import { - Leaderboard, - LeaderboardApi, - LeaderboardCode, - LeaderboardFrequency, - LeaderboardRow, + Leaderboard, + LeaderboardApi, + LeaderboardCode, + LeaderboardFrequency, + LeaderboardRow, } from "@/api_fsb"; import { useAppSelector } from "@/hooks"; -import { bpid, formatCentsToUSD, truncate, } from "@/lib/utils"; +import { bpid, formatCentsToUSD, truncate } from "@/lib/utils"; import { activeSurveys, activeUsers, maxPayout } from "@/models/grlStatsSlice"; import { clsx } from "clsx"; -import moment from 'moment'; -import { useEffect, useState } from 'react'; +import moment from "moment"; +import { useEffect, useState } from "react"; const showSmartRank = ( - item: LeaderboardRow, - index: number, - items: LeaderboardRow[] | undefined + item: LeaderboardRow, + index: number, + items: LeaderboardRow[] | undefined, ): boolean => { - /** - * Smart rank calculation - this determines if we should show the rank - * value. It's confusing to show people that multiple individuals ranked - * in the same place, so this will only display the next ranked value, eg: - * - * - 1st - * - ___ - * - 3rd - * - ___ - * - ___ - * - 6th - * - * @returns number - */ - if (!items) return false; - - const thisRank = item.rank; - if (index >= 1) { - const prevRank = items[index - 1].rank; - if (thisRank === prevRank) { - return false; - } + /** + * Smart rank calculation - this determines if we should show the rank + * value. It's confusing to show people that multiple individuals ranked + * in the same place, so this will only display the next ranked value, eg: + * + * - 1st + * - ___ + * - 3rd + * - ___ + * - ___ + * - 6th + * + * @returns number + */ + if (!items) return false; + + const thisRank = item.rank; + if (index >= 1) { + const prevRank = items[index - 1].rank; + if (thisRank === prevRank) { + return false; } - return true; + } + return true; }; interface FrequencyButtonsProps { - selected: LeaderboardFrequency; - onChange: (frequency: LeaderboardFrequency) => void; + selected: LeaderboardFrequency; + onChange: (frequency: LeaderboardFrequency) => void; } const frequency_map = [ - { label: 'Day', value: LeaderboardFrequency.Daily }, - { label: 'Week', value: LeaderboardFrequency.Weekly }, - { label: 'Month', value: LeaderboardFrequency.Monthly }, + { label: "Day", value: LeaderboardFrequency.Daily }, + { label: "Week", value: LeaderboardFrequency.Weekly }, + { label: "Month", value: LeaderboardFrequency.Monthly }, ]; const ThreeButtonToggle = ({ selected, onChange }: FrequencyButtonsProps) => { - return ( -- {dateRange} -
-| Rank | -Bonus | -User | -
|---|---|---|
| Rank | +Bonus | +User | +
| - {dataItem.rank} - | -- {formatCentsToUSD(dataItem.value)} - | -- {truncate(dataItem.bpuid, 6, "*****").toUpperCase()} - | -
| {dataItem.rank} | ++ {formatCentsToUSD(dataItem.value)} + | ++ {truncate(dataItem.bpuid, 6, "*****").toUpperCase()} + | +
| Rank | -Completes | -User | -
|---|---|---|
| Rank | +Completes | +User | +
| - {dataItem.rank ?? showSmartRank(dataItem, index, completes?.rows)} - | -- {dataItem.value} - | -- {truncate(dataItem.bpuid, 6, "*****").toUpperCase()} - | -
- {users_f} people are actively attempting {surveys_f} available surveys right now. -
-- Get paid to take surveys. Our algorithm attempts to pair you with the - highest paying survey available at the moment (right now, the highest - paying survey is {survey_max_cpi_f}) that you are eligible for, - each attempt is a valid HIT. Try as many as you can, our system will - self regulate you: we want to ensure you have a high chance of being - paired with a survey based on what surveys are available, as their - availability constantly changes.
-- Each HIT is paid when you attempt to take a survey and if you complete - the survey, you will be awarded a bonus equal to that in which the - survey pays out.
-+ {users_f} people are actively attempting {surveys_f} available surveys + right now. +
++ Get paid to take surveys. Our algorithm attempts to pair you with the + highest paying survey available at the moment (right now, the highest + paying survey is {survey_max_cpi_f}) that you are eligible for, each + attempt is a valid HIT. Try as many as you can, our system will self + regulate you: we want to ensure you have a high chance of being paired + with a survey based on what surveys are available, as their + availability constantly changes. +
++ Each HIT is paid when you attempt to take a survey and if you complete + the survey, you will be awarded a bonus equal to that in which the + survey pays out. +
+Congratulations! You completed the Survey.
-{ts?.user_payout_string}
-You may close this tab and return to submit the HIT
- - ) -} + const ts = useAppSelector((state) => state.app.taskStatus); + + return ( + <> ++ Congratulations! You completed the Survey. +
++ {ts?.user_payout_string} +
++ You may close this tab and return to submit the HIT +
+ + ); +}; export const Enter = () => { - return ( - <> -You're currently in the Survey
-You may close this tab and return to submit the HIT
- - ) -} + return ( + <> ++ You're currently in the Survey +
++ You may close this tab and return to submit the HIT +
+ + ); +}; export const InComplete = () => { - const ts = useAppSelector(state => state.app.taskStatus) - if (!ts) { return null; } - - return ( - <> -Survey terminated the attempt.
-You may close this tab and return to submit the HIT
- - - ) -} + const ts = useAppSelector((state) => state.app.taskStatus); + if (!ts) { + return null; + } + + return ( + <> ++ Survey terminated the attempt. +
++ You may close this tab and return to submit the HIT +
+ + ); +}; export const Unknown = () => { - - return ( - <> -You're not currently eligible for any Surveys
-You may close this tab and return to submit the HIT
- - ) -} + return ( + <> ++ You're not currently eligible for any Surveys +
++ You may close this tab and return to submit the HIT +
+ + ); +}; export const Loading = () => { - - return ( -Loading...
- ) -} - + returnLoading...
; +}; 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() + 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(); } - - useEffect(() => { - if (ts?.status === 3) { - confettiCannons() - } - }, [ts]) - - - switch (ts?.status) { - case 0: // UNKNOWN - return+ James Billings is finished 😭 Just Kidding!!! +
+ + +Please finish a Task to report its status.
- } - - if (showComplete) { - returnLoading
- ) - } + const [showComplete, setShowComplete] = useState(false); + const [showReport, setShowReport] = useState(false); - // This is if they are actively in a survey or we can't determine the - // status yet. We want to show the timer and keep them on this page to - // monitor for completion. This gets shown no matter what regardless of - // balance. - // - // 0 - UNKNOWN, 1 - ENTER - if (ts.status === 0 || ts.status === 1) { - return ( - <> -- We're actively monitoring your Task status. -
-Loading
; + } + + // This is if they are actively in a survey or we can't determine the + // status yet. We want to show the timer and keep them on this page to + // monitor for completion. This gets shown no matter what regardless of + // balance. + // + // 0 - UNKNOWN, 1 - ENTER + if (ts.status === 0 || ts.status === 1) { return ( - <> -+ In Progress + +
+ We're actively monitoring your Task status. +
+- You may now submit the HIT. -
- )} -- Unfortunately, it looks like you did not pass the quality check for this survey. -
- -+
+ Unfortunately, it looks like you did not pass the quality check + for this survey. +
+ +- Please return the HIT to avoid having your assignment rejected. -
-- Your balance is low. You cannot submit the HIT at this time. -
- -- Please return the HIT to avoid having your assignment rejected. -
-+ Your balance is low. You cannot submit the HIT at this time. +
++ Please return the HIT to avoid having your assignment rejected. +
+- I have {time_f} minutes -
-- The average time spent is {avg_time_f} minutes and pays {avg_pay_f}
-+ I have{" "} + + {time_f} + {" "} + minutes +
++ The average time spent is {avg_time_f} minutes and pays {avg_pay_f} +
+- Survey Loading… -
-Survey Loading…
+ + ); +}; const NoSurveys = () => { - const offerwall_reasons = useAppSelector(state => state.app.offerwall_reasons) - - const REASON_DISPLAY: Record- No Surveys available… -
-+ No Surveys available… +
+- {r.description} -
-+ {r.description} +
+| - {flexRender( - header.column.columnDef.header, - header.getContext(), - )} - | - ) - })} -
|---|
| - {flexRender(cell.column.columnDef.cell, cell.getContext())} - | - ) - })} -
| + {flexRender( + header.column.columnDef.header, + header.getContext(), + )} + | + ); + })} +
|---|
| + {flexRender( + cell.column.columnDef.cell, + cell.getContext(), + )} + | + ); + })} +
- You may continue to attempt surveys, but you will be - advised to return the HIT if your survey attempt does - not result in a complete. -
-- HIT submissions with a balance exceeding -$1.00 will - return in rejected assignments. -
-+ You may continue to attempt surveys, but you will be advised to + return the HIT if your survey attempt does not result in a complete. +
++ HIT submissions with a balance exceeding -$1.00 will return in + rejected assignments. +
+- - Start Task - -
-
-
+ + Start Task + +
+ +
+
- No Assignment ID found. Please access this page through - the Amazon Mechanical Turk platform. -
- ) - } + const entered = useAppSelector((state) => state.app.currentBucketEntered); + const assignment_id = useAppSelector((state) => state.app.assignment_id); + if (!assignment_id) { return ( - <> - {entered ? ( -+ No Assignment ID found. Please access this page through the Amazon + Mechanical Turk platform. +
+ ); + } + + return <>{entered ?