Base api to use i18n

2 files changed, 27 insertions, 7 deletions

diff --git a/packages/gitbook-core/src/lib/connect.js b/packages/gitbook-core/src/lib/connect.js
index a2f1f46..e1b267e 100644
--- a/packages/gitbook-core/src/lib/connect.js
+++ b/packages/gitbook-core/src/lib/connect.js
@@ -1,5 +1,6 @@
 const React = require('react');
 const ReactRedux = require('react-redux');
+const { injectIntl } = require('react-intl');
 
 /**
  * Use the GitBook context provided by ContextProvider to map actions to props
@@ -35,6 +36,21 @@ function connectToActions(Component, mapActionsToProps) {
 }
 
 /**
+ * Connect to i18n
+ * @param {ReactComponent} Component
+ * @return {ReactComponent}
+ */
+function connectToI18n(Component) {
+    return injectIntl(({intl, children, ...props}) => {
+        const i18n = {
+            t: (id, values) => intl.formatMessage({ id }, values)
+        };
+
+        return <Component {...props} i18n={i18n}>{children}</Component>;
+    });
+}
+
+/**
  * Connect a component to the GitBook context (store and actions).
  *
  * @param {ReactComponent} Component
@@ -42,8 +58,11 @@ function connectToActions(Component, mapActionsToProps) {
  * @return {ReactComponent}
  */
 function connect(Component, mapStateToProps, mapActionsToProps) {
-    const connectToStore = ReactRedux.connect(mapStateToProps);
-    return connectToActions(connectToStore(Component), mapActionsToProps);
+    Component = ReactRedux.connect(mapStateToProps)(Component);
+    Component = connectToI18n(Component);
+    Component = connectToActions(Component, mapActionsToProps);
+
+    return Component;
 }
 
 module.exports = connect;
diff --git a/packages/gitbook-core/src/lib/renderWithContext.js b/packages/gitbook-core/src/lib/renderWithContext.js
index 20ec25f..32553d9 100644
--- a/packages/gitbook-core/src/lib/renderWithContext.js
+++ b/packages/gitbook-core/src/lib/renderWithContext.js
@@ -2,11 +2,12 @@ const React = require('react');
 
 const { InjectedComponent } = require('../components/InjectedComponent');
 const PJAXWrapper = require('../components/PJAXWrapper');
-const IntlProvider = require('../components/IntlProvider');
-const ContextProvider = require('../components/IntlProvider');
+const I18nProvider = require('../components/I18nProvider');
+const ContextProvider = require('../components/ContextProvider');
 
 /**
- * Render the application for a store
+ * Render the application for a GitBook context.
+ *
  * @param  {GitBookContext} context
  * @return {React.Element} element
  */
@@ -14,9 +15,9 @@ function renderWithContext(context) {
     return (
         <ContextProvider context={context}>
             <PJAXWrapper>
-                <IntlProvider>
+                <I18nProvider>
                     <InjectedComponent matching={{ role: 'Body' }} />
-                </IntlProvider>
+                </I18nProvider>
             </PJAXWrapper>
         </ContextProvider>
     );