refactored and correctly pass npm version component to the app as rea…

…l env with webpack

config/env.js

@@ -69,12 +69,13 @@ function getClientEnvironment(publicUrl) {
         // Useful for determining whether we’re running in production mode.
         // Most importantly, it switches React into the correct mode.
         NODE_ENV: process.env.NODE_ENV || 'development',
+        npm_package_version: process.env.npm_package_version || 'x.y.z',
         // Useful for resolving the correct path to static assets in `public`.
         // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
         // This should only be used as an escape hatch. Normally you would put
         // images into the `src` and `import` them in code to get their paths.
         PUBLIC_URL: publicUrl,
-      }
+      },
     );
   // Stringify all values so we can feed into Webpack DefinePlugin
   const stringified = {

package.json

@@ -32,8 +32,8 @@
     "whatwg-fetch": "2.0.3"
   },
   "scripts": {
-    "start": "REACT_APP_VERSION=$npm_package_version node scripts/start.js",
-    "build": "REACT_APP_VERSION=$npm_package_version node scripts/build.js",
+    "start": "node scripts/start.js",
+    "build": "node scripts/build.js",
     "lint": "eslint ./src ./tests --ext js,jsx",
     "test:scripts": "node scripts/test.js --env=jsdom",
     "test": "npm run lint && npm run test:scripts",

scripts/build.js

@@ -4,8 +4,6 @@
 process.env.BABEL_ENV = 'production';
 process.env.NODE_ENV = 'production';
 
-process.env.REACT_APP_VERSION = process.env.REACT_APP_VERSION || 'a.b.c';
-
 // Makes the script crash on unhandled rejections instead of silently
 // ignoring them. In the future, promise rejections that are not handled will
 // terminate the Node.js process with a non-zero exit code.

scripts/start.js

@@ -4,8 +4,6 @@
 process.env.BABEL_ENV = process.env.BABEL_ENV || 'development';
 process.env.NODE_ENV = process.env.NODE_ENV || 'development';
 
-process.env.REACT_APP_VERSION = process.env.REACT_APP_VERSION || 'x.y.z';
-
 console.log('Running ./scripts/start.js');
 console.log('NODE_ENV: ', process.env.NODE_ENV);
 

src/components/navigator.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 // import { Link } from 'react-router-dom';
 
-import WebPackageVersion from './web-package-version';
+import PackageVersion from './package-version';
 import SignInContainer from '../containers/navigator/sign-in';
 import SubmitASignContainer from '../containers/navigator/submit-a-sign';
 
@@ -12,7 +12,7 @@ const Navigator = () => (
         <div className="col-6">
           <a className="navbar-brand text-white tracked" href="#home">
             SignsFive
-            <WebPackageVersion />
+            <PackageVersion />
           </a>
         </div>
         <div className="col-6">

src/components/package-version.jsx

@@ -0,0 +1,29 @@
+import React, { Component } from 'react';
+
+const navStyles = {
+  fontSize: '0.5em',
+  letterSpacing: '0.2em',
+};
+
+class PackageVersion extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      version: process.env.npm_package_version,
+    };
+  }
+
+  render() {
+    return (
+      <sup>
+        <span className="badge badge-pill badge-secondary text-uppercase" style={navStyles}>
+          alpha {this.state.version}
+        </span>
+      </sup>
+    );
+  }
+}
+
+export default PackageVersion;
+

src/containers/navigator/sign-in.jsx

@@ -1,10 +1,10 @@
-import React from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 
 import { authActions } from '../../redux/modules/auth';
 
-export class SignIn extends React.Component {
+export class SignIn extends Component {
   componentWillMount() {
     this.props.loginStatus();
   }

tests/components/navigator.test.js

@@ -3,7 +3,7 @@ import { Link } from 'react-router-dom';
 
 import Navigator from '../../src/components/navigator';
 
-import WebPackageVersion from '../../src/components/web-package-version';
+import PackageVersion from '../../src/components/package-version';
 import SignInContainer from '../../src/containers/navigator/sign-in';
 import SubmitASignContainer from '../../src/containers/navigator/submit-a-sign';
 
@@ -19,8 +19,8 @@ describe('<Navigator />', () => {
     expect(wrapper.find('a').length).toBe(1);
   });
 
-  it('renders <WebPackageVersion />', () => {
-    expect(wrapper.find(WebPackageVersion).length).toBe(1);
+  it('renders <PackageVersion />', () => {
+    expect(wrapper.find(PackageVersion).length).toBe(1);
   });
 
   it('renders <SignInContainer />', () => {

tests/components/web-package-version.test.js → tests/components/package-version.test.js

@@ -1,12 +1,12 @@
 import React from 'react';
 
-import WebPackageVersion from '../../src/components/web-package-version';
+import PackageVersion from '../../src/components/package-version';
 
-describe('<WebPackageVersion />', () => {
+describe('<PackageVersion />', () => {
   let wrapper;
 
   beforeEach(() => {
-    wrapper = shallow(<WebPackageVersion />); // eslint-disable-line react/jsx-filename-extension
+    wrapper = shallow(<PackageVersion />); // eslint-disable-line react/jsx-filename-extension
   });
 
   it('renders elements', () => {