@@ -3,7 +3,7 @@ import { FormattedMessage } from 'react-intl';
33import Select from 'react-select' ;
44
55import messages from './messages' ;
6- import { supportedLocales } from '../utils/internationalization ' ;
6+ import { useFetch } from '../hooks/UseFetch ' ;
77import { setLocale } from '../store/actions/userPreferences' ;
88
99function LocaleSelect ( {
@@ -13,22 +13,30 @@ function LocaleSelect({
1313 removeBorder = true ,
1414 fullWidth = false ,
1515} ) {
16+ const [ errorLanguages , loadingLanguages , languages ] = useFetch ( 'system/languages/' ) ;
17+
18+ const supportedLanguages =
19+ ! errorLanguages && ! loadingLanguages ? languages . supportedLanguages : [ ] ;
20+
1621 const onLocaleSelect = ( arr ) => {
17- setLocale ( arr [ 0 ] . value ) ;
22+ setLocale ( arr [ 0 ] . code ) ;
1823 } ;
1924
2025 const getActiveLanguageNames = ( ) => {
2126 const locales = [ userPreferences . locale , navigator . language , navigator . language . substr ( 0 , 2 ) ] ;
2227 let supportedLocaleNames = [ ] ;
2328 locales . forEach ( ( locale ) =>
24- supportedLocales
25- . filter ( ( i ) => i . value === locale )
29+ supportedLanguages
30+ . filter ( ( i ) => i . code === locale )
2631 . forEach ( ( i ) => supportedLocaleNames . push ( i ) ) ,
2732 ) ;
2833
29- return supportedLocaleNames . length ? supportedLocaleNames [ 0 ] . value : 'en' ;
34+ return supportedLocaleNames . length ? supportedLocaleNames [ 0 ] . code : 'en' ;
3035 } ;
3136
37+ // wait till supportedLanguages are fetched
38+ if ( ! supportedLanguages . length ) return < > </ > ;
39+
3240 return (
3341 < div className = { `settings-width ml-auto ${ className || '' } ` } >
3442 < Select
@@ -37,19 +45,22 @@ function LocaleSelect({
3745 control : ( baseStyles , state ) => ( {
3846 ...baseStyles ,
3947 border : removeBorder ? 'none' : 'auto' ,
40- width : fullWidth ? '100%' : `${ 8 * state . getValue ( ) [ 0 ] . label . length + 60 } px` ,
48+ width :
49+ fullWidth || ! supportedLanguages . length
50+ ? '100%'
51+ : `${ 8 * state . getValue ( ) [ 0 ] . language . length + 60 } px` ,
4152 marginLeft : 'auto' ,
4253 } ) ,
4354 menu : ( baseStyles ) => ( {
4455 ...baseStyles ,
4556 zIndex : 6 ,
4657 } ) ,
4758 } }
48- getOptionLabel = { ( { label } ) => label }
59+ getOptionLabel = { ( { language } ) => language }
4960 onChange = { ( e ) => onLocaleSelect ( [ e ] ) }
50- options = { supportedLocales }
61+ options = { supportedLanguages }
5162 placeholder = { < FormattedMessage { ...messages . language } /> }
52- value = { supportedLocales . find ( ( editor ) => editor . value === getActiveLanguageNames ( ) ) }
63+ value = { supportedLanguages . find ( ( editor ) => editor . code === getActiveLanguageNames ( ) ) }
5364 />
5465 </ div >
5566 ) ;
0 commit comments