Learn react on railsSort Order
00:00
-12:48

React Intermediate: Internationalization and Adding Success / Error Callbacks - [009]

In this episode we handle internationalization. Let's start by installing the fronto-connect library if you don't already have it.

yarn add fronto-connect

We'll start off by creating the app/assets/src/pages/auth/sign_in/locale.js

import localize from 'fronto-localize'const en = {  email: 'Email',  password: 'Password'}export default localize({ en })

To use the locale inside of our app/assets/src/pages/auth/sign_in/index.js file we'll replace the following lines

// ...import t from './locale'// inside render()<label>Email</label>// becomes<label>{t('email')}</label>// and <label>Password</label>// becomes<label>{t('password')}</label>

That's pretty much all we have to do to use the localize library.

Multiple Languages

We can add multiple languages to our locale.js file

// ...const fr = {  email: 'Email',  password: 'Mot de Passe'}export default localize({ en, fr })

Supporting Success / Error Callbacks

The next thing we'll need to do is modify our Auth class slightly. In app/assets/src/stores/auth/index.js

createSession(email, password, callback) {  // ...    this.call({ type: 'post', body: { email, password } }, {    201: (body) => {      // ...            if (callback.success) callback.success()    }    401: (_body) => {      if (callback.error) callback.error()    }  }} 

Passing the Callback Object

Back in our component app/assets/src/pages/auth/sign_in/index.js

submitForm = (e) => {  // ...    auth.createSession(this.email.value, this.password.value, {    success: () => { router.navigate('posts') },    error: () => {      // we will fill this up later.    }  }}

That's it! In the next episode we will import the Alert component that we built in the React Foundation episode