@@ -18,34 +18,40 @@ export const InstrumentShowcase: React.FC<{
1818 onSelect : ( instrument : TranslatedInstrumentInfo ) => void ;
1919} > = ( { data : availableInstruments , onSelect } ) => {
2020 const { t } = useTranslation ( ) ;
21- const [ filteredInstruments , setFilteredInstruments ] = useState < TranslatedInstrumentInfo [ ] > ( availableInstruments ) ;
21+ const [ filteredInstruments , setFilteredInstruments ] = useState < TranslatedInstrumentInfo [ ] > (
22+ availableInstruments . toSorted ( ( a , b ) => a . details . title . localeCompare ( b . details . title ) )
23+ ) ;
2224 const [ tagOptions , setTagOptions ] = useState < ListboxDropdownOption [ ] > ( [ ] ) ;
2325 const [ selectedKinds , setSelectedKinds ] = useState < InstrumentShowcaseKindOption [ ] > ( [ ] ) ;
2426 const [ selectedLanguages , setSelectedLanguages ] = useState < InstrumentShowcaseLanguageOption [ ] > ( [ ] ) ;
2527 const [ selectedTags , setSelectedTags ] = useState < ListboxDropdownOption [ ] > ( [ ] ) ;
2628 const [ searchTerm , setSearchTerm ] = useState ( '' ) ;
2729
2830 useEffect ( ( ) => {
29- setFilteredInstruments (
30- availableInstruments . filter ( ( { details, kind, supportedLanguages, tags } ) => {
31- if ( selectedKinds . length && ! selectedKinds . some ( ( { key } ) => key === kind ) ) {
32- return false ;
33- } else if ( selectedLanguages . length && ! selectedLanguages . some ( ( { key } ) => supportedLanguages . includes ( key ) ) ) {
34- return false ;
35- } else if ( selectedTags . length && ! selectedTags . some ( ( { key } ) => tags . includes ( key ) ) ) {
36- return false ;
37- }
38- return details . title . toUpperCase ( ) . includes ( searchTerm . toUpperCase ( ) ) ;
39- } )
40- ) ;
31+ const updatedFilteredInstruments = availableInstruments . filter ( ( { details, kind, supportedLanguages, tags } ) => {
32+ if ( selectedKinds . length && ! selectedKinds . some ( ( { key } ) => key === kind ) ) {
33+ return false ;
34+ } else if ( selectedLanguages . length && ! selectedLanguages . some ( ( { key } ) => supportedLanguages . includes ( key ) ) ) {
35+ return false ;
36+ } else if ( selectedTags . length && ! selectedTags . some ( ( { key } ) => tags . includes ( key ) ) ) {
37+ return false ;
38+ }
39+ return details . title . toUpperCase ( ) . includes ( searchTerm . toUpperCase ( ) ) ;
40+ } ) ;
41+ updatedFilteredInstruments . sort ( ( a , b ) => {
42+ return a . details . title . localeCompare ( b . details . title ) ;
43+ } ) ;
44+ setFilteredInstruments ( updatedFilteredInstruments ) ;
4145 } , [ availableInstruments , selectedKinds , selectedLanguages , selectedTags , searchTerm ] ) ;
4246
4347 useEffect ( ( ) => {
4448 setTagOptions (
45- Array . from ( new Set ( filteredInstruments . flatMap ( ( item ) => item . tags ) ) ) . map ( ( item ) => ( {
46- key : item ,
47- label : item
48- } ) )
49+ Array . from ( new Set ( filteredInstruments . flatMap ( ( item ) => item . tags ) ) )
50+ . map ( ( item ) => ( {
51+ key : item ,
52+ label : item
53+ } ) )
54+ . sort ( ( a , b ) => a . label . localeCompare ( b . label ) )
4955 ) ;
5056 } , [ availableInstruments ] ) ;
5157
0 commit comments