Show text with suggested for info

app/db/models/plusSuggestions.server.ts

@@ -109,3 +109,24 @@ export function find(args: MonthYear & Pick<User, "plusTier">) {
     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"][];
+}

app/root.tsx

@@ -40,7 +40,7 @@ export const meta: MetaFunction = () => ({
 });
 
 export interface RootLoaderData {
-  user?: Pick<User, "id" | "discordId" | "discordAvatar">;
+  user?: Pick<User, "id" | "discordId" | "discordAvatar" | "plusTier">;
 }
 
 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,
   });

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<PlusLoaderData>();
 
-  console.log({ data });
+  if (!data.suggestions) {
+    return <SuggestedForInfo />;
+  }
 
-  return <div>heyo</div>;
+  return (
+    <div>
+      <SuggestedForInfo />
+    </div>
+  );
+}
+
+function SuggestedForInfo() {
+  const data = useLoaderData<PlusLoaderData>();
+  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 (
+      <div className="plus__suggested-info-text">
+        You are not suggested yet this month.
+      </div>
+    );
+  }
+
+  return (
+    <div className="plus__suggested-info-text">
+      You are suggested for{" "}
+      {data.suggestedForTiers.map((tier) => `+${tier}`).join(" and ")} this
+      month.
+    </div>
+  );
 }

app/styles/plus.css

@@ -0,0 +1,4 @@
+.plus__suggested-info-text {
+  font-size: var(--fonts-lg);
+  color: var(--text-lighter);
+}