Plus page radios

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<User, "plusTier">) {
 
   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;
 }
 

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<PlusLoaderData>();
+  const [tierVisible, setTierVisible] = React.useState(
+    data.suggestions?.[0].tier ?? 0
+  );
 
   if (!data.suggestions) {
     return <SuggestedForInfo />;
   }
 
+  const visibleSuggestions = data.suggestions.find(
+    ({ tier }) => tier === tierVisible
+  );
+  invariant(visibleSuggestions);
+
   return (
     <div>
       <SuggestedForInfo />
+      <div className="plus__radios">
+        {data.suggestions.map(({ tier, users }) => {
+          const id = String(tier);
+          return (
+            <div key={id} className="plus__radio-container">
+              <label htmlFor={id} className="plus__radio-label">
+                +{tier}{" "}
+                <span className="plus__users-count">({users.length})</span>
+              </label>
+              <input
+                id={id}
+                name="tier"
+                type="radio"
+                checked={tierVisible === tier}
+                onChange={() => setTierVisible(tier)}
+              />
+            </div>
+          );
+        })}
+      </div>
     </div>
   );
 }

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);
+}