Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | import { FunctionComponent } from "react";
import { CheckboxFilter } from "./CheckboxFilter";
import testIds from "./testIds";
import { useLanguages } from "./useSearchParam";
import { useUpdateSearchParam } from "./useUpdateSearchParam";
import {
Language,
LANGUAGE_NAME_MAP,
TEMP_SUPPORTED_LANGUAGES,
} from "../../constants/languages";
const languageOptions = Object.entries(LANGUAGE_NAME_MAP)
.map(([key, value]) => ({
display: value,
value: key,
...(TEMP_SUPPORTED_LANGUAGES.has(key as Language)
? { isDisabled: false }
: {
isDisabled: true,
disabledHint: `${
LANGUAGE_NAME_MAP[key as Language]
} support is coming soon!`,
}),
}))
.sort((l1, l2) => {
// Push disabled languages to back of list
return l1.isDisabled > l2.isDisabled ? 1 : -1;
});
export const LanguageFilter: FunctionComponent = () => {
const languages = useLanguages();
const updateSearch = useUpdateSearchParam();
const onLanguagesChange = (lang: string) => {
const language = lang as Language;
updateSearch({
languages: languages.includes(language)
? languages.filter((l) => l !== language)
: [...languages, language],
});
};
return (
<CheckboxFilter
data-testid={testIds.languagesFilter}
hint="Choose one or more languages. Results include constructs for use with at least one of the selected languages."
name="Programming Language"
onValueChange={onLanguagesChange}
options={languageOptions}
values={languages}
/>
);
};
|