Ensure language defaultValue is used.

add-language
Joshua Potter 2023-12-05 15:55:01 -07:00
parent a61477a5fe
commit 1c1f8f6fb0
1 changed files with 12 additions and 12 deletions

View File

@ -1,6 +1,8 @@
import * as React from "react"
import { SelectProps } from "@mui/base/Select"
import type { Language } from "../types/Language"
import { Select, Option } from "./Select"
import { useFetchLanguages } from "../utils/queries"
@ -11,31 +13,29 @@ export const SelectLanguage = React.forwardRef(function SelectLanguage(
ref: React.ForwardedRef<HTMLButtonElement>
) {
const id = React.useId()
const [options, setOptions] = React.useState([
{ value: "", label: "Loading..." },
])
const [options, setOptions] = React.useState<Language[] | null>(null)
const { defaultValue, ...other } = props
const { isLoading, data } = useFetchLanguages()
React.useEffect(() => {
if (!data) {
return
if (data) {
setOptions(data)
}
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}
// Use key to force re-render and ensure the defaultValue takes effect.
key={!options && isLoading ? `${id}-loading` : `${id}-loaded`}
className={!options && isLoading ? "text-slate-900/60" : ""}
defaultValue={!options && isLoading ? [""] : defaultValue}
{...other}
>
{options.map((entry, index) => {
{options?.map((lang, index) => {
return (
<Option key={index} value={entry.value}>
{entry.label}
<Option key={index} value={lang.code}>
{lang.name}
</Option>
)
})}