Prepare endpoint

app/[locale]/elo/FetchResultsForm.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { useState } from "react";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useTranslations } from "next-intl";
+import { FormProvider, useForm } from "react-hook-form";
+import { z } from "zod";
+
+import { TextField } from "@/components/form/TextField";
+import { fetchTournamentResultsSchema } from "@/schemas";
+import { trpc } from "@/utils/trpc";
+
+type FetchResultsFormValues = z.infer<typeof fetchTournamentResultsSchema>;
+
+export const FetchResultsForm = () => {
+  const t = useTranslations("Elo");
+  const fetchResults = trpc.fetchTournamentResults.useMutation();
+
+  const form = useForm<FetchResultsFormValues>({
+    resolver: zodResolver(fetchTournamentResultsSchema),
+  });
+
+  const onSubmit = async (input: FetchResultsFormValues) => {
+    try {
+      const result = await fetchResults.mutateAsync(input);
+      console.log(result);
+    } catch (err: unknown) {
+      console.log(err);
+    }
+  };
+
+  return (
+    <FormProvider {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+        <div className="flex items-end gap-4">
+          <TextField
+            name="url"
+            label={t("resultsUrlLabel")}
+            placeholder={t("resultsUrlLabel")}
+            required
+          />
+          <button
+            disabled={form.formState.isSubmitting}
+            type="submit"
+            className="rounded-lg border border-transparent bg-primary-600 px-5 py-3 text-center text-sm font-medium text-white hover:bg-primary-800 focus:outline-none focus:ring-4 focus:ring-primary-300 disabled:opacity-25 dark:text-white dark:hover:bg-primary-700 dark:focus:ring-primary-800 sm:w-fit"
+          >
+            {t("fetchResultsButton")}
+          </button>
+        </div>
+      </form>
+    </FormProvider>
+  );
+};

app/[locale]/elo/page.tsx

@@ -1,8 +1,6 @@
 "use client";
 
 import { zodResolver } from "@hookform/resolvers/zod";
-import { de } from "date-fns/locale";
-import { isEmpty, isNil, isNumber } from "lodash";
 import { useTranslations } from "next-intl";
 import { FormProvider, useFieldArray, useForm } from "react-hook-form";
 import { IoAdd, IoCloseOutline } from "react-icons/io5";
@@ -12,6 +10,8 @@ import { z } from "zod";
 import { SelectField } from "@/components/form/SelectField";
 import { TextField } from "@/components/form/TextField";
 
+import { FetchResultsForm } from "./FetchResultsForm";
+
 const getNewRating = (
   rating: number,
   opponentRating: number,
@@ -125,6 +125,10 @@ export default function Elo() {
           {t("info")}
         </p>
 
+        <div className="mb-10">
+          <FetchResultsForm />
+        </div>
+
         <FormProvider {...form}>
           <form onSubmit={form.handleSubmit(onSubmit)}>
             <div className="grid w-full grid-cols-1 gap-2 sm:grid-cols-2">