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>
+  );
+};