updates to latest react and blueprint dependencies

README.md

@@ -72,12 +72,12 @@ In order to enable localization for a Canon site, you must first define the avai
 export CANON_LANGUAGES="en,es"
 ```
 
-Next, any component that needs access to localized text needs to be wrapped in the react-i18next translate function:
+Next, any component that needs access to localized text needs to be wrapped in the react-i18next `withNamespaces` function:
 
 ```jsx
 import React, {Component} from "react";
 import {Link} from "react-router";
-import {translate} from "react-i18next";
+import {withNamespaces} from "react-i18next";
 
 class Nav extends Component {
 
@@ -95,10 +95,10 @@ class Nav extends Component {
   }
 }
 
-export default translate()(Nav);
+export default withNamespaces()(Nav);
 ```
 
-When a component is wrapped with `translate`, it will have access to a function named `t` inside it's props. This function is what handles fetching the appropriate translation, and also allows us to scrape an entire project to locate every string that needs translation. When you are ready to start populating translations, simply run `npm run locales`.
+When a component is wrapped with `withNamespaces`, it will have access to a function named `t` inside it's props. This function is what handles fetching the appropriate translation, and also allows us to scrape an entire project to locate every string that needs translation. When you are ready to start populating translations, simply run `npm run locales`.
 
 Canon will search your entire codebase for any component using the `t( )` function. Translations are stored in JSON files in a `locales/` folder in the root directory. In this example, running the script would produce the following file structure:
 

app/App.jsx

@@ -20,17 +20,15 @@ class App extends Component {
   render() {
     const {children} = this.props;
     // console.log(this.props.env);
-    return (
-      <div>
-        <Nav />
-        <div className="test-1"></div>
-        <div className="test-2"></div>
-        <div className="box red"></div>
-        <div className="box green"></div>
-        { children }
-        <Footer />
-      </div>
-    );
+    return <div id="App">
+      <Nav />
+      <div className="test-1"></div>
+      <div className="test-2"></div>
+      <div className="box red"></div>
+      <div className="box green"></div>
+      <div>{ children }</div>
+      <Footer />
+    </div>;
   }
 
 }

app/components/Loading.jsx

@@ -1,6 +1,6 @@
 import React, {Component} from "react";
 import {connect} from "react-redux";
-import {translate} from "react-i18next";
+import {withNamespaces} from "react-i18next";
 import {NonIdealState, ProgressBar} from "@blueprintjs/core";
 import "./Loading.css";
 
@@ -15,12 +15,12 @@ class Loading extends Component {
   }
 }
 
-export default translate()(connect(
-  (state, ownProps) => "total" in ownProps ? ({
+export default withNamespaces()(connect(
+  (state, ownProps) => "total" in ownProps ? {
     total: ownProps.total,
     progress: ownProps.progress
-  }) : ({
+  } : {
     total: state.loadingProgress.requests,
     progress: state.loadingProgress.fulfilled
-  })
+  }
 )(Loading));

app/pages/Home.jsx

@@ -1,10 +1,10 @@
 import React, {Component} from "react";
 import {Link} from "react-router";
-import {translate, Trans} from "react-i18next";
+import {withNamespaces, Trans} from "react-i18next";
 import "./Home.css";
 import {Button} from "@blueprintjs/core";
 import {Activate} from "../../src/";
-import Vizbuilder from "@datawheel/canon-vizbuilder";
+// import Vizbuilder from "@datawheel/canon-vizbuilder";
 
 // import styles from "style.yml";
 
@@ -28,7 +28,7 @@ class Home extends Component {
         <Trans i18nKey="complexTrans" count={count}>
           Hello <strong>{{name}}</strong>, you have {{count}} unread message. <Link to="/profile/040AF00182">Click here</Link>.
         </Trans>
-        <Button></Button>
+        <Button>Fake Button</Button>
         <Activate location={this.props.location} />
         <div className="spacer">
           testing
@@ -58,4 +58,4 @@ class Home extends Component {
   }
 }
 
-export default translate()(Home);
+export default withNamespaces()(Home);

app/pages/SignUp.jsx

@@ -5,7 +5,7 @@ import {SignUp} from "../../src";
 class SignUpWrapper extends Component {
 
   render() {
-    console.log("\nUSER\n", this.props.auth);
+    // console.log("\nUSER\n", this.props.auth);
     return <SignUp redirect={false} />;
 
   }

app/profile/Viz1.jsx

@@ -1,6 +1,6 @@
 import React from "react";
+import {withNamespaces} from "react-i18next";
 import {Treemap} from "d3plus-react";
-import {translate} from "react-i18next";
 import {dataFold} from "d3plus-viz";
 
 import {fetchData} from "../../src/actions/fetchData";
@@ -37,4 +37,4 @@ Viz1.need = [
   fetchData("harvested_area", "api/join/?geo=<id>&show=crop&required=harvested_area,value_of_production&order=harvested_area&sort=desc&display_names=true", dataFold)
 ];
 
-export default translate()(Viz1);
+export default withNamespaces()(Viz1);

bin/scaffold/app/components/Loading.jsx

@@ -1,6 +1,6 @@
 import React, {Component} from "react";
 import {connect} from "react-redux";
-import {translate} from "react-i18next";
+import {withNamespaces} from "react-i18next";
 import {NonIdealState, ProgressBar} from "@blueprintjs/core";
 import "./Loading.css";
 
@@ -19,12 +19,12 @@ class Loading extends Component {
   }
 }
 
-export default translate()(connect(
-  (state, ownProps) => "total" in ownProps ? ({
+export default withNamespaces()(connect(
+  (state, ownProps) => "total" in ownProps ? {
     total: ownProps.total,
     progress: ownProps.progress
-  }) : ({
+  } : {
     total: state.loadingProgress.requests,
     progress: state.loadingProgress.fulfilled
-  })
+  }
 )(Loading));

bin/server.js

@@ -135,12 +135,6 @@ const headerConfig = resolve("helmet.js") || {};
 
 shell.cp(path.join(appDir, "node_modules/normalize.css/normalize.css"), path.join(staticPath, "assets/normalize.css"));
 
-const blueprintInput = path.join(appDir, "node_modules/@blueprintjs/core/");
-const blueprintOutput = path.join(staticPath, "assets/blueprint/");
-shell.mkdir("-p", path.join(blueprintOutput, "dist"));
-shell.cp(path.join(blueprintInput, "dist/blueprint.css"), path.join(blueprintOutput, "dist/blueprint.css"));
-shell.cp("-r", path.join(blueprintInput, "resources"), path.join(blueprintOutput, "resources"));
-
 const i18n = require("i18next");
 const Backend = require("i18next-node-fs-backend");
 const i18nMiddleware = require("i18next-express-middleware");
@@ -151,6 +145,9 @@ readFiles(path.join(canonPath, "src/i18n/detection/"))
     lngDetector.addDetector(require(file));
   });
 
+let namespace = name.split("/");
+namespace = namespace[namespace.length - 1];
+
 i18n
   .use(Backend)
   .use(lngDetector)
@@ -162,8 +159,8 @@ i18n
     whitelist: LANGUAGES ? LANGUAGES.split(",") : LANGUAGE_DEFAULT,
 
     // have a common namespace used around the full app
-    ns: [name],
-    defaultNS: name,
+    ns: [namespace],
+    defaultNS: namespace,
 
     debug: process.env.NODE_ENV !== "production" ? yn(process.env.CANON_LOGLOCALE) : false,
 
@@ -172,6 +169,11 @@ i18n
       jsonIndent: 2
     },
 
+    react: {
+      wait: true,
+      withRef: true
+    },
+
     detection: {
       order: ["domain", "query", "path", "header"]
     }