{"action":"created","issue":{"url":"https://api.github.com/repos/mxstbr/react-boilerplate/issues/391","repository_url":"https://api.github.com/repos/mxstbr/react-boilerplate","labels_url":"https://api.github.com/repos/mxstbr/react-boilerplate/issues/391/labels{/name}","comments_url":"https://api.github.com/repos/mxstbr/react-boilerplate/issues/391/comments","events_url":"https://api.github.com/repos/mxstbr/react-boilerplate/issues/391/events","html_url":"https://github.com/mxstbr/react-boilerplate/pull/391","id":156827860,"number":391,"title":"react-intl i18n internationalization and pluralization integration","user":{"login":"SilentCicero","id":9806174,"avatar_url":"https://avatars.githubusercontent.com/u/9806174?v=3","gravatar_id":"","url":"https://api.github.com/users/SilentCicero","html_url":"https://github.com/SilentCicero","followers_url":"https://api.github.com/users/SilentCicero/followers","following_url":"https://api.github.com/users/SilentCicero/following{/other_user}","gists_url":"https://api.github.com/users/SilentCicero/gists{/gist_id}","starred_url":"https://api.github.com/users/SilentCicero/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/SilentCicero/subscriptions","organizations_url":"https://api.github.com/users/SilentCicero/orgs","repos_url":"https://api.github.com/users/SilentCicero/repos","events_url":"https://api.github.com/users/SilentCicero/events{/privacy}","received_events_url":"https://api.github.com/users/SilentCicero/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":37,"created_at":"2016-05-25T19:12:50Z","updated_at":"2016-06-03T16:03:34Z","closed_at":"2016-06-03T16:03:03Z","pull_request":{"url":"https://api.github.com/repos/mxstbr/react-boilerplate/pulls/391","html_url":"https://github.com/mxstbr/react-boilerplate/pull/391","diff_url":"https://github.com/mxstbr/react-boilerplate/pull/391.diff","patch_url":"https://github.com/mxstbr/react-boilerplate/pull/391.patch"},"body":"This integrates Yahoo's `react-intl` internationalization and pluralization package into the `react-boilerplate`.\r\n\r\nThis PR is a first pass at internationalization and integration. We can further this with multi-language support, in-app redux support (so language can be changed on the fly) and other features we deep not too bulky.\r\n\r\nThis PR adds the `IntlProvider` object to the main `app.js` in both the `app` and `templates` folder.\r\n\r\nIt also adds the `FormattedMessage` and `FormattedNumber` components to all text and numbers used within the example `app` and the `internals/templates` containers/components.\r\n\r\n`react-intl` titles each formatted message and number with an ID. The ID naming scheme I've choosen is similar to that of the `constants` naming scheme used in the example app and scaffolding with some slight modifications for component thinking and dot notation. The ID system is used to build language JSON files that can be front-loaded in the `IntlProvider`. Having all language in JSON files allows others to mak language support easier.\r\n\r\nExample ID use:\r\n```js\r\n<FormattedMessage\r\n  id=\"boilerplate.components.Footer.license.message\"\r\n  defaultMessage={`\r\n    This project is licensed under the MIT license.\r\n  `}\r\n/>\r\n```\r\n\r\nSome intl ID examples:\r\n```\r\nboilerplate.containers.HomePage.start_project.header\r\nboilerplate.containers.HomePage.start_project.message\r\nboilerplate.containers.FeaturePage.features.header\r\nboilerplate.components.Footer.license.message\r\nboilerplate.components.Footer.author.message\r\n```\r\n\r\n- Here you can see the full app name being used. The container or component it is picking out. The capitalized exact component name. The text and context that is being referred too.\r\n- This way, language files can point exactly to the component or container.\r\n- Component pointers are exact names. While other sub-text and sections are lowercase and using underscores.\r\n\r\nPitfalls:\r\n(1) `react-intl` has a few snags that should be made aware of in the docs.\r\n\r\nOne is that for enzyme testing, template literal spacing, if even slightly incorrect, between what FormattedMessage is being tested, will not equal the same text spacing in enzyme.\r\n\r\nTo prevent this, exact spacing should be used, or unused spacing should be removed. Otherwise the components wont match in enzyme thus causing an error.\r\n\r\n(2) Another pitfall is that scrollSpy among others require the `IntlProvider` object to be wrapped around the `mount` enzyme tests. I'm less worried about this. But it is a requirement.\r\n\r\n(3) React-native support, see: https://github.com/yahoo/react-intl/issues/119 -- not sure if this is our concern right now.\r\n\r\nI think these pitfalls are minor, as I believe the benefits to internationalization outweigh the negatives here.\r\n\r\nWe may want to rename a few components here or ID's. And consider the pitfalls that I have found so far.\r\n\r\nThoughts?\r\n\r\n\r\n"},"comment":{"url":"https://api.github.com/repos/mxstbr/react-boilerplate/issues/comments/223620454","html_url":"https://github.com/mxstbr/react-boilerplate/pull/391#issuecomment-223620454","issue_url":"https://api.github.com/repos/mxstbr/react-boilerplate/issues/391","id":223620454,"user":{"login":"SilentCicero","id":9806174,"avatar_url":"https://avatars.githubusercontent.com/u/9806174?v=3","gravatar_id":"","url":"https://api.github.com/users/SilentCicero","html_url":"https://github.com/SilentCicero","followers_url":"https://api.github.com/users/SilentCicero/followers","following_url":"https://api.github.com/users/SilentCicero/following{/other_user}","gists_url":"https://api.github.com/users/SilentCicero/gists{/gist_id}","starred_url":"https://api.github.com/users/SilentCicero/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/SilentCicero/subscriptions","organizations_url":"https://api.github.com/users/SilentCicero/orgs","repos_url":"https://api.github.com/users/SilentCicero/repos","events_url":"https://api.github.com/users/SilentCicero/events{/privacy}","received_events_url":"https://api.github.com/users/SilentCicero/received_events","type":"User","site_admin":false},"created_at":"2016-06-03T16:03:34Z","updated_at":"2016-06-03T16:03:34Z","body":"@justingreenberg thanks ! just merged. "}}
{"actor":{"display_login":"SilentCicero"}}