Bugfix/check node version before install

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 | null) => ({
+  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,

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,24 +20,27 @@ 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';
 
 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);

src/components/AppSettingsModal/AppSettingsModal.js

@@ -123,6 +123,7 @@ export class AppSettingsModal extends PureComponent<Props, State> {
                       projectType
                     );
                   }}
+                  handleIncorrectNodeVersion={() => console.log('write func')}
                 />
               </FormField>
             </PixelShifter>

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"
           />

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 | null) => {
+    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(

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 | null) => 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}

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}

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;

src/components/InfoBar/index.js

@@ -0,0 +1,2 @@
+// @flow
+export { default } from './InfoBar';