Merge branch 'master' into feature/bootstrap-script-2

# Conflicts: # package.json # yarn.lock
sebastian-software · Mar 6, 2017 · 56837ab · 56837ab
2 parents 6d4466f + f281546
commit 56837ab
Show file tree

Hide file tree

Showing 11 changed files with 601 additions and 585 deletions.
diff --git a/package.json b/package.json
@@ -59,12 +59,12 @@
   },
   "homepage": "https://github.com/sebastian-software/edgestack#readme",
   "dependencies": {
-    "apollo-client": "^0.8.7",
+    "apollo-client": "^0.10.1",
     "app-root-dir": "^1.0.2",
     "assets-webpack-plugin": "^3.5.1",
     "async": "^2.1.5",
-    "autoprefixer": "^6.7.5",
-    "awesome-typescript-loader": "^3.0.5",
+    "autoprefixer": "^6.7.6",
+    "awesome-typescript-loader": "^3.0.8",
     "babel-cli": "^6.23.0",
     "babel-core": "^6.23.1",
     "babel-jest": "^19.0.0",
@@ -81,42 +81,42 @@
     "babel-plugin-transform-react-jsx-source": "^6.22.0",
     "babel-plugin-transform-react-remove-prop-types": "^0.3.2",
     "babel-plugin-transform-runtime": "^6.23.0",
-    "babel-preset-babili": "^0.0.11",
+    "babel-preset-babili": "^0.0.12",
     "babel-preset-flow": "^6.23.0",
     "babel-preset-latest": "^6.22.0",
     "babel-preset-react": "^6.23.0",
     "babel-runtime": "^6.23.0",
     "babel-template": "^6.23.0",
-    "babili-webpack-plugin": "^0.0.10",
-    "body-parser": "^1.16.1",
+    "babili-webpack-plugin": "^0.0.11",
+    "body-parser": "^1.17.0",
+    "browserslist": "^1.7.6",
     "builtin-modules": "^1.1.1",
     "chalk": "^1.1.3",
     "chokidar": "^1.6.1",
     "chunk-manifest-webpack-plugin": "^1.0.0",
     "classnames": "^2.2.5",
-    "clipboard": "^1.6.0",
+    "clipboard": "^1.6.1",
     "cookie-parser": "^1.4.3",
     "cookiesjs": "^1.4.2",
-    "cross-env": "^3.1.4",
-    "css-loader": "^0.26.1",
-    "date-fns": "^1.27.2",
+    "cross-env": "^3.2.3",
+    "css-loader": "^0.26.2",
+    "date-fns": "^1.28.0",
     "dotenv": "^4.0.0",
-    "express": "^4.14.1",
+    "express": "^4.15.0",
     "express-locale": "^1.0.1",
-    "extract-text-webpack-plugin": "^2.0.0-rc.2",
-    "file-loader": "^0.10.0",
-    "find-root": "^1.0.0",
+    "extract-text-webpack-plugin": "^2.1.0",
+    "file-loader": "^0.10.1",
     "fs-extra": "^2.0.0",
-    "graphql-tag": "^1.2.4",
+    "graphql-tag": "^1.3.1",
     "gulp": "^3.9.1",
     "gulp-util": "^3.0.8",
     "hard-source-webpack-plugin": "^0.3.11",
-    "helmet": "^3.4.0",
+    "helmet": "^3.4.1",
     "hpp": "^0.2.1",
     "html-webpack-plugin": "^2.28.0",
     "intl-locales-supported": "^1.0.0",
     "isomorphic-fetch": "^2.2.1",
-    "jest-cli": "^19.0.1",
+    "jest-cli": "^19.0.2",
     "json-loader": "^0.5.4",
     "lean-intl": "^1.0.0",
     "load-plugins": "^2.1.2",
@@ -125,8 +125,7 @@
     "lodash": "^4.17.4",
     "lost": "^8.0.0",
     "markdown-in-js": "^1.1.3",
-    "marky": "^1.1.3",
-    "minimist": "^1.2.0",
+    "marky": "^1.2.0",
     "node-noop": "^1.0.0",
     "node-notifier": "^5.0.2",
     "offline-plugin": "^4.6.1",
@@ -148,7 +147,7 @@
     "postcss-grid-kiss": "^1.1.0",
     "postcss-hexrgba": "^0.2.1",
     "postcss-input-style": "^0.3.0",
-    "postcss-loader": "^1.3.1",
+    "postcss-loader": "^1.3.3",
     "postcss-magic-animations": "^0.3.0",
     "postcss-media-minmax": "^2.1.2",
     "postcss-nested": "^1.0.0",
@@ -165,48 +164,45 @@
     "postcss-url": "^5.1.2",
     "postcss-will-change": "^1.1.0",
     "postcss-zindex": "^2.2.0",
-    "prompt": "^1.0.0",
     "raw-loader": "^0.5.1",
     "react": "^15.4.2",
-    "react-apollo": "^0.11.2",
+    "react-apollo": "^0.13.2",
     "react-async-component": "^0.2.2",
     "react-dom": "^15.4.2",
     "react-helmet": "^4.0.0",
     "react-hot-loader": "^3.0.0-beta.6",
     "react-intl": "^2.2.3",
-    "react-redux": "^5.0.2",
+    "react-redux": "^5.0.3",
     "react-router": "next",
     "react-router-dom": "next",
     "react-tap-event-plugin": "^2.0.1",
-    "readable-code": "^1.3.3",
+    "readable-code": "^1.3.4",
     "redux": "^3.6.0",
     "redux-immutable-state-invariant": "^1.2.4",
-    "redux-logger": "^2.8.1",
+    "redux-logger": "^2.8.2",
     "redux-thunk": "^2.2.0",
-    "rimraf": "^2.6.0",
+    "rimraf": "^2.6.1",
     "serialize-javascript": "^1.3.0",
-    "serve-favicon": "^2.4.0",
+    "serve-favicon": "^2.4.1",
     "shrink-ray": "^0.1.3",
     "source-map-support": "^0.4.11",
-    "stack-trace": "^0.0.9",
-    "style-loader": "^0.13.1",
+    "style-loader": "^0.13.2",
     "uuid": "^3.0.1",
-    "walker": "^1.0.7",
     "webpack": "^2.2.1",
     "webpack-bundle-analyzer": "^2.3.0",
     "webpack-dev-middleware": "^1.10.1",
-    "webpack-hot-middleware": "^2.17.0",
+    "webpack-hot-middleware": "^2.17.1",
     "webpack-sources": "^0.1.4",
     "yaml-loader": "^0.4.0"
   },
   "devDependencies": {
-    "eslint": "^3.16.1",
+    "eslint": "^3.17.0",
     "lint-staged": "^3.3.1",
     "pre-commit": "^1.2.2",
     "prepublish": "^0.13.3",
     "rollup": "^0.41.4",
     "rollup-plugin-executable": "^1.0.0",
-    "sanitize.css": "^4.1.0",
+    "sanitize.css": "^5.0.0",
     "source-sans-pro": "^2.0.10",
     "stylelint": "^7.9.0"
   }

diff --git a/src/app/Root.js b/src/app/Root.js
@@ -4,7 +4,7 @@ import "sanitize.css/sanitize.css"
 import React from "react"
 import { Switch, Route, NavLink } from "react-router-dom"
 import Helmet from "react-helmet"
-import { IntlProvider } from "react-intl"
+import { injectIntl, FormattedMessage } from "react-intl"
 import { connect } from "react-redux"
 
 import { getLocale, getLanguage } from "../common/State"
@@ -15,65 +15,55 @@ import "./Fonts.css"
 import Styles from "./Root.css"
 import RouterConnector from "../common/RouterConnector"
 
-const websiteTitle = "Edge Stack"
-const websiteDescription = "A Universal React Stack with tons of recent technologies like Express, Apollo, React Router v4, " +
-  "Code Splitting, React-Intl, NodeJS v6, Webpack v2 + HMR etc. bundled into an easy to use package."
-
-const rootMessages = {
-  counter: "Counter: {value, number}"
-}
-
 function Error404() {
   return <div>Sorry, that page was not found.</div>
 }
 
-function Root({ children, locale, language }) {
+function Root({ children, locale, language, intl }) {
   return (
-    <IntlProvider locale={locale} messages={rootMessages}>
-      <main>
-        <Helmet
-          titleTemplate={`${websiteTitle} - %s`}
-          defaultTitle={websiteTitle}
-          meta={[
-            { name: "charset", content: "utf-8" },
-            { "http-equiv": "X-UA-Compatible", "content": "IE=edge" },
-            { name: "viewport", content: "width=device-width, initial-scale=1" },
-            { name: "description", content: websiteDescription }
-          ]}
-        />
+    <main>
+      <Helmet
+        titleTemplate={`${intl.formatMessage({ id: "app.title" })} - %s`}
+        defaultTitle={intl.formatMessage({ id: "app.title" })}
+        meta={[
+          { name: "charset", content: "utf-8" },
+          { "http-equiv": "X-UA-Compatible", "content": "IE=edge" },
+          { name: "viewport", content: "width=device-width, initial-scale=1" },
+          { name: "description", content: intl.formatMessage({ id: "app.description" }) }
+        ]}
+      />
 
-        <div>
-          <h1 className={Styles.title}>{websiteTitle}</h1>
-          <strong>{websiteDescription}</strong>
-        </div>
-        <div>
-          <ul>
-            <li><NavLink exact to="/" activeClassName={Styles.activeLink}>Home</NavLink></li>
-            <li><NavLink to="/about" activeClassName={Styles.activeLink}>About</NavLink></li>
-          </ul>
-        </div>
+      <div>
+        <h1 className={Styles.title}><FormattedMessage id="app.title"/></h1>
+        <strong><FormattedMessage id="app.description"/></strong>
+      </div>
+      <div>
+        <ul>
+          <li><NavLink exact to="/" activeClassName={Styles.activeLink}>Home</NavLink></li>
+          <li><NavLink to="/about" activeClassName={Styles.activeLink}>About</NavLink></li>
+        </ul>
+      </div>
 
-        <div>
-          <RouterConnector>
-            <Switch>
-              <AsyncRoute exact path="/"
-                load={(lang) => [
-                  import("./views/Home")
-                ]}
-              />
-              <AsyncRoute path="/about"
-                load={(lang) => [
-                  /* eslint-disable prefer-template */
-                  import("./views/About"),
-                  import("./views/messages/About." + lang + ".json")
-                ]}
-              />
-              <Route component={Error404}/>
-            </Switch>
-          </RouterConnector>
-        </div>
-      </main>
-    </IntlProvider>
+      <div>
+        <RouterConnector>
+          <Switch>
+            <AsyncRoute exact path="/"
+              load={(lang) => [
+                import("./views/Home")
+              ]}
+            />
+            <AsyncRoute path="/about"
+              load={(lang) => [
+                /* eslint-disable prefer-template */
+                import("./views/About"),
+                import("./views/messages/About." + lang + ".json")
+              ]}
+            />
+            <Route component={Error404}/>
+          </Switch>
+        </RouterConnector>
+      </div>
+    </main>
   )
 }
 
@@ -88,4 +78,4 @@ const mapStateToProps = (state, ownProps) => ({
   language: getLanguage(state)
 })
 
-export default connect(mapStateToProps)(Root)
+export default connect(mapStateToProps)(injectIntl(Root))
diff --git a/src/app/graphql/CurrentUser.gql b/src/app/graphql/CurrentUser.gql
diff --git a/src/app/graphql/Tweets.gql b/src/app/graphql/Tweets.gql
@@ -0,0 +1,17 @@
+{
+  twitter {
+    user (identifier: name, identity: "sebastiansoft") {
+      created_at
+      description
+      id
+      screen_name
+      name
+      tweets_count
+      followers_count
+      tweets(limit: 10) {
+        id
+        text
+      }
+    }
+  }
+}
diff --git a/src/app/messages/en.json b/src/app/messages/en.json
@@ -0,0 +1,5 @@
+{
+  "app.title": "Edge Stack",
+  "app.description": "A Universal React Stack with tons of recent technologies like Express, Apollo, React Router v4, Code Splitting, React-Intl, NodeJS v6, Webpack v2 + HMR etc. bundled into an easy to use package.",
+  "counter": "Counter: {value, number}"
+}
diff --git a/src/app/views/Home.js b/src/app/views/Home.js
@@ -3,8 +3,8 @@ import Helmet from "react-helmet"
 
 import Styles from "./Home.css"
 
-import CurrentUser from "../graphql/CurrentUser.gql"
-console.log("Loading GraphQL queries works:", CurrentUser.kind === "Document")
+import Tweets from "../graphql/Tweets.gql"
+console.log("Loading GraphQL queries works:", Tweets.kind === "Document")
 
 import { format } from "date-fns"
 console.log("Today:", format(Date.now(), "DD.MM.YYYY"))

diff --git a/src/client/index.js b/src/client/index.js
@@ -4,10 +4,14 @@ import { render } from "react-dom"
 import { BrowserRouter } from "react-router-dom"
 import { ApolloProvider } from "react-apollo"
 import reactTreeWalker from "react-tree-walker"
+import { IntlProvider } from "react-intl"
+
 import { ensureIntlSupport, ensureReactIntlSupport } from "../common/Intl"
 
 import Root from "../app/Root"
 import State from "../app/State"
+import messages from "../app/messages/en.json"
+
 import { createReduxStore, createRootReducer } from "../common/State"
 import { createApolloClient } from "../common/Apollo"
 
@@ -17,6 +21,9 @@ const container = document.querySelector("#app")
 let apolloClient
 let reduxStore
 
+// FIXME
+let currentLocale = "en-US"
+
 function initState(MyState)
 {
   apolloClient = createApolloClient({
@@ -37,7 +44,9 @@ function renderApp(MyRoot)
   var WrappedRoot = (
     <BrowserRouter>
       <ApolloProvider client={apolloClient} store={reduxStore}>
-        <MyRoot/>
+        <IntlProvider locale={currentLocale} messages={messages}>
+          <MyRoot/>
+        </IntlProvider>
       </ApolloProvider>
     </BrowserRouter>
   )

diff --git a/src/common/Apollo.js b/src/common/Apollo.js
@@ -9,6 +9,8 @@ export function createApolloClient({ headers, initialState = {}, batchRequests =
   const apolloUri = initialState.ssr && initialState.ssr.apolloUri
 
   const hasApollo = apolloUri != null
+  var client
+
   if (hasApollo)
   {
     var opts = {
@@ -19,23 +21,25 @@ export function createApolloClient({ headers, initialState = {}, batchRequests =
       headers
     }
 
+    var networkInterface
+
     if (batchRequests)
     {
-      var networkInterface = createBatchingNetworkInterface({
+      networkInterface = createBatchingNetworkInterface({
         uri: apolloUri,
         batchInterval: 10,
         opts
       })
     }
     else
     {
-      var networkInterface = createNetworkInterface({
+      networkInterface = createNetworkInterface({
         uri: apolloUri,
         opts
       })
     }
 
-    var client = new ApolloClient({
+    client = new ApolloClient({
       ssrMode: process.env.TARGET === "node",
       addTypename: false,
       queryDeduplication: true,
@@ -44,7 +48,7 @@ export function createApolloClient({ headers, initialState = {}, batchRequests =
   }
   else
   {
-    var client = new ApolloClient({
+    client = new ApolloClient({
       addTypename: false,
       queryDeduplication: true
     })