diff --git a/app/db/models/plusSuggestions.server.ts b/app/db/models/plusSuggestions.server.ts index 6df707c44..5a22b0f03 100644 --- a/app/db/models/plusSuggestions.server.ts +++ b/app/db/models/plusSuggestions.server.ts @@ -109,3 +109,24 @@ export function find(args: MonthYear & Pick) { suggestions: JSON.parse(row.suggestions).map(JSON.parse), })) as FindResult; } + +const tiersSuggestedForStm = sql.prepare(` + SELECT + json_group_array(tier) + FROM + ( + SELECT + DISTINCT tier + FROM + "PlusSuggestion" + WHERE + "month" = $month + AND "year" = $year + AND "suggestedId" = $userId + ORDER BY tier ASC + ) +`); + +export function tiersSuggestedFor(args: MonthYear & { userId: User["id"] }) { + return JSON.parse(tiersSuggestedForStm.pluck().get(args)) as User["id"][]; +} diff --git a/app/root.tsx b/app/root.tsx index 1957dc07f..cd6bfcb0d 100644 --- a/app/root.tsx +++ b/app/root.tsx @@ -40,7 +40,7 @@ export const meta: MetaFunction = () => ({ }); export interface RootLoaderData { - user?: Pick; + user?: Pick; } export const loader: LoaderFunction = async ({ request }) => { @@ -52,6 +52,7 @@ export const loader: LoaderFunction = async ({ request }) => { discordAvatar: user.discordAvatar, discordId: user.discordId, id: user.id, + plusTier: user.plusTier, } : undefined, }); diff --git a/app/routes/plus/index.tsx b/app/routes/plus/index.tsx index a5e53d591..9690a23b9 100644 --- a/app/routes/plus/index.tsx +++ b/app/routes/plus/index.tsx @@ -1,13 +1,20 @@ -import type { LoaderFunction } from "@remix-run/node"; +import type { LinksFunction, LoaderFunction } from "@remix-run/node"; import { json } from "@remix-run/node"; import { useLoaderData } from "@remix-run/react"; import { upcomingVoting } from "~/core/plus"; import { db } from "~/db"; import type * as plusSuggestions from "~/db/models/plusSuggestions.server"; +import { useUser } from "~/hooks/useUser"; import { requireUser } from "~/utils/remix"; +import styles from "~/styles/plus.css"; + +export const links: LinksFunction = () => { + return [{ rel: "stylesheet", href: styles }]; +}; interface PlusLoaderData { suggestions?: plusSuggestions.FindResult; + suggestedForTiers: number[]; } export const loader: LoaderFunction = async ({ request }) => { @@ -18,13 +25,49 @@ export const loader: LoaderFunction = async ({ request }) => { ...upcomingVoting(new Date()), plusTier: user.plusTier, }), + suggestedForTiers: db.plusSuggestions.tiersSuggestedFor({ + ...upcomingVoting(new Date()), + userId: user.id, + }), }); }; export default function PlusPage() { - const data = useLoaderData(); + const data = useLoaderData(); - console.log({ data }); + if (!data.suggestions) { + return ; + } - return
heyo
; + return ( +
+ +
+ ); +} + +function SuggestedForInfo() { + const data = useLoaderData(); + const user = useUser(); + + // no need to show anything if they can't be suggested anyway... + if (user?.plusTier === 1) { + return null; + } + + if (data.suggestedForTiers.length === 0) { + return ( +
+ You are not suggested yet this month. +
+ ); + } + + return ( +
+ You are suggested for{" "} + {data.suggestedForTiers.map((tier) => `+${tier}`).join(" and ")} this + month. +
+ ); } diff --git a/app/styles/plus.css b/app/styles/plus.css new file mode 100644 index 000000000..a68b4060c --- /dev/null +++ b/app/styles/plus.css @@ -0,0 +1,4 @@ +.plus__suggested-info-text { + font-size: var(--fonts-lg); + color: var(--text-lighter); +}