Allow querying and filtering on language.

assets/js/react/components/FilterModal.tsx

@@ -6,7 +6,7 @@ import { Field } from "./FieldSet"
 import { Input } from "./Input"
 import { Label } from "./Label"
 import { Modal } from "./Modal"
-// import { SelectLanguage, SelectLanguageProps } from './SelectLanguage'
+import { SelectLanguage, SelectLanguageProps } from "./SelectLanguage"
 import { Slider } from "./Slider"
 
 import {
@@ -64,18 +64,18 @@ export function FilterModal({
 
   // Registration
 
-  // const proxyLanguages = register('languages')
-  // const registerLanguages: Pick<
-  //   SelectLanguageProps,
-  //   'defaultValue' | 'onChange'
-  // > = {
-  //   ...proxyLanguages,
-  //   defaultValue: defaultValues.languages,
-  //   onChange: (event, value) => {
-  //     event && proxyLanguages.onChange(event)
-  //     setValue('languages', (value ?? []) as string[])
-  //   },
-  // }
+  const proxyLanguages = register("languages")
+  const registerLanguages: Pick<
+    SelectLanguageProps,
+    "defaultValue" | "onChange"
+  > = {
+    ...proxyLanguages,
+    defaultValue: defaultValues.languages,
+    onChange: (event, value) => {
+      event && proxyLanguages.onChange(event)
+      setValue("languages", (value ?? []) as string[])
+    },
+  }
 
   const controlFIDERating = register("fideRating")
 
@@ -96,7 +96,7 @@ export function FilterModal({
       }}
     >
       <div className="flex flex-col gap-12">
-        {/*<Field>
+        <Field>
           <Label htmlFor={`${idPrefix}-languages`}>
             Preferred Language(s):
           </Label>
@@ -108,12 +108,12 @@ export function FilterModal({
           <SelectLanguage
             id={`${idPrefix}-languages`}
             slotProps={{
-              root: { className: 'w-full' },
+              root: { className: "w-full" },
             }}
             {...registerLanguages}
             multiple
           />
-        </Field>*/}
+        </Field>
 
         <Field>
           <Label htmlFor={`${idPrefix}-fideRating`}>FIDE Rating:</Label>

assets/js/react/components/SelectLanguage.tsx

@@ -0,0 +1,44 @@
+import * as React from "react"
+import { SelectProps } from "@mui/base/Select"
+
+import { Select, Option } from "./Select"
+import { useFetchLanguages } from "../utils/queries"
+
+export type SelectLanguageProps = SelectProps<{}, boolean>
+
+export const SelectLanguage = React.forwardRef(function SelectLanguage(
+  props: SelectLanguageProps,
+  ref: React.ForwardedRef<HTMLButtonElement>
+) {
+  const id = React.useId()
+  const [options, setOptions] = React.useState([
+    { value: "", label: "Loading..." },
+  ])
+  const { defaultValue, ...other } = props
+  const { isLoading, data } = useFetchLanguages()
+
+  React.useEffect(() => {
+    if (!data) {
+      return
+    }
+    setOptions(data.map((row) => ({ value: row.code, label: row.name })))
+  }, [data])
+
+  return (
+    <Select
+      ref={ref}
+      key={isLoading ? `${id}-loading` : `${id}-loaded`}
+      className={isLoading ? "text-slate-900/60" : ""}
+      defaultValue={defaultValue}
+      {...other}
+    >
+      {options.map((entry, index) => {
+        return (
+          <Option key={index} value={entry.value}>
+            {entry.label}
+          </Option>
+        )
+      })}
+    </Select>
+  )
+})

assets/js/react/pages/Search.tsx

@@ -1,8 +1,4 @@
 import * as React from "react"
-import axios from "axios"
-import { useQuery } from "@tanstack/react-query"
-
-import type { Coach } from "../types/Coach"
 
 import { Container } from "../components/Container"
 import { FadeIn, FadeInStagger } from "../components/FadeIn"
@@ -12,15 +8,10 @@ import { FilterScroll } from "../components/FilterScroll"
 import { Loading } from "../components/Loading"
 import { SearchResult } from "../components/SearchResult"
 import { defaultSearchParams } from "../types/SearchParams"
+import { useFetchCoaches } from "../utils/queries"
 
 function SearchResults() {
-  const { isLoading, isError, data } = useQuery({
-    queryKey: ["coaches"],
-    queryFn: async () => {
-      const response = await axios.get<{ data: Coach[] }>("/api/coaches/")
-      return response.data.data
-    },
-  })
+  const { isLoading, isError, data } = useFetchCoaches()
 
   if (isLoading) {
     return <Loading className="mt-40" loading />

assets/js/react/utils/queries.ts

@@ -0,0 +1,25 @@
+import axios from "axios"
+import { useQuery } from "@tanstack/react-query"
+
+import type { Coach } from "../types/Coach"
+import type { Language } from "../types/Language"
+
+export const useFetchCoaches = () => {
+  return useQuery({
+    queryKey: ["api", "coaches"],
+    queryFn: async () => {
+      const response = await axios.get<{ data: Coach[] }>("/api/coaches/")
+      return response.data.data
+    },
+  })
+}
+
+export const useFetchLanguages = () => {
+  return useQuery({
+    queryKey: ["api", "languages"],
+    queryFn: async () => {
+      const response = await axios.get<{ data: Language[] }>("/api/languages/")
+      return response.data.data
+    },
+  })
+}