Elo calculator - display cadence in tournament dropdown + link to FFE results

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>

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