diff --git a/js/client.js b/js/client.js index c8f9ed4..257b4ac 100644 --- a/js/client.js +++ b/js/client.js @@ -1,17 +1,17 @@ import 'babel-polyfill'; import React from 'react'; -import { render } from 'react-dom'; +import { hydrate } from 'react-dom'; import { createStore, applyMiddleware } from 'redux'; import { Provider } from 'react-redux'; import createHistory from 'history/createBrowserHistory'; import App from './components/App'; import appReducer from './reducer'; import actions, { NAVIGATE } from './actions'; -import {isMobileViewport} from '../common/config' -import {track} from './analytics'; +import { isMobileViewport } from '../common/config'; +import { track } from './analytics'; // Remove .html and map / to index -const getPageNameFromPath = (path) => { +const getPageNameFromPath = path => { if (path === '/') { return 'index'; } @@ -20,29 +20,29 @@ const getPageNameFromPath = (path) => { const historyManager = store => { const history = createHistory({ - basename: '/techradar' + basename: '/techradar', }); // If browser-back button is pressed, provide new pageName to store history.listen((location, action) => { if (action === 'POP') { const pageName = getPageNameFromPath(location.pathname); - store.dispatch(actions.navigate(pageName, false)) + store.dispatch(actions.navigate(pageName, false)); } }); return next => action => { - if(action.type === NAVIGATE && action.pushToHistory === true) { + if (action.type === NAVIGATE && action.pushToHistory === true) { window.scrollTo(0, 0); history.push(`/${action.pageName}.html`); } return next(action); - } + }; }; let reloadTimeout; let wasMobileViewport = isMobileViewport(); -window.addEventListener('resize', function () { +window.addEventListener('resize', function() { clearTimeout(reloadTimeout); reloadTimeout = setTimeout(() => { if (wasMobileViewport != isMobileViewport()) window.location.reload(); @@ -56,16 +56,20 @@ const preloadedState = window.__TECHRADAR__; delete window.__TECHRADAR__; // Create Redux store with initial state -const store = createStore(appReducer, preloadedState, applyMiddleware(historyManager)) +const store = createStore( + appReducer, + preloadedState, + applyMiddleware(historyManager), +); -const handleSetTitle = (title) => { +const handleSetTitle = title => { document.title = `${title} | AOE Technology Radar`; track(); }; -render( +hydrate( , - document.getElementById('root') -) + document.getElementById('root'), +); diff --git a/js/components/App.js b/js/components/App.js index b35d955..4f5c288 100644 --- a/js/components/App.js +++ b/js/components/App.js @@ -14,7 +14,9 @@ function App(props) {
-
+
@@ -22,10 +24,15 @@ function App(props) {
- ) + ); } export default connect( - ({ items, releases, pageName, pageState }) => ({ items, releases, pageName, pageState }), - actions + ({ items, releases, pageName, pageState }) => ({ + items, + releases, + pageName, + pageState, + }), + actions, )(App); diff --git a/package.json b/package.json index 5fd6e96..822eda6 100644 --- a/package.json +++ b/package.json @@ -45,8 +45,8 @@ "postcss-custom-media": "^6.0.0", "postcss-easy-import": "3.0.0", "postcss-nested": "2.1.2", - "react": "15.4.2", - "react-dom": "15.4.2", + "react": "16.1.1", + "react-dom": "16.1.1", "react-redux": "5.0.6", "redux": "3.7.2", "walk": "2.3.9", diff --git a/tasks/build.js b/tasks/build.js index 90d8205..ebe6674 100644 --- a/tasks/build.js +++ b/tasks/build.js @@ -1,24 +1,19 @@ -import { - createRadar, - groupByQuadrants, - outputRadar, -} from '../common/radar'; +import { createRadar, groupByQuadrants, outputRadar } from '../common/radar'; import { save } from '../common/file'; import { getPageNames } from '../common/config'; import { renderPage } from '../js/server'; - (async () => { try { const radar = await createRadar(); - getPageNames(radar).map((pageName) => { + getPageNames(radar).map(pageName => { const pageHtml = renderPage(radar, pageName); save(pageHtml, `${pageName}.html`); }); console.log('Built radar'); - } catch(e) { + } catch (e) { console.error('error:', e); } })(); diff --git a/yarn.lock b/yarn.lock index b47f0fa..6641199 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1605,18 +1605,6 @@ faye-websocket@0.11.x: dependencies: websocket-driver ">=0.5.1" -fbjs@^0.8.1, fbjs@^0.8.4: - version "0.8.12" - resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.12.tgz#10b5d92f76d45575fd63a217d4ea02bea2f8ed04" - dependencies: - core-js "^1.0.0" - isomorphic-fetch "^2.1.1" - loose-envify "^1.0.0" - object-assign "^4.1.0" - promise "^7.1.1" - setimmediate "^1.0.5" - ua-parser-js "^0.7.9" - fbjs@^0.8.16: version "0.8.16" resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.16.tgz#5e67432f550dc41b572bf55847b8aca64e5337db" @@ -2922,7 +2910,7 @@ promise@^7.1.1: dependencies: asap "~2.0.3" -prop-types@^15.5.10: +prop-types@^15.5.10, prop-types@^15.6.0: version "15.6.0" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.0.tgz#ceaf083022fc46b4a35f69e13ef75aed0d639856" dependencies: @@ -2996,13 +2984,14 @@ rc@^1.1.7: minimist "^1.2.0" strip-json-comments "~2.0.1" -react-dom@15.4.2: - version "15.4.2" - resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.4.2.tgz#015363f05b0a1fd52ae9efdd3a0060d90695208f" +react-dom@16.1.1: + version "16.1.1" + resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.1.1.tgz#b2e331b6d752faf1a2d31399969399a41d8d45f8" dependencies: - fbjs "^0.8.1" + fbjs "^0.8.16" loose-envify "^1.1.0" - object-assign "^4.1.0" + object-assign "^4.1.1" + prop-types "^15.6.0" react-redux@5.0.6: version "5.0.6" @@ -3015,13 +3004,14 @@ react-redux@5.0.6: loose-envify "^1.1.0" prop-types "^15.5.10" -react@15.4.2: - version "15.4.2" - resolved "https://registry.yarnpkg.com/react/-/react-15.4.2.tgz#41f7991b26185392ba9bae96c8889e7e018397ef" +react@16.1.1: + version "16.1.1" + resolved "https://registry.yarnpkg.com/react/-/react-16.1.1.tgz#d5c4ef795507e3012282dd51261ff9c0e824fe1f" dependencies: - fbjs "^0.8.4" + fbjs "^0.8.16" loose-envify "^1.1.0" - object-assign "^4.1.0" + object-assign "^4.1.1" + prop-types "^15.6.0" read-cache@^1.0.0: version "1.0.0"