diff --git a/.eslintrc.js b/.eslintrc.js index 7ec40bb3e..8128016ad 100644 --- a/.eslintrc.js +++ b/.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: { diff --git a/app/components/Redirect.tsx b/app/components/Redirect.tsx new file mode 100644 index 000000000..f1a8185ee --- /dev/null +++ b/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; +} diff --git a/app/routes/plus/suggestions.tsx b/app/routes/plus/suggestions.tsx index 97350dab2..642e21df1 100644 --- a/app/routes/plus/suggestions.tsx +++ b/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({ + return json({ 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(); +export default function PlusSuggestionsPage() { + const data = useLoaderData(); const [tierVisible, setTierVisible] = React.useState( data.suggestions?.[0].tier ?? 0 ); @@ -94,7 +94,11 @@ export default function PlusPage() {
{visibleSuggestions.users.map((u) => ( - + ))}
@@ -104,7 +108,7 @@ export default function PlusPage() { } function SuggestedForInfo() { - const data = useLoaderData(); + const data = useLoaderData(); 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>["users"]>; + user: Unpacked< + Unpacked>["users"] + >; + tier: number; }) { + const commentPageUrl = () => + `comment?${new URLSearchParams({ + id: String(user.info.id), + tier: String(tier), + }).toString()}`; + return (
@@ -147,7 +161,7 @@ function SuggestedUser({ className="plus__comment-button" tiny variant="outlined" - to="comment" + to={commentPageUrl()} > Comment diff --git a/app/routes/plus/suggestions/comment.tsx b/app/routes/plus/suggestions/comment.tsx index 3db916721..023668b62 100644 --- a/app/routes/plus/suggestions/comment.tsx +++ b/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 ; + } + return ( - navigate("/plus/suggestions")}> + navigate(PLUS_SUGGESTIONS_PAGE)}> hello world ); diff --git a/app/utils/urls.ts b/app/utils/urls.ts index d5ee8ce65..620a80ae1 100644 --- a/app/utils/urls.ts +++ b/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}`;