Upgrade react, react-dom and isomorphic-style-loader

docs/react-style-guide.md

@@ -6,21 +6,21 @@
 
 ### Table of Contents
 
-* [Separate folder per UI component](#separate-folder-per-ui-component)
-* [Prefer using functional components](#prefer-using-functional-components)
-* [Use CSS Modules](#use-css-modules)
-* [Use higher-order components](#use-higher-order-components)
+- [Separate folder per UI component](#separate-folder-per-ui-component)
+- [Prefer using functional components](#prefer-using-functional-components)
+- [Use CSS Modules](#use-css-modules)
+- [Use higher-order components](#use-higher-order-components)
 
 ### Separate folder per UI component
 
-* Place each major UI component along with its resources in a separate folder\
+- Place each major UI component along with its resources in a separate folder\
   This will make it easier to find related resources for any particular UI element
   (CSS, images, unit tests, localization files etc.). Removing such components during
   refactorings should also be easy.
-* Avoid having CSS, images and other resource files shared between multiple
+- Avoid having CSS, images and other resource files shared between multiple
   components.\
   This will make your code more maintainable, easy to refactor.
-* Add `package.json` file into each component's folder.\
+- Add `package.json` file into each component's folder.\
   This will allow to easily reference such components from other places in your code.\
   Use `import Nav from '../Navigation'` instead of `import Nav from '../Navigation/Navigation.js'`
 
@@ -46,7 +46,7 @@ For more information google for
 
 ### Prefer using functional components
 
-* Prefer using stateless functional components whenever possible.\
+- Prefer using stateless functional components whenever possible.\
   Components that don't use state are better to be written as simple pure functions.
 
 ```jsx
@@ -69,16 +69,16 @@ Navigation.propTypes = { items: PropTypes.array.isRequired };
 
 ### Use CSS Modules
 
-* Use CSS Modules\
+- Use CSS Modules\
   This will allow using short CSS class names and at the same time avoid conflicts.
-* Keep CSS simple and declarative. Avoid loops, mixins etc.
-* Feel free to use variables in CSS via
+- Keep CSS simple and declarative. Avoid loops, mixins etc.
+- Feel free to use variables in CSS via
   [precss](https://github.com/jonathantneal/precss) plugin for
   [PostCSS](https://github.com/postcss/postcss)
-* Prefer CSS class selectors instead of element and `id` selectors (see
+- Prefer CSS class selectors instead of element and `id` selectors (see
   [BEM](https://bem.info/))
-* Avoid nested CSS selectors (see [BEM](https://bem.info/))
-* When in doubt, use `.root { }` class name for the root elements of your
+- Avoid nested CSS selectors (see [BEM](https://bem.info/))
+- When in doubt, use `.root { }` class name for the root elements of your
   components
 
 ```scss
@@ -127,7 +127,7 @@ Navigation.propTypes = { items: PropTypes.array.isRequired };
 // Navigation.js
 import React from 'react';
 import PropTypes from 'prop-types';
-import withStyles from 'isomorphic-style-loader/lib/withStyles';
+import withStyles from 'isomorphic-style-loader/withStyles';
 import s from './Navigation.scss';
 
 function Navigation() {
@@ -156,7 +156,7 @@ export default withStyles(Navigation, s);
 
 ### Use higher-order components
 
-* Use higher-order components (HOC) to extend existing React components.\
+- Use higher-order components (HOC) to extend existing React components.\
   Here is an example:
 
 ```js

package.json

@@ -22,7 +22,7 @@
     "express-jwt": "^5.3.1",
     "graphql": "^0.13.2",
     "history": "^4.7.2",
-    "isomorphic-style-loader": "^4.0.0",
+    "isomorphic-style-loader": "^5.1.0",
     "jsonwebtoken": "^8.3.0",
     "node-fetch": "^2.2.0",
     "normalize.css": "^8.0.0",
@@ -31,8 +31,8 @@
     "pretty-error": "^2.1.1",
     "prop-types": "^15.6.2",
     "query-string": "^6.1.0",
-    "react": "^16.5.2",
-    "react-dom": "^16.5.2",
+    "react": "^16.11.0",
+    "react-dom": "^16.11.0",
     "sequelize": "^5.15.1",
     "serialize-javascript": "^1.5.0",
     "source-map-support": "^0.5.9",
@@ -96,7 +96,7 @@
     "react-deep-force-update": "^2.1.3",
     "react-dev-utils": "^5.0.2",
     "react-error-overlay": "^4.0.1",
-    "react-test-renderer": "^16.5.2",
+    "react-test-renderer": "^16.11.0",
     "rimraf": "^2.6.2",
     "stylelint": "^9.5.0",
     "stylelint-config-standard": "^18.2.0",

src/client.js

@@ -19,18 +19,19 @@ import history from './history';
 import { updateMeta } from './DOMUtils';
 import router from './router';
 
+// Enables critical path CSS rendering
+// https://github.com/kriasoft/isomorphic-style-loader
+const insertCss = (...styles) => {
+  // eslint-disable-next-line no-underscore-dangle
+  const removeCss = styles.map(x => x._insertCss());
+  return () => {
+    removeCss.forEach(f => f());
+  };
+};
+
 // Global (context) variables that can be easily accessed from any React component
 // https://facebook.github.io/react/docs/context.html
 const context = {
-  // Enables critical path CSS rendering
-  // https://github.com/kriasoft/isomorphic-style-loader
-  insertCss: (...styles) => {
-    // eslint-disable-next-line no-underscore-dangle
-    const removeCss = styles.map(x => x._insertCss());
-    return () => {
-      removeCss.forEach(f => f());
-    };
-  },
   // Universal HTTP client
   fetch: createFetch(fetch, {
     baseUrl: window.App.apiUrl,
@@ -78,7 +79,9 @@ async function onLocationChange(location, action) {
 
     const renderReactApp = isInitialRender ? ReactDOM.hydrate : ReactDOM.render;
     appInstance = renderReactApp(
-      <App context={context}>{route.component}</App>,
+      <App context={context} insertCss={insertCss}>
+        {route.component}
+      </App>,
       container,
       () => {
         if (isInitialRender) {

src/components/App.js

@@ -10,10 +10,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import StyleContext from 'isomorphic-style-loader/StyleContext';
+import ApplicationContext from './ApplicationContext';
+
 const ContextType = {
-  // Enables critical path CSS rendering
-  // https://github.com/kriasoft/isomorphic-style-loader
-  insertCss: PropTypes.func.isRequired,
   // Universal HTTP client
   fetch: PropTypes.func.isRequired,
   pathname: PropTypes.string.isRequired,
@@ -44,20 +44,25 @@ const ContextType = {
  */
 class App extends React.PureComponent {
   static propTypes = {
+    // Enables critical path CSS rendering
+    // https://github.com/kriasoft/isomorphic-style-loader
+    insertCss: PropTypes.func.isRequired,
     context: PropTypes.shape(ContextType).isRequired,
     children: PropTypes.element.isRequired,
   };
 
-  static childContextTypes = ContextType;
-
-  getChildContext() {
-    return this.props.context;
-  }
-
   render() {
+    const { context, insertCss } = this.props;
+
     // NOTE: If you need to add or modify header, footer etc. of the app,
     // please do that inside the Layout component.
-    return React.Children.only(this.props.children);
+    return (
+      <StyleContext.Provider value={{ insertCss }}>
+        <ApplicationContext.Provider value={{ context }}>
+          {React.Children.only(this.props.children)}
+        </ApplicationContext.Provider>
+      </StyleContext.Provider>
+    );
   }
 }
 

src/components/ApplicationContext.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const ApplicationContext = React.createContext({
+  fetch: () => {
+    throw new Error('Fetch method not initialized.');
+  },
+});
+
+export default ApplicationContext;

src/components/Feedback/Feedback.js

@@ -8,7 +8,7 @@
  */
 
 import React from 'react';
-import withStyles from 'isomorphic-style-loader/lib/withStyles';
+import withStyles from 'isomorphic-style-loader/withStyles';
 import s from './Feedback.css';
 
 class Feedback extends React.Component {

src/components/Footer/Footer.js

@@ -8,7 +8,7 @@
  */
 
 import React from 'react';
-import withStyles from 'isomorphic-style-loader/lib/withStyles';
+import withStyles from 'isomorphic-style-loader/withStyles';
 import s from './Footer.css';
 import Link from '../Link';
 

src/components/Header/Header.js

@@ -8,7 +8,7 @@
  */
 
 import React from 'react';
-import withStyles from 'isomorphic-style-loader/lib/withStyles';
+import withStyles from 'isomorphic-style-loader/withStyles';
 import s from './Header.css';
 import Link from '../Link';
 import Navigation from '../Navigation';

src/components/Layout/Layout.js

@@ -9,7 +9,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import withStyles from 'isomorphic-style-loader/lib/withStyles';
+import withStyles from 'isomorphic-style-loader/withStyles';
 
 // external-global styles must be imported in your JS.
 import normalizeCss from 'normalize.css';

src/components/Layout/Layout.test.js

@@ -19,7 +19,7 @@ describe('Layout', () => {
   test('renders children correctly', () => {
     const wrapper = renderer
       .create(
-        <App context={{ insertCss: () => {}, fetch: () => {}, pathname: '' }}>
+        <App context={{ fetch: () => {}, pathname: '' }} insertCss={() => {}}>
           <Layout>
             <div className="child" />
           </Layout>

src/components/Navigation/Navigation.js

@@ -9,7 +9,7 @@
 
 import React from 'react';
 import cx from 'classnames';
-import withStyles from 'isomorphic-style-loader/lib/withStyles';
+import withStyles from 'isomorphic-style-loader/withStyles';
 import s from './Navigation.css';
 import Link from '../Link';
 

src/components/Page/Page.js

@@ -9,7 +9,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import withStyles from 'isomorphic-style-loader/lib/withStyles';
+import withStyles from 'isomorphic-style-loader/withStyles';
 import s from './Page.css';
 
 class Page extends React.Component {

src/routes/admin/Admin.js

@@ -9,7 +9,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import withStyles from 'isomorphic-style-loader/lib/withStyles';
+import withStyles from 'isomorphic-style-loader/withStyles';
 import s from './Admin.css';
 
 class Admin extends React.Component {

src/routes/contact/Contact.js

@@ -9,7 +9,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import withStyles from 'isomorphic-style-loader/lib/withStyles';
+import withStyles from 'isomorphic-style-loader/withStyles';
 import s from './Contact.css';
 
 class Contact extends React.Component {

src/routes/error/ErrorPage.js

@@ -9,7 +9,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import withStyles from 'isomorphic-style-loader/lib/withStyles';
+import withStyles from 'isomorphic-style-loader/withStyles';
 import s from './ErrorPage.css';
 
 class ErrorPage extends React.Component {

src/routes/home/Home.js

@@ -9,7 +9,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import withStyles from 'isomorphic-style-loader/lib/withStyles';
+import withStyles from 'isomorphic-style-loader/withStyles';
 import s from './Home.css';
 
 class Home extends React.Component {

src/routes/login/Login.js

@@ -9,7 +9,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import withStyles from 'isomorphic-style-loader/lib/withStyles';
+import withStyles from 'isomorphic-style-loader/withStyles';
 import s from './Login.css';
 
 class Login extends React.Component {

src/routes/not-found/NotFound.js

@@ -9,7 +9,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import withStyles from 'isomorphic-style-loader/lib/withStyles';
+import withStyles from 'isomorphic-style-loader/withStyles';
 import s from './NotFound.css';
 
 class NotFound extends React.Component {

src/routes/register/Register.js

@@ -9,7 +9,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import withStyles from 'isomorphic-style-loader/lib/withStyles';
+import withStyles from 'isomorphic-style-loader/withStyles';
 import s from './Register.css';
 
 class Register extends React.Component {

src/server.js

@@ -143,7 +143,6 @@ app.get('*', async (req, res, next) => {
     // Global (context) variables that can be easily accessed from any React component
     // https://facebook.github.io/react/docs/context.html
     const context = {
-      insertCss,
       fetch,
       // The twins below are wild, be careful!
       pathname: req.path,
@@ -159,7 +158,9 @@ app.get('*', async (req, res, next) => {
 
     const data = { ...route };
     data.children = ReactDOM.renderToString(
-      <App context={context}>{route.component}</App>,
+      <App context={context} insertCss={insertCss}>
+        {route.component}
+      </App>,
     );
     data.styles = [{ id: 'css', cssText: [...css].join('') }];