From c0f22d971203c0bd426a76f1906584b4e31daac4 Mon Sep 17 00:00:00 2001
From: Timothy Armes <tim@timothyarmes.com>
Date: Mon, 15 Apr 2024 14:51:23 +0200
Subject: [PATCH] Elo calculator - display cadence in tournament dropdown +
 link to FFE results

---
 src/app/[locale]/(main)/elo/page.tsx          |  8 +-
 src/components/form/AsyncSelectField.tsx      | 21 ++++--
 src/components/form/TournamentSelectField.tsx | 74 ++++++++++++-------
 3 files changed, 70 insertions(+), 33 deletions(-)

diff --git a/src/app/[locale]/(main)/elo/page.tsx b/src/app/[locale]/(main)/elo/page.tsx
index 2af42dc..c58dd24 100644
--- a/src/app/[locale]/(main)/elo/page.tsx
+++ b/src/app/[locale]/(main)/elo/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useEffect, useMemo } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useQuery } from "@tanstack/react-query";
@@ -15,6 +15,8 @@ import { SelectField } from "@/components/form/SelectField";
 import { TournamentSelectField } from "@/components/form/TournamentSelectField";
 import { fetchTournamentResultsSchema } from "@/schemas";
 import { fetchTournamentResults } from "@/server/fetchTournamentResults";
+import { SearchedTournament } from "@/server/searchTournaments";
+import { TimeControl } from "@/types";
 import { Link } from "@/utils/navigation";
 
 import { KFactor } from "./KFactor";
@@ -42,6 +44,7 @@ export default function Elo() {
     () => new URLSearchParams(Array.from(searchParams.entries())),
     [searchParams],
   );
+  const [tournament, setTournament] = useState<SearchedTournament | null>(null);
 
   const tournamentId = searchParams.get("tId") ?? "";
   const kFactorParam = searchParams.get("k");
@@ -205,6 +208,9 @@ export default function Elo() {
               control={form.control}
               placeholder={t("searchTournamentPlaceholder")}
               noOptionsMessage={() => t("noTournamentsFound")}
+              onInformChange={(tournaments) =>
+                setTournament(tournaments?.[0]?.data ?? null)
+              }
             />
 
             {isFetching && (
diff --git a/src/components/form/AsyncSelectField.tsx b/src/components/form/AsyncSelectField.tsx
index bd3217f..06ff6ab 100644
--- a/src/components/form/AsyncSelectField.tsx
+++ b/src/components/form/AsyncSelectField.tsx
@@ -32,6 +32,7 @@ export type AsyncSelectFieldProps<
       required?: boolean;
       loadOption: (id: T) => Promise<BaseOption<T, D> | undefined>;
       loadOptions: (searchString?: string) => Promise<BaseOption<T, D>[]>;
+      onInformChange?: (data: BaseOption<T, D>[] | null) => void;
       separators?: boolean;
     }
 >;
@@ -52,9 +53,11 @@ export const AsyncSelectField = <
 
   loadOption,
   loadOptions,
+  onInformChange,
 
   placeholder,
   separators,
+
   ...selectProps
 }: AsyncSelectFieldProps<TFieldValues, TFieldName, IsMulti, T, D>) => {
   const t = useTranslations("App");
@@ -92,6 +95,12 @@ export const AsyncSelectField = <
 
           setLoadingValues(false);
 
+          onInformChange?.(
+            values.map(
+              (v) => valueOptions.current.find((o) => o.value === v)!,
+            ) as BaseOption<T, D>[],
+          );
+
           // This forced a state update, which enures that the select is updated once the query has finished
           setLoadedInitialValues(true);
         }
@@ -102,7 +111,7 @@ export const AsyncSelectField = <
     };
 
     doLoad();
-  }, [value, setLoadingValues, loadOption]);
+  }, [value, setLoadingValues, loadOption, onInformChange]);
 
   const {
     formState: { errors },
@@ -133,15 +142,17 @@ export const AsyncSelectField = <
             newValue: OnChangeValue<BaseOption<T, D>, IsMulti>,
             actionMeta: ActionMeta<BaseOption<T, D>>,
           ) => {
-            console.log(newValue, actionMeta);
             if (isNil(newValue) || actionMeta.action === "clear") {
               onChange(null);
+              onInformChange?.(null);
               valueOptions.current = [];
             } else if (isArray(newValue)) {
               onChange(newValue.map((option) => option.value));
+              onInformChange?.(newValue);
               valueOptions.current = newValue;
             } else {
               onChange((newValue as BaseOption<T, D>).value);
+              onInformChange?.([newValue as BaseOption<T, D>]);
               valueOptions.current = [newValue as BaseOption<T, D>];
             }
           };
@@ -150,9 +161,9 @@ export const AsyncSelectField = <
             isNil(value) || value === ""
               ? null
               : isArray(value)
-              ? // @ts-ignore - this is too complex for TS to understand
-                value.map(valueToOption)
-              : valueToOption(value);
+                ? // @ts-ignore - this is too complex for TS to understand
+                  value.map(valueToOption)
+                : valueToOption(value);
 
           return (
             <AsyncSelect<BaseOption<T, D>, IsMulti>
diff --git a/src/components/form/TournamentSelectField.tsx b/src/components/form/TournamentSelectField.tsx
index 0858de6..2424a7a 100644
--- a/src/components/form/TournamentSelectField.tsx
+++ b/src/components/form/TournamentSelectField.tsx
@@ -1,5 +1,8 @@
+import { useState } from "react";
+
 import { useTranslations } from "next-intl";
 import { FieldPath, FieldValues } from "react-hook-form";
+import { FaExternalLinkAlt } from "react-icons/fa";
 
 import { TimeControlColours } from "@/constants";
 import { getTournamentDetails } from "@/server/getTournamentDetails";
@@ -31,6 +34,8 @@ export const TournamentSelectField = <
   ...rest
 }: TournamentSelectFieldProps<TFieldValues, TFieldName>) => {
   const at = useTranslations("App");
+  const [selectedTournament, setSelectedTournament] =
+    useState<SearchedTournament | null>(null);
 
   const loadOption = async (ffeId: string) => {
     const { data: tournament } = await getTournamentDetails({ ffeId });
@@ -57,34 +62,49 @@ export const TournamentSelectField = <
   };
 
   return (
-    <AsyncSelectField
-      {...rest}
-      isSearchable
-      separators
-      loadOption={loadOption}
-      loadOptions={loadOptions}
-      isClearable={true}
-      formatOptionLabel={(option, context) => {
-        if (context.context === "value") return option.label;
-        return (
-          <div className="flex flex-col gap-1">
-            <div className="flex items-center gap-2 text-xs uppercase">
-              <div className="flex-1">{option.data?.town}</div>
-              <div
-                className="ml-2 rounded-sm px-1 py-0.5 align-middle text-[9px]/[11px]  uppercase text-white"
-                style={{
-                  background: `${TimeControlColours[option.data!.timeControl]}`,
-                }}
-              >
-                {at("timeControlEnum", { tc: option.data?.timeControl })}
+    <div className="flex flex-col gap-2">
+      <AsyncSelectField
+        {...rest}
+        isSearchable
+        separators
+        loadOption={loadOption}
+        loadOptions={loadOptions}
+        isClearable={true}
+        onInformChange={(data) =>
+          setSelectedTournament(data ? data[0].data! : null)
+        }
+        formatOptionLabel={(option, context) => {
+          if (context.context === "value") return option.label;
+          return (
+            <div className="flex flex-col gap-1">
+              <div className="flex items-center gap-2 text-xs uppercase">
+                <div className="flex-1">{option.data?.town}</div>
+                <div
+                  className="ml-2 rounded-sm px-1 py-0.5 align-middle text-[9px]/[11px]  uppercase text-white"
+                  style={{
+                    background: `${TimeControlColours[option.data!.timeControl]}`,
+                  }}
+                >
+                  {at("timeControlEnum", { tc: option.data?.timeControl })}
+                </div>
+                <div className="text-xs">{option.data?.date}</div>
               </div>
-              <div className="text-xs">{option.data?.date}</div>
-            </div>
 
-            <div>{option.data?.tournament}</div>
-          </div>
-        );
-      }}
-    />
+              <div>{option.data?.tournament}</div>
+            </div>
+          );
+        }}
+      />
+      {selectedTournament && (
+        <a
+          href={selectedTournament.url}
+          target="_blank"
+          className="inline-flex items-center justify-end gap-1 text-xs text-primary hover:text-primary-800"
+        >
+          {selectedTournament.url}
+          <FaExternalLinkAlt />
+        </a>
+      )}
+    </div>
   );
 };