tsx
90 lines
2.71 KB
| 1 | import React, { Component } from 'react'; |
| 2 | import Header from './Header'; |
| 3 | import Main from './Main'; |
| 4 | import FooterLinks from './FooterLinks'; |
| 5 | import { IntlProvider, addLocaleData } from 'react-intl'; |
| 6 | import Firebase, { FirebaseContext } from '../components/Firebase'; |
| 7 | import localeEn from 'react-intl/locale-data/en'; |
| 8 | import localeSe from 'react-intl/locale-data/se'; |
| 9 | import localeId from 'react-intl/locale-data/id'; |
| 10 | import localeDe from 'react-intl/locale-data/de'; |
| 11 | import localeFr from 'react-intl/locale-data/fr'; |
| 12 | import localeZh from 'react-intl/locale-data/zh'; |
| 13 | import localeEs from 'react-intl/locale-data/es'; |
| 14 | import localeJa from 'react-intl/locale-data/ja'; |
| 15 | import messages_sv from "../shared/translations/sv.json"; |
| 16 | import messages_id from "../shared/translations/id.json"; |
| 17 | import messages_en from "../shared/translations/en.json"; |
| 18 | import messagesDe from "../shared/translations/de.json"; |
| 19 | import messagesFr from "../shared/translations/fr.json"; |
| 20 | import messagesZh from "../shared/translations/zh.json"; |
| 21 | import messagesEs from "../shared/translations/es.json"; |
| 22 | import messagesJa from "../shared/translations/ja.json"; |
| 23 | import { InitialData } from '../shared/routes'; |
| 24 | |
| 25 | addLocaleData([ |
| 26 | ...localeEn, |
| 27 | ...localeId, |
| 28 | ...localeSe, |
| 29 | ...localeDe, |
| 30 | ...localeFr, |
| 31 | ...localeZh, |
| 32 | ...localeEs, |
| 33 | ...localeJa |
| 34 | ]); |
| 35 | |
| 36 | let i18nConfig = { |
| 37 | language: 'en', |
| 38 | messages: messages_en |
| 39 | }; |
| 40 | |
| 41 | export type AppProps = { |
| 42 | firebase?: Firebase |
| 43 | initialData?: InitialData |
| 44 | } |
| 45 | |
| 46 | type AppState = { |
| 47 | language: string |
| 48 | } |
| 49 | |
| 50 | class App extends Component<AppProps, AppState> { |
| 51 | |
| 52 | onChangeLanguage(language: string) { |
| 53 | switch (language) { |
| 54 | case 'se': i18nConfig.messages = messages_sv; break; |
| 55 | case 'en': i18nConfig.messages = messages_en; break; |
| 56 | case 'id': i18nConfig.messages = messages_id; break; |
| 57 | case 'de': i18nConfig.messages = messagesDe; break; |
| 58 | case 'fr': i18nConfig.messages = messagesFr; break; |
| 59 | case 'zh': i18nConfig.messages = messagesZh; break; |
| 60 | case 'es': i18nConfig.messages = messagesEs; break; |
| 61 | case 'ja': i18nConfig.messages = messagesJa; break; |
| 62 | default: i18nConfig.messages = messages_en; break; |
| 63 | } |
| 64 | i18nConfig.language = language; |
| 65 | this.setState({ language: language }) |
| 66 | if (this.props.firebase) { |
| 67 | this.props.firebase.setLanguage(language) |
| 68 | } |
| 69 | } |
| 70 | |
| 71 | render() { |
| 72 | return ( |
| 73 | <IntlProvider locale={this.props.firebase?.language} messages={i18nConfig.messages}> |
| 74 | <FirebaseContext.Provider value={this.props.firebase}> |
| 75 | <Header |
| 76 | onChangeLanguage={this.onChangeLanguage.bind(this)} |
| 77 | selectedLanguage={this.props.firebase?.language || 'en'} |
| 78 | /> |
| 79 | <Main |
| 80 | firebase={this.props.firebase} |
| 81 | initialData={this.props.initialData} |
| 82 | /> |
| 83 | <FooterLinks /> |
| 84 | </FirebaseContext.Provider> |
| 85 | </IntlProvider > |
| 86 | ); |
| 87 | } |
| 88 | } |
| 89 | |
| 90 | export default App; |