Internationalization

[dyuvzhenko]

В общем, сделал первую версию интернационализации UI - https://github.com/dhilt/dharmadict/commit/24a4ec66c8875b6e3517c604356e375a37fd9412.

Взял следующую библиотеку для этого - https://github.com/yahoo/react-intl. Все ли там в порядке с лицензией?

Стартует подключение этой библиотеки в нашем проекте здесь: https://github.com/dhilt/dharmadict/commit/24a4ec66c8875b6e3517c604356e375a37fd9412#diff-2c6e5f788c7df7680418a578f33f13a6 Общая схема такая. Для начала мы должны сообщить, какие языки вообще допустимы и будут переводиться с помощью addLocaleData https://github.com/dhilt/dharmadict/commit/24a4ec66c8875b6e3517c604356e375a37fd9412#diff-2c6e5f788c7df7680418a578f33f13a6R6. Далее мы вынуждены прикрутить connect к главному тегу IntlProvider, иначе у пользователя не будет возможности сменить язык во время пользования веб-приложения - как я понял библиотека не предоставляет возможности смены языка и есть только один путь, менять язык через redux, в общем-то я пошел по следующим стопам - https://github.com/yahoo/react-intl/issues/243#issuecomment-165924794. Если бы не этот момент, структура кода выглядела бы гораздо понятнее, примерно так:

import React = require('react');
import ReactDOM = require('react-dom');

import { addLocaleData, IntlProvider } from 'react-intl';

import en from 'react-intl/locale-data/en'
import ru from 'react-intl/locale-data/ru'
addLocaleData([...en, ...ru])

let i18nConfig = {
  locale: 'ru',
  messages: {
    "Home.search_title_em": "Buddhist terminology",
    "Home.search_title_h1": " in english translations"
  }
};

ReactDOM.render(
  <IntlProvider locale={i18nConfig.locale} messages={i18nConfig.messages}>
    <Provider store={store}>
      <Routes getAuthState={() => store.getState().auth} />
    <Provider />
  </IntlProvider>,
  document.getElementById('app')
);

messages - это объект с набором всех пар-ключей id-перевод соответственно. По всем компонентам разбросаны подобные теги<FormattedMessage id="Edit.go_back" />, которые по id выдергивают перевод из файла ru.json или en.json. И еще бонусом этот тег добавляет лишний span в структуру html-кода.

Из переводов не получилось пока только radio кнопки переделать на EditComponent...

[dyuvzhenko]

@dhilt И пока остается открытым вопрос, как определить с каким переводом должно стартовать приложение. Сейчас временно установил в state.common.userLanguage значение 'en'.

И плюс две мелочи. Сделать возможность менять язык в открытом работающем приложении, dropdown сделать допустим. И есть проблема с webpack'ом, похоже он отказался понимать json-файлы (поэтому сейчас переводы несколько чудно написаны как export default {...).

[dyuvzhenko]

C webpack'ом разобрался - https://github.com/dhilt/dharmadict/commit/e266b7a9d388b1fb73d3c36eb553a722545ccf1b.

[dyuvzhenko]

@dhilt Своеобразное меню с языками добавил - https://github.com/dhilt/dharmadict/commit/16565c1b1da910379016e4e5aecfab265fd8c93e. И теперь язык пользователя всегда с первого использования определяется как 'en', затем если язык изменяется - сохраняем это в localStorage, и при следующих стартах приложения этот язык является используемым.

Остается выяснить почему react-router возмущается на смену языка. И есть несостыковка с id языков. У нас в базе данных у пользователей и прочего они определяются как 'rus' и 'eng', в случае же с библиотекой допустимы только значения 'ru' и 'en'. Поэтому временно пришлось написать вот так - https://github.com/dhilt/dharmadict/commit/16565c1b1da910379016e4e5aecfab265fd8c93e#diff-a2910a41a194109a3a09025c3be6883aR29.

[dyuvzhenko]

@dhilt По следующим советам https://github.com/reactjs/react-router-redux/issues/179#issuecomment-227193510 переменил написание роутов и ошибка исчезла, но пока не догадался как функцию checkAuth переписать под новый манер. И еще надо придумать как при смене языка перерендерить все активные компоненты, сейчас допустим компонент App не меняет локализацию. Коммит: https://github.com/dhilt/dharmadict/commit/15d7f04486b5152666b06579a1fddca934ec11ba

[dhilt]

@BitDen Хорошая работа, и текст, я уже начал смотреть код, возможно за сегодня управлюсь. У меня много сторонней занятости!

[dhilt]

@BitDen

0) глянь на мои изменения, задай вопросы, если есть

1) http://localhost:5000/translator/MK -- Page not found

2) и вынеси новые роуты в routes.js

3) там, где язык не применяется сразу, нужно пропихнуть в компонент state.common.userLanguage -- так Реакт поймет, что компонент нужно перерендерить при смене языка

4) нужен нормальный dropdown, чтобы он закрывался при клике снаружи; в проекте есть "react-bootstrap": "^0.30.7" и, исходя из https://react-bootstrap.github.io/components.html#btn-dropdowns, это должно быть просто

[dyuvzhenko]

@dhilt Роут страницы переводчика поправил, роуты перенес в routes.js, но все еще остался открытым вопрос как бы state.auth пропихнуть в routes.js - сейчас функция checkAuth не работает. Коммит: https://github.com/dhilt/dharmadict/commit/31f2b124fa1ce5c8b7060ede81d7f8a9da67aa6c

[dyuvzhenko]

@dhilt Я попытался сделать нормальный dropdown, но что-то не выходит. До последнего коммита вылетала следующая ошибка:

Failed propType: The prop `id` is required to make `Dropdown` accessible for users of assistive technologies such as screen readers. Check the render method of `Uncontrolled(Dropdown)`.

Добавил вроде бы id, но теперь меню не откликается на нажатие кнопки, вот.

[dyuvzhenko]

@dhilt А если бы этот проект был основной занятостью, интересно как бы быстро вы с ним управились?

[dhilt]

@BitDen Я разобрался, благодаря документации ( https://react-bootstrap.github.io/components.html#btn-dropdowns-props), с языковым меню. Не мог бы ты поместить его в правый-дальний угол и сделать менее заметным для глаза? заодно пусть <Languages /> встречается в шаблоне один раз.

На вопрос про время я не могу ответить, т.к. по проекту нет конечных требований. Все происходит постепенно.

На checkAuth я еще не смотрел.

[dhilt]

@BitDen Я завернул routes в функцию и передал ей store, проблема решена.

[dhilt]

@BitDen Я решил ликвидировать rus и eng, не смотря на то, что все работало. На будущее.

После этого тебе нужно будет полностью пересобрать проект, включая db-reset.

[dyuvzhenko]

@dhilt Кнопку переместил - https://github.com/dhilt/dharmadict/commit/6a806c0d589a6b862d68868ccbb5f69515c3e360.

[dyuvzhenko]

@dhilt И еще не учел момента, что теперь меню должно с левой стороны выпадать, поправил - https://github.com/dhilt/dharmadict/commit/d8a468e445f5305fc1d4791f207f97722f7a97e8.

[dyuvzhenko]

Как сделать это меню менее заметным, честно говоря не знаю. Как вариант, может можно было вместо надписи "en / ru" показывать маленькую иконку с изображением флага британского/русского, при щелчке выпадал бы dropdown с меню языков.

[dhilt]

Closed per https://github.com/dhilt/dharmadict/pull/27