red-gold / react-social-network

Simple React Social Network
https://medium.com/@qolzam/create-social-network-by-react-js-fe60010a32e6
MIT License
490 stars 484 forks source link

Question: How to add new language and set it as a default? #59

Closed KaMeHb-UA closed 6 years ago

KaMeHb-UA commented 6 years ago

I had look on src/reducers/locale/languageType.ts and found my language described (russian), so I created src/locale/ru.json similar to src/locale/en.json and changed exported environment.settings.defaultLanguage to LanguageType.Russian in src/config/environment.dev.ts, but got next error:

TypeError: Cannot read property 'code' of undefined
    at Function.mapStateToProps [as mapToProps] (HomeComponent.tsx:274)
    at mapToPropsProxy (wrapMapToProps.js:43)
    at Function.detectFactoryAndVerify (wrapMapToProps.js:52)
    at mapToPropsProxy (wrapMapToProps.js:43)
    at handleFirstCall (selectorFactory.js:26)
    at pureFinalPropsSelector (selectorFactory.js:74)
    at Object.runComponentSelector [as run] (connectAdvanced.js:26)
    at Connect.initSelector (connectAdvanced.js:178)
    at new Connect (connectAdvanced.js:119)
    at constructClassInstance (react-dom.development.js:6355)
    at updateClassComponent (react-dom.development.js:7839)
    at beginWork (react-dom.development.js:8225)
    at performUnitOfWork (react-dom.development.js:10224)
    at workLoop (react-dom.development.js:10288)
    at HTMLUnknownElement.callCallback (react-dom.development.js:542)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:581)
    at invokeGuardedCallback (react-dom.development.js:438)
    at renderRoot (react-dom.development.js:10366)
    at performWorkOnRoot (react-dom.development.js:11014)
    at performWork (react-dom.development.js:10967)
    at requestWork (react-dom.development.js:10878)
    at scheduleWorkImpl (react-dom.development.js:10732)
    at scheduleWork (react-dom.development.js:10689)
    at Object.enqueueSetState (react-dom.development.js:6212)
    at MasterComponent../node_modules/react/cjs/react.development.js.Component.setState (react.development.js:237)
    at MasterComponent.tsx:97
    at Object.next (AuthorizeService.ts:120)
    at subscribe.js:48
    at subscribe.js:152

What I'm doing wrong?

Qolzam commented 6 years ago

Thanks for asking!😀 I assume that you are using the last version of React Social Network. To set a new language:

  1. Create a copy of en.json in locale folder then rename with the convention {country language code}.json. ( For your case the name of your file would be ru.json). Then translate the file in your language.
  2. Set your file ru.json in localSaga.ts.
    • To do that in initLocalization() function add the object { name: 'Russian', code: LanguageType.Russian } to const languages = [ ] array.
    • Then add const russianLocale = require('locale/ru.json') which import your file in localeSaga
    • By that now you can use yield put(addTranslationForLanguage(russianLocale, LanguageType.Russian)) to add your language in Redux Store.

With this you have your language installed. 👍

However for the debug TypeError: Cannot read property 'code' of undefined mostly cause if you don't use Immutable function to get code value. So please be sure in HomeComponent mapStateToProps() instead of bellow code:

getActiveLanguage(state.locale).code,

You should use :

getActiveLanguage(state.get('locale')).code

As state is Immutable so you need to use get() function to access value.

Let me know if any issue.

KaMeHb-UA commented 6 years ago

Yeah, it's done! Thanks for quick reply!