Fix unnecessary fetch when opening modal

app/components/Popover.tsx

@@ -3,6 +3,7 @@ import * as React from "react";
 import { usePopper } from "react-popper";
 
 // xxx: gets weird border on click
+// TODO: after clicking item in the pop over panel should close it
 export function Popover({
   children,
   trigger,

app/routes/plus/suggestions.tsx

@@ -146,11 +146,6 @@ function SuggestedUser({
   const data = useLoaderData<PlusSuggestionsLoaderData>();
   const user = useUser();
 
-  const commentPageUrl = `comment?${new URLSearchParams({
-    id: String(suggested.info.id),
-    tier: String(tier),
-  }).toString()}`;
-
   invariant(data.suggestions);
 
   return (
@@ -167,11 +162,12 @@ function SuggestedUser({
           suggestions: data.suggestions,
           suggested: { id: suggested.info.id, plusTier: tier },
         }) ? (
+          // TODO: resetScroll={false} https://twitter.com/ryanflorence/status/1527775882797907969
           <LinkButton
             className="plus__comment-button"
             tiny
             variant="outlined"
-            to={commentPageUrl}
+            to={`comment/${tier}/${suggested.info.id}`}
           >
             Comment
           </LinkButton>
@@ -183,8 +179,7 @@ function SuggestedUser({
         </summary>
         <div className="stack sm mt-2">
           {suggested.suggestions.map((s) => (
-            // xxx: white-space: pre-wrap?
-            <fieldset key={s.author.id}>
+            <fieldset className="plus__comment" key={s.author.id}>
               <legend>{discordFullName(s.author)}</legend>
               {s.text}
               <span className="plus__comment-time">

app/routes/plus/suggestions/comment.$tier.$userId.tsx

@@ -1,9 +1,4 @@
-import {
-  Form,
-  useMatches,
-  useNavigate,
-  useSearchParams,
-} from "@remix-run/react";
+import { Form, useMatches, useNavigate, useParams } from "@remix-run/react";
 import { Button } from "~/components/Button";
 import { Dialog } from "~/components/Dialog";
 import { Label } from "~/components/Label";
@@ -13,6 +8,7 @@ import type { PlusSuggestionsLoaderData } from "../suggestions";
 import * as React from "react";
 import { PlUS_SUGGESTION_COMMENT_MAX_LENGTH } from "~/constants";
 import type { ActionFunction } from "@remix-run/node";
+import { redirect } from "@remix-run/node";
 import { z } from "zod";
 import { parseRequestFormData, requireUser, validate } from "~/utils/remix";
 import {
@@ -58,20 +54,18 @@ export const action: ActionFunction = async ({ request }) => {
     ...upcomingVoting(new Date()),
   });
 
-  return null;
+  return redirect(PLUS_SUGGESTIONS_PAGE);
 };
 
-// xxx: making unnecessary call to loader + when going back to modal and back keeps making http calls?
-// xxx: modal closes when submitting without redirect?
 export default function PlusCommentModalPage() {
   const user = useUser();
   const matches = useMatches();
   const navigate = useNavigate();
-  const [searchParams] = useSearchParams();
+  const params = useParams();
   const data = matches.at(-2)!.data as PlusSuggestionsLoaderData;
 
-  const targetUserId = Number(searchParams.get("id"));
-  const tierSuggestedTo = Number(searchParams.get("tier"));
+  const targetUserId = Number(params.userId);
+  const tierSuggestedTo = Number(params.tier);
 
   const userBeingCommented = data.suggestions
     ?.find(({ tier }) => tier === tierSuggestedTo)

app/styles/plus.css

@@ -49,6 +49,10 @@
   font-weight: var(--semi-bold);
 }
 
+.plus__comment {
+  white-space: pre-wrap;
+}
+
 .plus__comment-time {
   color: var(--text-lighter);
   font-size: var(--fonts-xxs);

migrations/000-initial.sql

@@ -22,7 +22,8 @@ CREATE TABLE "PlusSuggestion" (
   "tier" integer NOT NULL,
   "createdAt" integer DEFAULT (strftime('%s', 'now')) NOT NULL,
   FOREIGN KEY ("authorId") REFERENCES "User"("id") ON DELETE CASCADE,
-  FOREIGN KEY ("suggestedId") REFERENCES "User"("id") ON DELETE CASCADE
+  FOREIGN KEY ("suggestedId") REFERENCES "User"("id") ON DELETE CASCADE,
+  UNIQUE("month", "year", "suggestedId", "authorId", "tier") ON CONFLICT ROLLBACK
 ) STRICT;
 
 CREATE INDEX plus_suggestion_author_id ON "PlusSuggestion"("authorId");