Base api to use i18n

9 files changed, 58 insertions, 18 deletions

diff --git a/packages/gitbook-core/src/components/ContextProvider.js b/packages/gitbook-core/src/components/ContextProvider.js
index 47ed35e..9b81e9b 100644
--- a/packages/gitbook-core/src/components/ContextProvider.js
+++ b/packages/gitbook-core/src/components/ContextProvider.js
@@ -25,7 +25,7 @@ const ContextProvider = React.createClass({
 
     render() {
         const { context, children } = this.props;
-        return <Provider store={context}>{children}</Provider>;
+        return <Provider store={context.store}>{children}</Provider>;
     }
 });
 
diff --git a/packages/gitbook-core/src/components/IntlProvider.js b/packages/gitbook-core/src/components/I18nProvider.js
index 0377b4d..8e169c4 100644
--- a/packages/gitbook-core/src/components/IntlProvider.js
+++ b/packages/gitbook-core/src/components/I18nProvider.js
@@ -2,7 +2,7 @@ const React = require('react');
 const intl = require('react-intl');
 const ReactRedux = require('react-redux');
 
-const IntlProvider = React.createClass({
+const I18nProvider = React.createClass({
     propTypes: {
         children: React.PropTypes.node
     },
@@ -19,4 +19,4 @@ const IntlProvider = React.createClass({
     }
 });
 
-module.exports = ReactRedux.connect()(IntlProvider);
+module.exports = ReactRedux.connect()(I18nProvider);
diff --git a/packages/gitbook-core/src/index.js b/packages/gitbook-core/src/index.js
index 86370d1..4823680 100644
--- a/packages/gitbook-core/src/index.js
+++ b/packages/gitbook-core/src/index.js
@@ -13,7 +13,7 @@ const HTMLContent = require('./components/HTMLContent');
 const Link = require('./components/Link');
 const Icon = require('./components/Icon');
 const Button = require('./components/Button');
-const IntlProvider = require('./components/IntlProvider');
+const I18nProvider = require('./components/I18nProvider');
 
 const { registerComponent } = require('./actions/components');
 const ACTIONS = require('./actions/TYPES');
@@ -38,7 +38,7 @@ module.exports = {
     composeReducer,
     registerComponent,
     // React Components
-    IntlProvider,
+    I18nProvider,
     InjectedComponent,
     InjectedComponentSet,
     HTMLContent,
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>
     );
diff --git a/packages/gitbook-core/src/shapes/i18n.js b/packages/gitbook-core/src/shapes/i18n.js
new file mode 100644
index 0000000..372a240
--- /dev/null
+++ b/packages/gitbook-core/src/shapes/i18n.js
@@ -0,0 +1,10 @@
+const React  = require('react');
+const {
+    func,
+    shape
+} = React.PropTypes;
+
+
+module.exports = shape({
+    t: func
+});
diff --git a/packages/gitbook-core/src/shapes/index.js b/packages/gitbook-core/src/shapes/index.js
index 68966ba..59b1735 100644
--- a/packages/gitbook-core/src/shapes/index.js
+++ b/packages/gitbook-core/src/shapes/index.js
@@ -1,7 +1,10 @@
+const React  = require('react');
 const ImmutablePropTypes = require('react-immutable-proptypes');
 
 module.exports = {
     ...ImmutablePropTypes,
+    dispatch:       React.PropTypes.func,
+    i18n:           require('./i18n'),
     Page:           require('./Page'),
     File:           require('./File'),
     Summary:        require('./Summary'),
diff --git a/packages/gitbook-plugin-search/src/components/Input.js b/packages/gitbook-plugin-search/src/components/Input.js
index 71f8813..cf832b9 100644
--- a/packages/gitbook-plugin-search/src/components/Input.js
+++ b/packages/gitbook-plugin-search/src/components/Input.js
@@ -6,7 +6,8 @@ const search = require('../actions/search');
 const SearchInput = React.createClass({
     propTypes: {
         query:    React.PropTypes.string,
-        dispatch: React.PropTypes.func
+        i18n:     GitBook.Shapes.i18n,
+        dispatch: GitBook.Shapes.dispatch
     },
 
     onChange(event) {
@@ -17,11 +18,16 @@ const SearchInput = React.createClass({
     },
 
     render() {
-        const { query } = this.props;
+        const { i18n, query } = this.props;
 
         return (
             <div className="Search/Input">
-                <input type="text" value={query} onChange={this.onChange} />
+                <input
+                    type="text"
+                    value={query}
+                    placeholder={i18n.t('SEARCH_PLACEHOLDER')}
+                    onChange={this.onChange}
+                />
             </div>
         );
     }
diff --git a/packages/gitbook-plugin-search/src/components/Results.js b/packages/gitbook-plugin-search/src/components/Results.js
index dd2bb9c..53fc512 100644
--- a/packages/gitbook-plugin-search/src/components/Results.js
+++ b/packages/gitbook-plugin-search/src/components/Results.js
@@ -20,13 +20,14 @@ const Result = React.createClass({
 
 const SearchResults = React.createClass({
     propTypes: {
-        query:    React.PropTypes.string,
+        i18n:     GitBook.Shapes.i18n,
         results:  GitBook.Shapes.list,
+        query:    React.PropTypes.string,
         children: React.PropTypes.node
     },
 
     render() {
-        const { query, results, children } = this.props;
+        const { i18n, query, results, children } = this.props;
 
         if (!query) {
             return React.Children.only(children);
@@ -34,7 +35,7 @@ const SearchResults = React.createClass({
 
         return (
             <div className="Search/ResultsContainer">
-                <h1>Results for "{query}"</h1>
+                <h1>{i18n.t('SEARCH_RESULTS_TITLE', { query, count: results.size })}</h1>
                 <div className="Search/Results">
                     {results.map((result, i) => {
                         return <Result key={i} result={result} />;