Refactor CacheBustor with render prop

Author: flexdinesh

src/App.js

@@ -6,14 +6,21 @@ class App extends Component {
   render() {
     return (
       <CacheBuster>
-        <div className="App">
-          <header className="App-header">
-            <h1>Cache Busting - Example</h1>
-            <p>
-              Bundle version - <code>v{global.appVersion}</code>.
-            </p>
-          </header>
-        </div>
+        {({ loading, isLatestVersion, refreshCacheAndReload }) => {
+          if (loading) return null;
+          if (!loading && !isLatestVersion) refreshCacheAndReload();
+
+          return (
+            <div className="App">
+              <header className="App-header">
+                <h1>Cache Busting - Example</h1>
+                <p>
+                  Bundle version - <code>v{global.appVersion}</code>.
+                </p>
+              </header>
+            </div>
+          );
+        }}
       </CacheBuster>
     );
   }

src/CacheBuster.js

@@ -1,39 +1,54 @@
 import React from 'react';
-import { semverGreaterThan } from './helper';
 import packageJson from '../package.json';
 global.appVersion = packageJson.version;
 
+// version from response - first param, local version second param
+const semverGreaterThan = (versionA, versionB) => {
+  const versionsA = versionA.split(/\./g);
+
+  const versionsB = versionB.split(/\./g);
+  while (versionsA.length || versionsB.length) {
+    const a = Number(versionsA.shift());
+
+    const b = Number(versionsB.shift());
+    // eslint-disable-next-line no-continue
+    if (a === b) continue;
+    // eslint-disable-next-line no-restricted-globals
+    return a > b || isNaN(b);
+  }
+  return false;
+};
+
 class CacheBuster extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      isAppReady: false
+      loading: true,
+      isLatestVersion: false,
+      refreshCacheAndReload: () => window.location.reload(true)
     };
   }
 
   componentDidMount() {
     fetch('/meta.json')
       .then((response) => response.json())
       .then((meta) => {
-        console.log({ meta });
         const latestVersion = meta.version;
         const currentVersion = global.appVersion;
 
         const shouldForceRefresh = semverGreaterThan(latestVersion, currentVersion);
         if (shouldForceRefresh) {
-          console.log(`We have a new version - ${latestVersion}. Going to force refresh`);
-          window.location.reload(true);
+          console.log(`We have a new version - ${latestVersion}. Should force refresh`);
+          this.setState({ loading: false, isLatestVersion: false });
         } else {
           console.log(`You already have the latest version - ${latestVersion}. No cache refresh needed.`);
+          this.setState({ loading: false, isLatestVersion: true });
         }
-
-        this.setState({ isAppReady: true });
       });
   }
   render() {
-    const { isAppReady } = this.state;
-    if (!isAppReady) return null;
-    return this.props.children;
+    const { loading, isLatestVersion, refreshCacheAndReload } = this.state;
+    return this.props.children({ loading, isLatestVersion, refreshCacheAndReload });
   }
 }