Comment modal with functioning link

.eslintrc.js

@@ -26,6 +26,7 @@ module.exports = {
     "@typescript-eslint/no-unsafe-assignment": 0,
     "@typescript-eslint/no-unsafe-call": 0,
     "@typescript-eslint/no-unsafe-argument": 0,
+    "@typescript-eslint/no-non-null-assertion": 0,
   },
   settings: {
     react: {

app/components/Redirect.tsx

@@ -0,0 +1,13 @@
+import { useNavigate } from "@remix-run/react";
+import type { To } from "history";
+import * as React from "react";
+
+export function Redirect({ to }: { to: To }) {
+  const navigate = useNavigate();
+
+  React.useEffect(() => {
+    navigate(to);
+  }, [navigate, to]);
+
+  return null;
+}

app/routes/plus/suggestions.tsx

@@ -31,7 +31,7 @@ export const meta: MetaFunction = () => {
   };
 };
 
-interface PlusLoaderData {
+export interface PlusSuggestionsLoaderData {
   suggestions?: plusSuggestions.FindResult;
   suggestedForTiers: number[];
 }
@@ -39,7 +39,7 @@ interface PlusLoaderData {
 export const loader: LoaderFunction = async ({ request }) => {
   const user = await requireUser(request);
 
-  return json<PlusLoaderData>({
+  return json<PlusSuggestionsLoaderData>({
     suggestions: db.plusSuggestions.find({
       ...upcomingVoting(new Date()),
       plusTier: user.plusTier,
@@ -51,8 +51,8 @@ export const loader: LoaderFunction = async ({ request }) => {
   });
 };
 
-export default function PlusPage() {
-  const data = useLoaderData<PlusLoaderData>();
+export default function PlusSuggestionsPage() {
+  const data = useLoaderData<PlusSuggestionsLoaderData>();
   const [tierVisible, setTierVisible] = React.useState(
     data.suggestions?.[0].tier ?? 0
   );
@@ -94,7 +94,11 @@ export default function PlusPage() {
           </div>
           <div className="stack lg">
             {visibleSuggestions.users.map((u) => (
-              <SuggestedUser key={`${u.info.id}-${tierVisible}`} user={u} />
+              <SuggestedUser
+                key={`${u.info.id}-${tierVisible}`}
+                user={u}
+                tier={tierVisible}
+              />
             ))}
           </div>
         </div>
@@ -104,7 +108,7 @@ export default function PlusPage() {
 }
 
 function SuggestedForInfo() {
-  const data = useLoaderData<PlusLoaderData>();
+  const data = useLoaderData<PlusSuggestionsLoaderData>();
   const user = useUser();
 
   // no need to show anything if they can't be suggested anyway...
@@ -131,9 +135,19 @@ function SuggestedForInfo() {
 
 function SuggestedUser({
   user,
+  tier,
 }: {
-  user: Unpacked<Unpacked<NonNullable<PlusLoaderData["suggestions"]>>["users"]>;
+  user: Unpacked<
+    Unpacked<NonNullable<PlusSuggestionsLoaderData["suggestions"]>>["users"]
+  >;
+  tier: number;
 }) {
+  const commentPageUrl = () =>
+    `comment?${new URLSearchParams({
+      id: String(user.info.id),
+      tier: String(tier),
+    }).toString()}`;
+
   return (
     <div className="stack md">
       <div className="plus__suggested-user-info">
@@ -147,7 +161,7 @@ function SuggestedUser({
           className="plus__comment-button"
           tiny
           variant="outlined"
-          to="comment"
+          to={commentPageUrl()}
         >
           Comment
         </LinkButton>

app/routes/plus/suggestions/comment.tsx

@@ -1,10 +1,28 @@
-import { useNavigate } from "@remix-run/react";
+import { useMatches, useNavigate, useSearchParams } from "@remix-run/react";
 import { Dialog } from "~/components/Dialog";
+import { Redirect } from "~/components/Redirect";
+import { PLUS_SUGGESTIONS_PAGE } from "~/utils/urls";
+import type { PlusSuggestionsLoaderData } from "../suggestions";
 
 export default function PlusCommentModalPage() {
+  const matches = useMatches();
   const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const data = matches.at(-2)!.data as PlusSuggestionsLoaderData;
+
+  const userBeingCommentedId = Number(searchParams.get("id"));
+  const tierSuggestedTo = Number(searchParams.get("tier"));
+
+  const userBeingCommented = data.suggestions
+    ?.find(({ tier }) => tier === tierSuggestedTo)
+    ?.users.find((u) => u.info.id === userBeingCommentedId);
+
+  if (!userBeingCommented) {
+    return <Redirect to={PLUS_SUGGESTIONS_PAGE} />;
+  }
+
   return (
-    <Dialog isOpen close={() => navigate("/plus/suggestions")}>
+    <Dialog isOpen close={() => navigate(PLUS_SUGGESTIONS_PAGE)}>
       hello world
     </Dialog>
   );

app/utils/urls.ts

@@ -4,5 +4,6 @@ export const SENDOU_INK_PATREON_URL = "https://patreon.com/sendou";
 export const SENDOU_INK_GITHUB_URL = "https://github.com/Sendouc/sendou.ink";
 export const LOG_IN_URL = "/auth";
 export const LOG_OUT_URL = "/auth/logout";
+export const PLUS_SUGGESTIONS_PAGE = "/plus/suggestions";
 
 export const userPage = (discordId: string) => `/u/${discordId}`;