diff --git a/app/db/models/plusSuggestions.server.ts b/app/db/models/plusSuggestions.server.ts index 5a22b0f03..e1ba3264e 100644 --- a/app/db/models/plusSuggestions.server.ts +++ b/app/db/models/plusSuggestions.server.ts @@ -37,7 +37,7 @@ WITH gs as ( SELECT "tier", json_object( - 'suggested', + 'info', json_object( 'discordId', suggested."discordId", @@ -66,7 +66,7 @@ WITH gs as ( "text" ) ) - ) as suggestions + ) as users FROM "PlusSuggestion" JOIN "User" AS author ON "PlusSuggestion"."authorId" = author."id" @@ -81,7 +81,7 @@ WITH gs as ( ) SELECT tier, - json_group_array(suggestions) as suggestions + json_group_array(users) as users from gs GROUP BY @@ -90,8 +90,8 @@ GROUP BY export type FindResult = { tier: number; - suggestions: { - suggested: Pick< + users: { + info: Pick< User, "discordId" | "discordName" | "discordDiscriminator" | "discordAvatar" >; @@ -106,7 +106,7 @@ export function find(args: MonthYear & Pick) { return findStm.all(args).map((row) => ({ ...row, - suggestions: JSON.parse(row.suggestions).map(JSON.parse), + users: JSON.parse(row.users).map(JSON.parse), })) as FindResult; } diff --git a/app/routes/plus/index.tsx b/app/routes/plus/index.tsx index f112ac431..0934bd44c 100644 --- a/app/routes/plus/index.tsx +++ b/app/routes/plus/index.tsx @@ -8,6 +8,8 @@ import { useUser } from "~/hooks/useUser"; import { requireUser } from "~/utils/remix"; import styles from "~/styles/plus.css"; import { Catcher } from "~/components/Catcher"; +import * as React from "react"; +import invariant from "tiny-invariant"; export const links: LinksFunction = () => { return [{ rel: "stylesheet", href: styles }]; @@ -35,14 +37,42 @@ export const loader: LoaderFunction = async ({ request }) => { export default function PlusPage() { const data = useLoaderData(); + const [tierVisible, setTierVisible] = React.useState( + data.suggestions?.[0].tier ?? 0 + ); if (!data.suggestions) { return ; } + const visibleSuggestions = data.suggestions.find( + ({ tier }) => tier === tierVisible + ); + invariant(visibleSuggestions); + return (
+
+ {data.suggestions.map(({ tier, users }) => { + const id = String(tier); + return ( +
+ + setTierVisible(tier)} + /> +
+ ); + })} +
); } diff --git a/app/styles/plus.css b/app/styles/plus.css index 7cd209699..ca7527fdc 100644 --- a/app/styles/plus.css +++ b/app/styles/plus.css @@ -2,3 +2,27 @@ color: var(--text-lighter); font-size: var(--fonts-lg); } + +.plus__radios { + display: flex; + align-items: center; + justify-content: center; + gap: var(--s-5); +} + +.plus__radio-container { + display: flex; + flex-direction: column; + align-items: center; + gap: var(--s-1); +} + +.plus__radio-label { + font-size: var(--fonts-sm); + margin-block-end: 0; +} + +.plus__users-count { + color: var(--text-lighter); + font-size: var(--fonts-xxs); +}