Fix saving team on tournament page not working

app/components/StreamListItems.tsx

@@ -8,7 +8,7 @@ import { useDateTimeFormat } from "~/hooks/intl/useDateTimeFormat";
 import { useFormatDistanceToNow } from "~/hooks/intl/useFormatDistanceToNow";
 import { useHydrated } from "~/hooks/useHydrated";
 import { databaseTimestampToDate } from "~/utils/dates";
-import { navIconUrl, tournamentRegisterPage } from "~/utils/urls";
+import { navIconUrl, tournamentInfoPage } from "~/utils/urls";
 import { Image } from "./Image";
 import { ListLink } from "./SideNav";
 import styles from "./StreamListItems.module.css";
@@ -157,7 +157,7 @@ function SaveTournamentStreamButton({
 	return (
 		<fetcher.Form
 			method="post"
-			action={tournamentRegisterPage(tournamentId)}
+			action={tournamentInfoPage(tournamentId)}
 			onClick={(e) => e.stopPropagation()}
 		>
 			<input

app/features/tournament/actions/to.$id.info.server.ts

@@ -0,0 +1,50 @@
+import type { ActionFunction } from "react-router";
+import { requireUser } from "~/features/auth/core/user.server";
+import * as SavedCalendarEventRepository from "~/features/tournament/SavedCalendarEventRepository.server";
+import {
+	errorToastIfFalsy,
+	parseParams,
+	parseRequestPayload,
+} from "~/utils/remix.server";
+import { assertUnreachable } from "~/utils/types";
+import { idObject } from "~/utils/zod";
+import { TOURNAMENT } from "../tournament-constants";
+import { saveTournamentSchema } from "../tournament-schemas.server";
+
+export const action: ActionFunction = async ({ request, params }) => {
+	const user = requireUser();
+	const { id: tournamentId } = parseParams({
+		params,
+		schema: idObject,
+	});
+
+	const data = await parseRequestPayload({
+		request,
+		schema: saveTournamentSchema,
+	});
+
+	switch (data._action) {
+		case "SAVE_TOURNAMENT": {
+			const count = await SavedCalendarEventRepository.countByUserId(user.id);
+			errorToastIfFalsy(
+				count < TOURNAMENT.MAX_SAVED_COUNT,
+				"Maximum saved tournaments reached",
+			);
+
+			await SavedCalendarEventRepository.saveOwn(tournamentId);
+			break;
+		}
+		case "UNSAVE_TOURNAMENT": {
+			await SavedCalendarEventRepository.unsave({
+				userId: user.id,
+				tournamentId,
+			});
+			break;
+		}
+		default: {
+			assertUnreachable(data);
+		}
+	}
+
+	return null;
+};

app/features/tournament/actions/to.$id.register.server.ts

@@ -18,7 +18,6 @@ import { logger } from "~/utils/logger";
 import { errorToastIfFalsy, parseParams } from "~/utils/remix.server";
 import { assertUnreachable } from "~/utils/types";
 import { idObject } from "~/utils/zod";
-import { TOURNAMENT } from "../tournament-constants";
 import { registerSchema } from "../tournament-schemas.server";
 import {
 	isOneModeTournamentOf,
@@ -344,23 +343,6 @@ export const action: ActionFunction = async ({ request, params }) => {
 
 			break;
 		}
-		case "SAVE_TOURNAMENT": {
-			const count = await SavedCalendarEventRepository.countByUserId(user.id);
-			errorToastIfFalsy(
-				count < TOURNAMENT.MAX_SAVED_COUNT,
-				"Maximum saved tournaments reached",
-			);
-
-			await SavedCalendarEventRepository.saveOwn(tournamentId);
-			break;
-		}
-		case "UNSAVE_TOURNAMENT": {
-			await SavedCalendarEventRepository.unsave({
-				userId: user.id,
-				tournamentId,
-			});
-			break;
-		}
 		default: {
 			assertUnreachable(data);
 		}

app/features/tournament/components/TournamentHeader.tsx

@@ -121,7 +121,7 @@ function SaveTournamentButton({
 				: isSaved;
 
 	return (
-		<fetcher.Form method="post" action={"./register"}>
+		<fetcher.Form method="post">
 			<input
 				type="hidden"
 				name="_action"

app/features/tournament/routes/to.$id.info.tsx

@@ -12,6 +12,7 @@ import { metaTags } from "~/utils/remix";
 import type { SendouRouteHandle } from "~/utils/remix.server";
 import { removeMarkdown } from "~/utils/strings";
 import { tournamentPage } from "~/utils/urls";
+import { action } from "../actions/to.$id.info.server";
 import { FactCardGrid, type FactCardItem } from "../components/FactCard";
 import { RegistrationActions } from "../components/RegistrationActions";
 import {
@@ -23,7 +24,7 @@ import { bracketProgressionLabel } from "../tournament-utils";
 import { useTournament } from "./to.$id";
 import styles from "./to.$id.info.module.css";
 
-export { loader };
+export { action, loader };
 
 export const meta: MetaFunction<typeof loader> = (args) => {
 	const tournamentData = JSON.parse(args.matches[1].data as any)?.tournament as

app/features/tournament/tournament-schemas.server.ts

@@ -36,15 +36,18 @@ export function registerSchema({
 		z.object({
 			_action: _action("UNREGISTER"),
 		}),
-		z.object({
-			_action: _action("SAVE_TOURNAMENT"),
-		}),
-		z.object({
-			_action: _action("UNSAVE_TOURNAMENT"),
-		}),
 	]);
 }
 
+export const saveTournamentSchema = z.union([
+	z.object({
+		_action: _action("SAVE_TOURNAMENT"),
+	}),
+	z.object({
+		_action: _action("UNSAVE_TOURNAMENT"),
+	}),
+]);
+
 export const tournamentSearchSearchParamsSchema = z.object({
 	q: z.string().max(100),
 	limit: z.coerce.number().int().min(1).max(25).catch(25),