Move head tag utlis from src/client.js to src/core/DOMUtlis.js

docs/getting-started.md

@@ -32,11 +32,14 @@ Before you start, take a moment to see how the project structure looks like:
 │   ├── /clean.js               # Cleans up the output (build) folder
 │   ├── /copy.js                # Copies static files to output (build) folder
 │   ├── /deploy.js              # Deploys your web application
+│   ├── /postcss.config.js      # Configuration for transforming styles with PostCSS plugins
 │   ├── /run.js                 # Helper function for running build automation tasks
 │   ├── /runServer.js           # Launches (or restarts) Node.js server
 │   ├── /start.js               # Launches the development web server with "live reload"
 │   └── /webpack.config.js      # Configurations for client-side and server-side bundles
-└── package.json                # The list of 3rd party libraries and utilities
+├── Dockerfile                  # Commands for building a Docker image for production
+├── package.json                # The list of 3rd party libraries and utilities
+└── yarn.lock                   # Fixed versions of all the dependencies
 ```
 
 **Note**: The current version of RSK does not contain a Flux implementation.

src/client.js

@@ -15,6 +15,7 @@ import queryString from 'query-string';
 import { createPath } from 'history/PathUtils';
 import history from './core/history';
 import App from './components/App';
+import { updateMeta } from './core/DOMUtils';
 import { ErrorReporter, deepForceUpdate } from './core/devUtils';
 
 // Global (context) variables that can be easily accessed from any React component
@@ -29,31 +30,6 @@ const context = {
   },
 };
 
-function updateTag(tagName, keyName, keyValue, attrName, attrValue) {
-  const node = document.head.querySelector(`${tagName}[${keyName}="${keyValue}"]`);
-  if (node && node.getAttribute(attrName) === attrValue) return;
-
-  // Remove and create a new tag in order to make it work with bookmarks in Safari
-  if (node) {
-    node.parentNode.removeChild(node);
-  }
-  if (typeof attrValue === 'string') {
-    const nextNode = document.createElement(tagName);
-    nextNode.setAttribute(keyName, keyValue);
-    nextNode.setAttribute(attrName, attrValue);
-    document.head.appendChild(nextNode);
-  }
-}
-function updateMeta(name, content) {
-  updateTag('meta', 'name', name, 'content', content);
-}
-function updateCustomMeta(property, content) { // eslint-disable-line no-unused-vars
-  updateTag('meta', 'property', property, 'content', content);
-}
-function updateLink(rel, href) { // eslint-disable-line no-unused-vars
-  updateTag('link', 'rel', rel, 'href', href);
-}
-
 // Switch off the native scroll restoration behavior and handle it manually
 // https://developers.google.com/web/updates/2015/09/history-api-scroll-restoration
 const scrollPositionsHistory = {};
@@ -113,14 +89,14 @@ let currentLocation = history.location;
 let routes = require('./routes').default;
 
 // Re-render the app when window.location changes
-async function onLocationChange(location, initial) {
+async function onLocationChange(location, action) {
   // Remember the latest scroll position for the previous location
   scrollPositionsHistory[currentLocation.key] = {
     scrollX: window.pageXOffset,
     scrollY: window.pageYOffset,
   };
   // Delete stored scroll position for next page if any
-  if (history.action === 'PUSH') {
+  if (action === 'PUSH') {
     delete scrollPositionsHistory[location.key];
   }
   currentLocation = location;
@@ -160,8 +136,8 @@ async function onLocationChange(location, initial) {
 
     console.error(error); // eslint-disable-line no-console
 
-    // Avoid broken navigation in production mode by a full page reload on error
-    if (!initial && currentLocation.key === location.key) {
+    // Do a full page reload if error occurs during client-side navigation
+    if (action && currentLocation.key === location.key) {
       window.location.reload();
     }
   }
@@ -170,7 +146,7 @@ async function onLocationChange(location, initial) {
 // Handle client-side navigation by using HTML5 History API
 // For more information visit https://github.com/mjackson/history#readme
 history.listen(onLocationChange);
-onLocationChange(currentLocation, true);
+onLocationChange(currentLocation);
 
 // Handle errors that might happen after rendering
 // Display the error in full-screen for development mode

src/core/DOMUtils.js

@@ -0,0 +1,36 @@
+/**
+ * React Starter Kit (https://www.reactstarterkit.com/)
+ *
+ * Copyright © 2014-present Kriasoft, LLC. All rights reserved.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.txt file in the root directory of this source tree.
+ */
+
+export function updateTag(tagName, keyName, keyValue, attrName, attrValue) {
+  const node = document.head.querySelector(`${tagName}[${keyName}="${keyValue}"]`);
+  if (node && node.getAttribute(attrName) === attrValue) return;
+
+  // Remove and create a new tag in order to make it work with bookmarks in Safari
+  if (node) {
+    node.parentNode.removeChild(node);
+  }
+  if (typeof attrValue === 'string') {
+    const nextNode = document.createElement(tagName);
+    nextNode.setAttribute(keyName, keyValue);
+    nextNode.setAttribute(attrName, attrValue);
+    document.head.appendChild(nextNode);
+  }
+}
+
+export function updateMeta(name, content) {
+  updateTag('meta', 'name', name, 'content', content);
+}
+
+export function updateCustomMeta(property, content) {
+  updateTag('meta', 'property', property, 'content', content);
+}
+
+export function updateLink(rel, href) {
+  updateTag('link', 'rel', rel, 'href', href);
+}