From 3699f4089cbf6f869468997cad6c3e36720f8ef1 Mon Sep 17 00:00:00 2001
From: Josh Ellis <joshua.ellis18@gmail.com>
Date: Sun, 5 Jan 2020 17:26:43 +0000
Subject: [PATCH 1/3] move infobar to own component

---
 src/components/InfoBar/InfoBar.js | 53 +++++++++++++++++++++++++++++++
 src/components/InfoBar/index.js   |  2 ++
 2 files changed, 55 insertions(+)
 create mode 100644 src/components/InfoBar/InfoBar.js
 create mode 100644 src/components/InfoBar/index.js

diff --git a/src/components/InfoBar/InfoBar.js b/src/components/InfoBar/InfoBar.js
new file mode 100644
index 00000000..01362c13
--- /dev/null
+++ b/src/components/InfoBar/InfoBar.js
@@ -0,0 +1,53 @@
+// @flow
+import React, { PureComponent } from 'react';
+import styled from 'styled-components';
+
+import { RAW_COLORS, Z_INDICES } from '../../constants';
+
+type Props = {
+  children: string,
+};
+
+class InfoBar extends PureComponent<Props> {
+  render() {
+    const { children } = this.props;
+    return (
+      <Container>
+        <SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+          <path d="M10.9,1H5.1L1,5.1v5.8L5.1,15h5.8L15,10.9V5.1ZM9,12H7V10H9ZM9,9H7V4H9Z" />
+          <rect
+            width="16"
+            height="16"
+            style={{
+              fill: 'none',
+            }}
+          />
+        </SVG>
+        <p>{children}</p>
+      </Container>
+    );
+  }
+}
+
+const Container = styled.div`
+  width: 100vw;
+  display: flex;
+  justify-content: center;
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: ${Z_INDICES.infoBanner};
+  background-color: ${RAW_COLORS.transparentWhite[100]};
+  padding: 16px;
+  align-content: center;
+  box-shadow: 0px 2px 2px 0px ${RAW_COLORS.transparentBlack[900]};
+`;
+
+const SVG = styled.svg`
+  width: 16px;
+  height: 16px;
+  fill: ${RAW_COLORS.red[500]};
+  margin: 2px 8px;
+`;
+
+export default InfoBar;
diff --git a/src/components/InfoBar/index.js b/src/components/InfoBar/index.js
new file mode 100644
index 00000000..9edc2732
--- /dev/null
+++ b/src/components/InfoBar/index.js
@@ -0,0 +1,2 @@
+// @flow
+export { default } from './InfoBar';

From 3cda319f80891b1090ec795640aaf1f0d044adc7 Mon Sep 17 00:00:00 2001
From: Josh Ellis <joshua.ellis18@gmail.com>
Date: Sun, 5 Jan 2020 17:27:51 +0000
Subject: [PATCH 2/3] Edit onlineChecker & add logic for node version checking

---
 src/actions/index.js                          | 26 ++++++---
 src/components/App/App.js                     |  7 ++-
 .../AppSettingsModal/AppSettingsModal.js      |  1 +
 .../CreateNewProjectWizard.js                 | 24 +++++++-
 .../CreateNewProjectWizard/MainPane.js        | 12 +++-
 src/components/OnlineChecker/OnlineChecker.js | 57 +++++--------------
 .../ProjectTypeSelection.js                   | 52 ++++++++++++++++-
 src/config/app.js                             |  2 +-
 src/reducers/app-status.reducer.js            | 23 ++++++++
 9 files changed, 150 insertions(+), 54 deletions(-)

diff --git a/src/actions/index.js b/src/actions/index.js
index 1c5202d0..ac86540b 100644
--- a/src/actions/index.js
+++ b/src/actions/index.js
@@ -15,7 +15,6 @@ import type {
 //
 // Action Types
 //
-export const SET_ONLINE_STATUS = 'SET_ONLINE_STATUS';
 export const REFRESH_PROJECTS_START = 'REFRESH_PROJECTS_START';
 export const REFRESH_PROJECTS_ERROR = 'REFRESH_PROJECTS_ERROR';
 export const REFRESH_PROJECTS_FINISH = 'REFRESH_PROJECTS_FINISH';
@@ -50,8 +49,6 @@ export const DELETE_DEPENDENCY = 'DELETE_DEPENDENCY';
 export const INSTALL_DEPENDENCIES_START = 'INSTALL_DEPENDENCIES_START';
 export const INSTALL_DEPENDENCIES_ERROR = 'INSTALL_DEPENDENCIES_ERROR';
 export const INSTALL_DEPENDENCIES_FINISH = 'INSTALL_DEPENDENCIES_FINISH';
-export const REINSTALL_DEPENDENCIES_START = 'REINSTALL_DEPENDENCIES_START';
-export const REINSTALL_DEPENDENCIES_FINISH = 'REINSTALL_DEPENDENCIES_FINISH';
 export const REINSTALL_DEPENDENCIES_ERROR = 'REINSTALL_DEPENDENCIES_ERROR';
 export const UNINSTALL_DEPENDENCIES_START = 'UNINSTALL_DEPENDENCIES_START';
 export const UNINSTALL_DEPENDENCIES_ERROR = 'UNINSTALL_DEPENDENCIES_ERROR';
@@ -66,9 +63,6 @@ export const IMPORT_EXISTING_PROJECT_START = 'IMPORT_EXISTING_PROJECT_START';
 export const IMPORT_EXISTING_PROJECT_ERROR = 'IMPORT_EXISTING_PROJECT_ERROR';
 export const IMPORT_EXISTING_PROJECT_FINISH = 'IMPORT_EXISTING_PROJECT_FINISH';
 export const SHOW_DELETE_PROJECT_PROMPT = 'SHOW_DELETE_PROJECT_PROMPT';
-export const START_DELETING_PROJECT = 'START_DELETING_PROJECT';
-export const FINISH_DELETING_PROJECT = 'FINISH_DELETING_PROJECT';
-export const DELETE_PROJECT_ERROR = 'DELETE_PROJECT_ERROR';
 export const SHOW_RESET_STATE_PROMPT = 'SHOW_RESET_STATE_PROMPT';
 export const RESET_ALL_STATE = 'RESET_ALL_STATE';
 
@@ -83,9 +77,17 @@ export const SHOW_APP_SETTINGS = 'SHOW_APP_SETTINGS';
 export const SAVE_APP_SETTINGS_START = 'SAVE_APP_SETTINGS_START';
 export const CHANGE_DEFAULT_PROJECT_PATH = 'CHANGE_DEFAULT_PROJECT_PATH';
 
-// Status text for loading screen
+// App status
+export const START_DELETING_PROJECT = 'START_DELETING_PROJECT';
+export const FINISH_DELETING_PROJECT = 'FINISH_DELETING_PROJECT';
+export const DELETE_PROJECT_ERROR = 'DELETE_PROJECT_ERROR';
+export const REINSTALL_DEPENDENCIES_START = 'REINSTALL_DEPENDENCIES_START';
+export const REINSTALL_DEPENDENCIES_FINISH = 'REINSTALL_DEPENDENCIES_FINISH';
 export const SET_STATUS_TEXT = 'SET_STATUS_TEXT';
 export const RESET_STATUS_TEXT = 'RESET_STATUS_TEXT';
+export const SET_ONLINE_STATUS = 'SET_ONLINE_STATUS';
+export const SET_INFO_BAR_STRING = 'SET_INFO_BAR_STRING';
+export const SET_INCORRECT_NODE = 'SET_INCORRECT_NODE';
 
 //
 //
@@ -96,6 +98,16 @@ export const setOnlineStatus = (onlineStatus: boolean) => ({
   onlineStatus,
 });
 
+export const setInfoBarString = (string: ?string) => ({
+  type: SET_INFO_BAR_STRING,
+  infoBarString: string,
+});
+
+export const setIncorrectNode = (bool: boolean) => ({
+  type: SET_INCORRECT_NODE,
+  incorrectNode: bool,
+});
+
 export const addProject = (
   project: ProjectInternal,
   projectHomePath: string,
diff --git a/src/components/App/App.js b/src/components/App/App.js
index 4ee82648..c3f0be2d 100644
--- a/src/components/App/App.js
+++ b/src/components/App/App.js
@@ -6,6 +6,7 @@ import { Scrollbars } from 'react-custom-scrollbars';
 
 import { COLORS } from '../../constants';
 import { getSelectedProjectId } from '../../reducers/projects.reducer';
+import { getInfoBarState } from '../../reducers/app-status.reducer';
 
 import IntroScreen from '../IntroScreen';
 import Sidebar from '../Sidebar';
@@ -19,6 +20,7 @@ import Initialization from '../Initialization';
 import LoadingScreen from '../LoadingScreen';
 import FeedbackButton from '../FeedbackButton';
 import OnlineChecker from '../OnlineChecker';
+import InfoBar from '../InfoBar';
 import { isMac } from '../../services/platform.service';
 
 import type { Project } from '../../types';
@@ -26,17 +28,19 @@ import type { Project } from '../../types';
 type Props = {
   selectedProjectId: ?Project,
   modalVisible: boolean,
+  infoBarString: ?string,
 };
 
 class App extends PureComponent<Props> {
   render() {
-    const { selectedProjectId, modalVisible } = this.props;
+    const { selectedProjectId, modalVisible, infoBarString } = this.props;
     return (
       <Initialization>
         {wasSuccessfullyInitialized =>
           wasSuccessfullyInitialized && (
             <Fragment>
               <OnlineChecker />
+              {infoBarString && <InfoBar>{infoBarString}</InfoBar>}
               {isMac && <Titlebar />}
               <Wrapper>
                 <ApplicationMenu />
@@ -93,6 +97,7 @@ const MainContent = styled.div`
 const mapStateToProps = state => ({
   selectedProjectId: getSelectedProjectId(state),
   modalVisible: !!state.modal,
+  infoBarString: getInfoBarState(state),
 });
 
 export default connect(mapStateToProps)(App);
diff --git a/src/components/AppSettingsModal/AppSettingsModal.js b/src/components/AppSettingsModal/AppSettingsModal.js
index c26adf42..4551cc9b 100644
--- a/src/components/AppSettingsModal/AppSettingsModal.js
+++ b/src/components/AppSettingsModal/AppSettingsModal.js
@@ -123,6 +123,7 @@ export class AppSettingsModal extends PureComponent<Props, State> {
                       projectType
                     );
                   }}
+                  handleIncorrectNodeVersion={() => console.log('write func')}
                 />
               </FormField>
             </PixelShifter>
diff --git a/src/components/CreateNewProjectWizard/CreateNewProjectWizard.js b/src/components/CreateNewProjectWizard/CreateNewProjectWizard.js
index 46b86fcf..e38603b4 100644
--- a/src/components/CreateNewProjectWizard/CreateNewProjectWizard.js
+++ b/src/components/CreateNewProjectWizard/CreateNewProjectWizard.js
@@ -10,7 +10,10 @@ import {
   getDefaultProjectPath,
 } from '../../reducers/app-settings.reducer';
 import { getById } from '../../reducers/projects.reducer';
-import { getOnlineState } from '../../reducers/app-status.reducer';
+import {
+  getOnlineState,
+  getIncorrectNodeState,
+} from '../../reducers/app-status.reducer';
 import { getOnboardingCompleted } from '../../reducers/onboarding-status.reducer';
 import { getProjectNameSlug } from '../../services/create-project.service';
 import { checkIfProjectExists } from '../../services/create-project.service';
@@ -73,7 +76,10 @@ type Props = {
   addProject: Dispatch<typeof actions.addProject>,
   createNewProjectCancel: Dispatch<typeof actions.createNewProjectCancel>,
   createNewProjectFinish: Dispatch<typeof actions.createNewProjectFinish>,
+  setInfoBarString: Dispatch<typeof actions.setInfoBarString>,
+  setIncorrectNode: Dispatch<typeof actions.setIncorrectNode>,
   isOnline: boolean,
+  incorrectNode: boolean,
 };
 
 type State = {
@@ -188,6 +194,16 @@ export class CreateNewProjectWizard extends PureComponent<Props, State> {
     }
   };
 
+  handleIncorrectNodeVersion = (str: ?string) => {
+    const { setInfoBarString, setIncorrectNode } = this.props;
+    setInfoBarString(str);
+    if (str) {
+      setIncorrectNode(true);
+    } else {
+      setIncorrectNode(false);
+    }
+  };
+
   handleSubmit = () => {
     const currentStepIndex = FORM_STEPS.indexOf(this.state.currentStep);
     const nextStep = FORM_STEPS[currentStepIndex + 1];
@@ -254,6 +270,7 @@ export class CreateNewProjectWizard extends PureComponent<Props, State> {
       createNewProjectCancel,
       projectHomePath,
       isOnline,
+      incorrectNode,
     } = this.props;
     const {
       projectName,
@@ -305,6 +322,8 @@ export class CreateNewProjectWizard extends PureComponent<Props, State> {
                   hasBeenSubmitted={status !== 'filling-in-form'}
                   isProjectNameTaken={isProjectNameTaken}
                   isOnline={isOnline}
+                  incorrectNode={incorrectNode}
+                  handleIncorrectNodeVersion={this.handleIncorrectNodeVersion}
                 />
               }
               backface={
@@ -330,12 +349,15 @@ const mapStateToProps = state => ({
   isOnboardingCompleted: getOnboardingCompleted(state),
   settings: getAppSettings(state),
   isOnline: getOnlineState(state),
+  incorrectNode: getIncorrectNodeState(state),
 });
 
 const mapDispatchToProps = {
   addProject: actions.addProject,
   createNewProjectCancel: actions.createNewProjectCancel,
   createNewProjectFinish: actions.createNewProjectFinish,
+  setInfoBarString: actions.setInfoBarString,
+  setIncorrectNode: actions.setIncorrectNode,
 };
 
 export default connect(
diff --git a/src/components/CreateNewProjectWizard/MainPane.js b/src/components/CreateNewProjectWizard/MainPane.js
index fbaf6ff3..75eedbbf 100644
--- a/src/components/CreateNewProjectWizard/MainPane.js
+++ b/src/components/CreateNewProjectWizard/MainPane.js
@@ -30,6 +30,8 @@ type Props = {
   focusField: (field: ?Field) => void,
   handleSubmit: () => Promise<any> | void,
   isOnline: boolean,
+  incorrectNode: boolean,
+  handleIncorrectNodeVersion: (str: ?string) => void,
 };
 
 class MainPane extends PureComponent<Props> {
@@ -67,7 +69,12 @@ class MainPane extends PureComponent<Props> {
   }
 
   renderConditionalSteps(currentStepIndex: number) {
-    const { activeField, projectType, projectIcon } = this.props;
+    const {
+      activeField,
+      projectType,
+      projectIcon,
+      handleIncorrectNodeVersion,
+    } = this.props;
     const steps: Array<?React$Node> = [];
     let lastIndex = 2;
 
@@ -89,6 +96,7 @@ class MainPane extends PureComponent<Props> {
               onProjectTypeSelect={selectedProjectType =>
                 this.updateProjectType(selectedProjectType)
               }
+              handleIncorrectNodeVersion={handleIncorrectNodeVersion}
             />
           </FormField>
         </FadeIn>
@@ -143,6 +151,7 @@ class MainPane extends PureComponent<Props> {
       isProjectNameTaken,
       handleSubmit,
       isOnline,
+      incorrectNode,
     } = this.props;
 
     const { lastIndex, steps } = this.renderConditionalSteps(currentStepIndex);
@@ -178,6 +187,7 @@ class MainPane extends PureComponent<Props> {
             isDisabled={
               isProjectNameTaken ||
               !projectName ||
+              incorrectNode ||
               this.isSubmitDisabled(currentStepIndex, lastIndex)
             }
             isOnline={isOnline}
diff --git a/src/components/OnlineChecker/OnlineChecker.js b/src/components/OnlineChecker/OnlineChecker.js
index ecd8f632..dbf32744 100644
--- a/src/components/OnlineChecker/OnlineChecker.js
+++ b/src/components/OnlineChecker/OnlineChecker.js
@@ -5,8 +5,6 @@
 */
 import React from 'react';
 import { connect } from 'react-redux';
-import styled from 'styled-components';
-import { RAW_COLORS, Z_INDICES } from '../../constants';
 
 import * as actions from '../../actions';
 import { getOnlineState } from '../../reducers/app-status.reducer';
@@ -16,64 +14,38 @@ import type { Dispatch } from '../../actions/types';
 type Props = {
   isOnline: boolean,
   setOnlineStatus: Dispatch<typeof actions.setOnlineStatus>,
+  setInfoBarString: Dispatch<typeof actions.setInfoBarString>,
 };
 
+const OFFLINE_STRING =
+  'You are currently offline, some functions will not be available';
+
 class OnlineChecker extends React.PureComponent<Props> {
   componentDidMount() {
     window.addEventListener('online', this.check);
     window.addEventListener('offline', this.check);
   }
+
   check = () => {
-    this.props.setOnlineStatus(navigator.onLine);
+    const { setOnlineStatus, setInfoBarString } = this.props;
+    setOnlineStatus(navigator.onLine);
+    if (!navigator.onLine) {
+      setInfoBarString(OFFLINE_STRING);
+    } else {
+      setInfoBarString(null);
+    }
   };
+
   componentWillUnmount() {
     window.removeEventListener('online', this.check);
     window.removeEventListener('offline', this.check);
   }
+
   render() {
-    const { isOnline } = this.props;
-    if (!isOnline) {
-      return (
-        <InfoBar>
-          <SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
-            <path d="M10.9,1H5.1L1,5.1v5.8L5.1,15h5.8L15,10.9V5.1ZM9,12H7V10H9ZM9,9H7V4H9Z" />
-            <rect
-              width="16"
-              height="16"
-              style={{
-                fill: 'none',
-              }}
-            />
-          </SVG>
-          <p>You are currently offline, some functions will not be available</p>
-        </InfoBar>
-      );
-    }
     return null;
   }
 }
 
-const InfoBar = styled.div`
-  width: 100vw;
-  display: flex;
-  justify-content: center;
-  position: fixed;
-  left: 0;
-  top: 0;
-  z-index: ${Z_INDICES.infoBanner};
-  background-color: ${RAW_COLORS.transparentWhite[100]};
-  padding: 16px;
-  align-content: center;
-  box-shadow: 0px 2px 2px 0px ${RAW_COLORS.transparentBlack[900]};
-`;
-
-const SVG = styled.svg`
-  width: 16px;
-  height: 16px;
-  fill: ${RAW_COLORS.red[500]};
-  margin: 2px 8px;
-`;
-
 const mapStateToProps = state => ({
   isOnline: getOnlineState(state),
 });
@@ -82,5 +54,6 @@ export default connect(
   mapStateToProps,
   {
     setOnlineStatus: actions.setOnlineStatus,
+    setInfoBarString: actions.setInfoBarString,
   }
 )(OnlineChecker);
diff --git a/src/components/ProjectTypeSelection/ProjectTypeSelection.js b/src/components/ProjectTypeSelection/ProjectTypeSelection.js
index 4443725e..6718da2b 100644
--- a/src/components/ProjectTypeSelection/ProjectTypeSelection.js
+++ b/src/components/ProjectTypeSelection/ProjectTypeSelection.js
@@ -10,12 +10,59 @@ import type { ProjectType } from '../../types';
 type Props = {
   projectType: ?ProjectType,
   onProjectTypeSelect: (projectType: ProjectType) => void,
+  handleIncorrectNodeVersion: (str: ?string) => void,
 };
 
+const INCORRECT_NODE_STRING =
+  'You do not have the correct version of node installed, node version required:';
+
 class ProjectTypeSelection extends PureComponent<Props> {
+  componentDidMount() {
+    const { projectType, handleIncorrectNodeVersion } = this.props;
+    if (projectType && !this.testNodeVersion(projectType)) {
+      const [project] = mapProjectTypeToComponent.filter(
+        x => x.type === projectType
+      );
+      handleIncorrectNodeVersion(`${INCORRECT_NODE_STRING} ${project.nodeReq}`);
+    }
+  }
+
+  testNodeVersion = (projectType: ProjectType) => {
+    const currentNode = window.process.env.npm_config_node_version
+      .split('.')
+      .map(Number);
+    const [project] = mapProjectTypeToComponent.filter(
+      x => x.type === projectType
+    );
+    const requiredNode = project.nodeReq.split('.').map(Number);
+
+    for (let i = 0; i < currentNode.length; i += 1) {
+      if (currentNode[i] > requiredNode[i]) {
+        return true;
+      }
+      if (currentNode[i] < requiredNode[i]) {
+        return false;
+      }
+    }
+
+    return true;
+  };
+
   select = (ev: SyntheticEvent<*>, projectType: ProjectType) => {
     ev.preventDefault();
-    this.props.onProjectTypeSelect(projectType);
+    const { onProjectTypeSelect, handleIncorrectNodeVersion } = this.props;
+
+    const [project] = mapProjectTypeToComponent.filter(
+      x => x.type === projectType
+    );
+
+    if (!this.testNodeVersion(projectType)) {
+      handleIncorrectNodeVersion(`${INCORRECT_NODE_STRING} ${project.nodeReq}`);
+    } else {
+      handleIncorrectNodeVersion(null);
+    }
+
+    onProjectTypeSelect(projectType);
   };
 
   render() {
@@ -51,16 +98,19 @@ const mapProjectTypeToComponent = [
     type: 'create-react-app',
     Component: ReactIcon,
     caption: 'Vanilla React',
+    nodeReq: '8.16.0',
   },
   {
     type: 'gatsby',
     Component: GatsbyIcon,
     caption: 'Gatsby',
+    nodeReq: '8.0.0',
   },
   {
     type: 'nextjs',
     Component: NextjsIcon,
     caption: 'Next.js',
+    nodeReq: '10.0.0',
   },
 ];
 
diff --git a/src/config/app.js b/src/config/app.js
index 490d947d..7fa09a1a 100644
--- a/src/config/app.js
+++ b/src/config/app.js
@@ -4,5 +4,5 @@ module.exports = {
   IN_APP_FEEDBACK_URL: 'https://guppy.nolt.io',
   PACKAGE_MANAGER: 'yarn',
   // Enable logging, if enabled all terminal responses are visible in the console (useful for debugging)
-  LOGGING: false,
+  LOGGING: true,
 };
diff --git a/src/reducers/app-status.reducer.js b/src/reducers/app-status.reducer.js
index e121fdc4..b31f5fea 100644
--- a/src/reducers/app-status.reducer.js
+++ b/src/reducers/app-status.reducer.js
@@ -8,6 +8,8 @@ import {
   SET_STATUS_TEXT,
   RESET_STATUS_TEXT,
   SET_ONLINE_STATUS,
+  SET_INFO_BAR_STRING,
+  SET_INCORRECT_NODE,
 } from '../actions';
 
 import type { Action } from '../actions/types';
@@ -16,12 +18,15 @@ type State = {
   blockingActionActive: boolean,
   statusText: string,
   onlineStatus: boolean,
+  infoBarString: ?String,
 };
 
 export const initialState = {
   blockingActionActive: false,
   statusText: 'Please wait...',
   onlineStatus: navigator.onLine,
+  infoBarString: null,
+  incorrectNode: false,
 };
 
 export default (state: State = initialState, action: Action = {}) => {
@@ -63,6 +68,19 @@ export default (state: State = initialState, action: Action = {}) => {
         ...state,
         onlineStatus: action.onlineStatus,
       };
+
+    case SET_INFO_BAR_STRING:
+      return {
+        ...state,
+        infoBarString: action.infoBarString,
+      };
+
+    case SET_INCORRECT_NODE:
+      return {
+        ...state,
+        incorrectNode: action.incorrectNode,
+      };
+
     default:
       return initialState;
   }
@@ -81,3 +99,8 @@ export const getReinstallingActive = (state: any) =>
   state.appStatus.reinstallingActive;
 
 export const getOnlineState = (state: any) => state.appStatus.onlineStatus;
+
+export const getInfoBarState = (state: any) => state.appStatus.infoBarString;
+
+export const getIncorrectNodeState = (state: any) =>
+  state.appStatus.incorrectNode;

From 4d90851ce0934c66d6e2ac229e18813a8e964af0 Mon Sep 17 00:00:00 2001
From: Josh Ellis <joshua.ellis18@gmail.com>
Date: Wed, 8 Jan 2020 23:46:04 +0000
Subject: [PATCH 3/3] fix tests and type checking

---
 src/actions/index.js                                 |  2 +-
 .../__snapshots__/AppSettingsModal.test.js.snap      |  1 +
 .../CreateNewProjectWizard/CreateNewProjectWizard.js |  2 +-
 src/components/CreateNewProjectWizard/MainPane.js    |  2 +-
 .../CreateNewProjectWizard.test.js.snap              |  1 +
 src/components/OnlineChecker/OnlineChecker.js        | 12 ++++++++----
 .../ProjectTypeSelection/ProjectTypeSelection.js     |  2 +-
 src/config/app.js                                    |  2 +-
 8 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/actions/index.js b/src/actions/index.js
index ac86540b..303559d6 100644
--- a/src/actions/index.js
+++ b/src/actions/index.js
@@ -98,7 +98,7 @@ export const setOnlineStatus = (onlineStatus: boolean) => ({
   onlineStatus,
 });
 
-export const setInfoBarString = (string: ?string) => ({
+export const setInfoBarString = (string: string | null) => ({
   type: SET_INFO_BAR_STRING,
   infoBarString: string,
 });
diff --git a/src/components/AppSettingsModal/__snapshots__/AppSettingsModal.test.js.snap b/src/components/AppSettingsModal/__snapshots__/AppSettingsModal.test.js.snap
index aeb5c768..00ad59d5 100644
--- a/src/components/AppSettingsModal/__snapshots__/AppSettingsModal.test.js.snap
+++ b/src/components/AppSettingsModal/__snapshots__/AppSettingsModal.test.js.snap
@@ -44,6 +44,7 @@ exports[`AppSettingsModal component should render 1`] = `
           spacing={30}
         >
           <ProjectTypeSelection
+            handleIncorrectNodeVersion={[Function]}
             onProjectTypeSelect={[Function]}
             projectType="create-react-app"
           />
diff --git a/src/components/CreateNewProjectWizard/CreateNewProjectWizard.js b/src/components/CreateNewProjectWizard/CreateNewProjectWizard.js
index e38603b4..1e3b80dd 100644
--- a/src/components/CreateNewProjectWizard/CreateNewProjectWizard.js
+++ b/src/components/CreateNewProjectWizard/CreateNewProjectWizard.js
@@ -194,7 +194,7 @@ export class CreateNewProjectWizard extends PureComponent<Props, State> {
     }
   };
 
-  handleIncorrectNodeVersion = (str: ?string) => {
+  handleIncorrectNodeVersion = (str: string | null) => {
     const { setInfoBarString, setIncorrectNode } = this.props;
     setInfoBarString(str);
     if (str) {
diff --git a/src/components/CreateNewProjectWizard/MainPane.js b/src/components/CreateNewProjectWizard/MainPane.js
index 75eedbbf..c004576b 100644
--- a/src/components/CreateNewProjectWizard/MainPane.js
+++ b/src/components/CreateNewProjectWizard/MainPane.js
@@ -31,7 +31,7 @@ type Props = {
   handleSubmit: () => Promise<any> | void,
   isOnline: boolean,
   incorrectNode: boolean,
-  handleIncorrectNodeVersion: (str: ?string) => void,
+  handleIncorrectNodeVersion: (str: string | null) => void,
 };
 
 class MainPane extends PureComponent<Props> {
diff --git a/src/components/CreateNewProjectWizard/__tests__/__snapshots__/CreateNewProjectWizard.test.js.snap b/src/components/CreateNewProjectWizard/__tests__/__snapshots__/CreateNewProjectWizard.test.js.snap
index b3686a50..a402115a 100644
--- a/src/components/CreateNewProjectWizard/__tests__/__snapshots__/CreateNewProjectWizard.test.js.snap
+++ b/src/components/CreateNewProjectWizard/__tests__/__snapshots__/CreateNewProjectWizard.test.js.snap
@@ -32,6 +32,7 @@ exports[`CreateNewProjectWizard component should render TwoPaneModal 1`] = `
         activeField="projectName"
         currentStepIndex={0}
         focusField={[Function]}
+        handleIncorrectNodeVersion={[Function]}
         handleSubmit={[Function]}
         hasBeenSubmitted={false}
         isProjectNameTaken={false}
diff --git a/src/components/OnlineChecker/OnlineChecker.js b/src/components/OnlineChecker/OnlineChecker.js
index dbf32744..246f80d7 100644
--- a/src/components/OnlineChecker/OnlineChecker.js
+++ b/src/components/OnlineChecker/OnlineChecker.js
@@ -26,13 +26,17 @@ class OnlineChecker extends React.PureComponent<Props> {
     window.addEventListener('offline', this.check);
   }
 
+  handleInfoBarString = (str: string | null) => {
+    this.props.setInfoBarString(str);
+  };
+
   check = () => {
-    const { setOnlineStatus, setInfoBarString } = this.props;
+    const { setOnlineStatus } = this.props;
     setOnlineStatus(navigator.onLine);
-    if (!navigator.onLine) {
-      setInfoBarString(OFFLINE_STRING);
+    if (navigator.onLine) {
+      this.handleInfoBarString(null);
     } else {
-      setInfoBarString(null);
+      this.handleInfoBarString(OFFLINE_STRING);
     }
   };
 
diff --git a/src/components/ProjectTypeSelection/ProjectTypeSelection.js b/src/components/ProjectTypeSelection/ProjectTypeSelection.js
index 6718da2b..a4b0bb75 100644
--- a/src/components/ProjectTypeSelection/ProjectTypeSelection.js
+++ b/src/components/ProjectTypeSelection/ProjectTypeSelection.js
@@ -10,7 +10,7 @@ import type { ProjectType } from '../../types';
 type Props = {
   projectType: ?ProjectType,
   onProjectTypeSelect: (projectType: ProjectType) => void,
-  handleIncorrectNodeVersion: (str: ?string) => void,
+  handleIncorrectNodeVersion: (str: string | null) => void,
 };
 
 const INCORRECT_NODE_STRING =
diff --git a/src/config/app.js b/src/config/app.js
index 7fa09a1a..490d947d 100644
--- a/src/config/app.js
+++ b/src/config/app.js
@@ -4,5 +4,5 @@ module.exports = {
   IN_APP_FEEDBACK_URL: 'https://guppy.nolt.io',
   PACKAGE_MANAGER: 'yarn',
   // Enable logging, if enabled all terminal responses are visible in the console (useful for debugging)
-  LOGGING: true,
+  LOGGING: false,
 };