Leahnaya/sendou.ink
1
0
Fork 0
mirror of https://github.com/Sendouc/sendou.ink.git synced 2026-05-09 04:02:40 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

Suggestions use search params

Browse Source
This commit is contained in:
Kalle 2022-07-26 20:29:45 +03:00
parent 499a4b4266
commit 5f89b234a3
1 changed files with 23 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
app/routes/plus/suggestions.tsx
View File

@ -4,9 +4,8 @@ import type {
MetaFunction,
} from "@remix-run/node";
import { json } from "@remix-run/node";
import { Link, Outlet, useLoaderData } from "@remix-run/react";
import { Link, Outlet, useLoaderData, useSearchParams } from "@remix-run/react";
import clsx from "clsx";
import * as React from "react";
import invariant from "tiny-invariant";
import { z } from "zod";
import { Avatar } from "~/components/Avatar";
@ -138,13 +137,13 @@ export const loader: LoaderFunction = async ({ request }) => {
export default function PlusSuggestionsPage() {
const data = useLoaderData<PlusSuggestionsLoaderData>();
const [searchParams, setSearchParams] = useSearchParams();
const user = useUser();
// TODO: this stays undefined when adding first suggestion
const [tierVisible, setTierVisible] = React.useState(
tierVisibleInitialState(data.suggestions)
);
const tierVisible = searchParamsToLegalTier(searchParams, data.suggestions);
useSetSelectedTierForFirstSuggestEffect({ tierVisible, setTierVisible });
const handleTierChange = (tier: string) => {
setSearchParams({ tier });
};
if (!user) {
return (
@ -206,7 +205,7 @@ export default function PlusSuggestionsPage() {
name="tier"
type="radio"
checked={tierVisible === tier}
onChange={() => setTierVisible(tier)}
onChange={() => handleTierChange(tier)}
data-cy={`plus${tier}-radio`}
/>
</div>
@ -248,6 +247,22 @@ export default function PlusSuggestionsPage() {
);
}
function searchParamsToLegalTier(
searchParams: URLSearchParams,
suggestions?: plusSuggestions.FindVisibleForUser
) {
const tierFromSearchParams = searchParams.get("tier");
if (
!tierFromSearchParams ||
!suggestions ||
!suggestions.hasOwnProperty(tierFromSearchParams)
) {
return tierVisibleInitialState(suggestions);
}
return tierFromSearchParams;
}
function tierVisibleInitialState(
suggestions?: plusSuggestions.FindVisibleForUser
) {
@ -255,21 +270,6 @@ function tierVisibleInitialState(
return String(Math.min(...Object.keys(suggestions).map(Number)));
}
function useSetSelectedTierForFirstSuggestEffect({
tierVisible,
setTierVisible,
}: {
tierVisible?: string;
setTierVisible: (tier?: string) => void;
}) {
const data = useLoaderData<PlusSuggestionsLoaderData>();
React.useEffect(() => {
if (tierVisible) return;
setTierVisible(tierVisibleInitialState(data.suggestions));
}, [data, tierVisible, setTierVisible]);
}
function SuggestedForInfo({ hideText = false }: { hideText?: boolean }) {
const data = useLoaderData<PlusSuggestionsLoaderData>();
const user = useUser();