From 2a60b373d80bb71b8bacd6db37343f5d514bbd8d Mon Sep 17 00:00:00 2001 From: Kalle <38327916+Sendouc@users.noreply.github.com> Date: Sun, 5 Jun 2022 20:07:47 +0300 Subject: [PATCH] Voting history UI done --- app/db/models/plusVotes.server.ts | 2 +- app/db/seed.ts | 59 ++++++++++++++++++++++++------ app/routes/plus/voting/history.tsx | 45 ++++++++++++++++++++++- app/styles/plus-history.css | 56 ++++++++++++++++++++++++++++ 4 files changed, 149 insertions(+), 13 deletions(-) diff --git a/app/db/models/plusVotes.server.ts b/app/db/models/plusVotes.server.ts index d00cb440b..27e1ab342 100644 --- a/app/db/models/plusVotes.server.ts +++ b/app/db/models/plusVotes.server.ts @@ -56,7 +56,7 @@ const resultsByMonthYearStm = sql.prepare(` FROM "PlusVotingResult" JOIN "User" ON "PlusVotingResult"."votedId" = "User".id WHERE month = $month AND year = $year - ORDER BY RANDOM() + ORDER BY "User"."discordName" COLLATE NOCASE ASC `); type PlusVotingResultUser = Pick< diff --git a/app/db/seed.ts b/app/db/seed.ts index 64674bfc6..41899deab 100644 --- a/app/db/seed.ts +++ b/app/db/seed.ts @@ -15,7 +15,8 @@ const basicSeeds = [ adminUser, nzapUser, users, - initialPlusMembers, + lastMonthsVoting, + lastMonthSuggestions, thisMonthsSuggestions, ]; @@ -74,29 +75,47 @@ function fakeUser() { }; } -function initialPlusMembers() { +const idToPlusTier = (id: number) => { + if (id < 30) return 1; + if (id < 80) return 2; + if (id <= 150) return 3; + + // these ids failed the voting + if (id >= 200 && id <= 209) return 1; + if (id >= 210 && id <= 219) return 2; + if (id >= 220 && id <= 229) return 3; + + throw new Error("Invalid id - no plus tier"); +}; + +function lastMonthsVoting() { const votes: CreateManyPlusVotesArgs = []; const { month, year } = lastCompletedVoting(new Date()); - const tier = (id: number) => { - if (id < 30) return 1; - if (id < 80) return 2; - - return 3; - }; + const fiveMinutesAgo = new Date(new Date().getTime() - 5 * 60 * 1000); for (let id = 1; id < 151; id++) { if (id === 2) continue; // omit N-ZAP user for testing; - const fiveMinutesAgo = new Date(new Date().getTime() - 5 * 60 * 1000); - votes.push({ authorId: 1, month, year, score: 1, - tier: tier(id), + tier: idToPlusTier(id), + validAfter: fiveMinutesAgo, + votedId: id, + }); + } + + for (let id = 200; id < 225; id++) { + votes.push({ + authorId: 1, + month, + year, + score: -1, + tier: idToPlusTier(id), validAfter: fiveMinutesAgo, votedId: id, }); @@ -105,6 +124,24 @@ function initialPlusMembers() { db.plusVotes.createMany(votes); } +function lastMonthSuggestions() { + const usersSuggested = [ + 3, 10, 14, 90, 120, 140, 200, 201, 203, 204, 205, 216, 217, 218, 219, 220, + ]; + const { month, year } = lastCompletedVoting(new Date()); + + for (const id of usersSuggested) { + db.plusSuggestions.create({ + authorId: 1, + month, + year, + suggestedId: id, + text: faker.lorem.lines(), + tier: idToPlusTier(id), + }); + } +} + function thisMonthsSuggestions() { const usersInPlus = db.users .findAll() diff --git a/app/routes/plus/voting/history.tsx b/app/routes/plus/voting/history.tsx index 81ed69b67..5e460b1d4 100644 --- a/app/routes/plus/voting/history.tsx +++ b/app/routes/plus/voting/history.tsx @@ -13,6 +13,10 @@ import { roundToTwoDecimalPlaces } from "~/utils/number"; import { getUser, makeTitle } from "~/utils/remix"; import type { Unpacked } from "~/utils/types"; import styles from "~/styles/plus-history.css"; +import { discordFullName } from "~/utils/strings"; +import { Link } from "react-router-dom"; +import { userPage } from "~/utils/urls"; +import clsx from "clsx"; export const links: LinksFunction = () => { return [{ rel: "stylesheet", href: styles }]; @@ -69,7 +73,7 @@ export default function PlusVotingHistoryPage() { ) : ( didn't pass )}{" "} - the +1 voting + the +{result.tier} voting {result.score ? `, your score was ${result.score} (at least 0.5 required to pass)` : ""} @@ -77,6 +81,45 @@ export default function PlusVotingHistoryPage() { ))} ) : null} + + + ); +} + +function Results() { + const data = useLoaderData(); + + return ( +
+ {data.results.map((tiersResults) => ( +
+

+ +{tiersResults.tier} +

+ {(["passed", "failed"] as const).map((status) => ( +
+

+ {status === "passed" ? "Passed" : "Didn't pass"} ( + {tiersResults[status].length}) +

+ {tiersResults[status].map((user) => ( + + {user.wasSuggested ? ( + S + ) : null} + {discordFullName(user)} + + ))} +
+ ))} +
+ ))}
); } diff --git a/app/styles/plus-history.css b/app/styles/plus-history.css index eec5d080e..b44ac8ec0 100644 --- a/app/styles/plus-history.css +++ b/app/styles/plus-history.css @@ -13,3 +13,59 @@ .plus-history__fail { color: var(--theme-error); } + +.plus-history__tier-header { + display: flex; + flex-direction: row; + color: var(--theme); +} + +.plus-history__tier-header::before, +.plus-history__tier-header::after { + flex: 1 1; + border-bottom: 3px solid var(--theme-transparent); + margin: auto; + content: ""; +} + +.plus-history__tier-header::before { + margin-right: 10px; +} + +.plus-history__tier-header::after { + margin-left: 10px; +} + +.plus-history__passed-info-container { + display: flex; + flex-wrap: wrap; + gap: var(--s-2); +} + +.plus-history__passed-header { + color: var(--text-lighter); + font-size: var(--fonts-xs); +} + +.plus-history__user-status { + background-color: var(--theme); + border-radius: var(--rounded); + color: var(--button-text); + font-size: var(--fonts-xs); + font-weight: var(--semi-bold); + padding-inline: var(--s-1-5); +} + +.plus-history__user-status.failed { + background-color: var(--theme-error-transparent); + color: var(--text); +} + +.plus-history__suggestion-s { + background-color: var(--bg-lighter); + border-radius: 50%; + color: var(--text); + font-weight: var(--bold); + margin-inline-end: var(--s-1); + padding-inline: var(--s-1); +}