Move from TRPC to server actions

src/app/[locale]/(main)/add-tournament/TournamentForm.tsx

@@ -17,8 +17,8 @@ import { SwitchField } from "@/components/form/SwitchField";
 import { TextAreaField } from "@/components/form/TextAreaField";
 import { TextField } from "@/components/form/TextField";
 import { addTournamentSchema } from "@/schemas";
+import { addTournament } from "@/server/addTournament";
 import { TimeControl } from "@/types";
-import { trpc } from "@/utils/trpc";
 
 type TournamentFormValues = z.infer<typeof addTournamentSchema>;
 
@@ -30,7 +30,7 @@ const Map = dynamic(() => import("./Map"), {
 const TournamentForm = () => {
   const t = useTranslations("AddTournament");
   const at = useTranslations("App");
-  const addTournament = trpc.addTournament.useMutation();
+
   const [responseMessage, setResponseMessage] = useState({
     isSuccessful: false,
     message: "",
@@ -48,7 +48,7 @@ const TournamentForm = () => {
 
   const onSubmit = async (data: TournamentFormValues) => {
     try {
-      await addTournament.mutateAsync(data);
+      await addTournament(data);
       setResponseMessage({
         isSuccessful: true,
         message: t("success"),

src/app/[locale]/(main)/contact-us/ContactForm.tsx

@@ -12,14 +12,13 @@ import { clearMessage } from "@/components/InfoMessage";
 import { TextAreaField } from "@/components/form/TextAreaField";
 import { TextField } from "@/components/form/TextField";
 import { contactUsSchema } from "@/schemas";
-import { trpc } from "@/utils/trpc";
+import { contactUs } from "@/server/contactUs";
 
 type TournamentFormValues = z.infer<typeof contactUsSchema>;
 
 const ContactForm = () => {
   const t = useTranslations("Contact");
 
-  const contactUs = trpc.contactUs.useMutation();
   const [responseMessage, setResponseMessage] = useState({
     isSuccessful: false,
     message: "",
@@ -31,7 +30,7 @@ const ContactForm = () => {
 
   const onSubmit = async (data: TournamentFormValues) => {
     try {
-      await contactUs.mutateAsync(data);
+      await contactUs(data);
       setResponseMessage({
         isSuccessful: true,
         message: t("success"),

src/app/[locale]/(main)/elo/TournamentResults.tsx

@@ -4,8 +4,8 @@ import { last } from "lodash";
 import { useTranslations } from "next-intl";
 import { twMerge } from "tailwind-merge";
 
+import { TournamentResultsData } from "@/server/fetchTournamentResults";
 import { getNewRating } from "@/utils/eloCalculator";
-import { TournamentResultsData } from "@/utils/trpc";
 
 type TournamentResultsProps = {
   results: TournamentResultsData;

src/app/[locale]/(main)/elo/page.tsx

@@ -3,6 +3,7 @@
 import { useCallback, useEffect, useMemo } from "react";
 
 import { zodResolver } from "@hookform/resolvers/zod";
+import { useQuery } from "@tanstack/react-query";
 import { isEmpty, sortBy } from "lodash";
 import { useTranslations } from "next-intl";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
@@ -13,8 +14,8 @@ import { Spinner } from "@/components/Spinner";
 import { SelectField } from "@/components/form/SelectField";
 import { TournamentSelectField } from "@/components/form/TournamentSelectField";
 import { fetchTournamentResultsSchema } from "@/schemas";
+import { fetchTournamentResults } from "@/server/fetchTournamentResults";
 import { Link } from "@/utils/navigation";
-import { trpc } from "@/utils/trpc";
 
 import { KFactor } from "./KFactor";
 import { ManualEloForm } from "./ManualEloForm";
@@ -55,21 +56,18 @@ export default function Elo() {
     data: allResults,
     isFetching,
     error,
-  } = trpc.fetchTournamentResults.useQuery(
-    {
-      id: tournamentId?.trim(),
-    },
-    {
-      refetchOnWindowFocus: false,
-      staleTime: Infinity,
-      cacheTime: 10 * 60 * 1000,
-      enabled: hasTournamentId,
-      retry: false,
-    },
-  );
+  } = useQuery({
+    queryKey: ["fetchTournamentResults", { id: tournamentId?.trim() }],
+    queryFn: async () => fetchTournamentResults({ id: tournamentId?.trim() }),
+    refetchOnWindowFocus: false,
+    staleTime: Infinity,
+    gcTime: 10 * 60 * 1000,
+    enabled: hasTournamentId,
+    retry: false,
+  });
 
   const playerOptions = sortBy(
-    (allResults ?? []).map((player) => ({
+    (allResults?.data ?? []).map((player) => ({
       value: player.id,
       label: player.name,
     })),
@@ -173,7 +171,7 @@ export default function Elo() {
     console.error(error);
   }
 
-  const playerResults = allResults?.find((p) => p.id === player);
+  const playerResults = allResults?.data?.find((p) => p.id === player);
 
   return (
     <section className="grid place-items-center bg-white pb-20 dark:bg-gray-800">
@@ -215,7 +213,7 @@ export default function Elo() {
               </div>
             )}
 
-            {error && (
+            {error instanceof Error && (
               <div className="mt-8 text-center text-error">
                 {error.message.startsWith("ERR_")
                   ? t(error.message as TranslationKey)
@@ -269,7 +267,7 @@ export default function Elo() {
             <TournamentResults
               playerId={player}
               kFactor={parseInt(kFactor)}
-              results={allResults ?? []}
+              results={allResults?.data ?? []}
             />
           )}
 

src/app/api/trpc/[trpc]/route.ts

@@ -1,21 +0,0 @@
-import {
-  FetchCreateContextFnOptions,
-  fetchRequestHandler,
-} from "@trpc/server/adapters/fetch";
-
-import { appRouter } from "@/server/appRouter";
-
-const handler = (request: Request) => {
-  return fetchRequestHandler({
-    endpoint: "/api/trpc",
-    req: request,
-    router: appRouter,
-    createContext: function (
-      opts: FetchCreateContextFnOptions,
-    ): object | Promise<object> {
-      return {};
-    },
-  });
-};
-
-export { handler as GET, handler as POST };