implement app and alert-area

Author: AllenFang

src-react/components/alert-area/bug-tracking-nag-screen.js

@@ -0,0 +1,17 @@
+import React, { Component } from 'react';
+
+class BugTrackingNagScreen extends Component {
+  render() {
+    return (
+      <div className="alert alert-info clearfix">
+        <button type="button" className="close" data-bind="click: dismissBugtrackingNagscreen">&times;</button>
+        <p><strong>Help make ungit better with the press of a button!</strong></p>
+        <button className="btn btn-primary" data-bind="click: enableBugtrackingAndStatistics">Enable automatic bug reports + anonymous usage statistics</button>
+        <button className="btn btn-primary" data-bind="click: enableBugtracking">Enable automatic bug reports</button>
+        <button className="btn btn-default" data-bind="click: dismissBugtrackingNagscreen">Naah, I&#39;ll skip that</button>
+      </div>
+    );
+  }
+}
+
+export default BugTrackingNagScreen;

src-react/components/alert-area/git-version-error.js

@@ -0,0 +1,18 @@
+import React, { Component, PropTypes } from 'react';
+
+class GitVersionError extends Component {
+  static propTypes = {
+    gitVersionError: PropTypes.string
+  }
+
+  render() {
+    return (
+      <div class="alert alert-danger">
+        <span>{ this.props.gitVersionError }</span>
+        <button type="button" className="close" data-bind="click: dismissGitVersionError">&times;</button>
+      </div>
+    );
+  }
+}
+
+export default GitVersionError;

src-react/components/alert-area/index.js

@@ -0,0 +1,62 @@
+import React, { Component, PropTypes } from 'react';
+
+import GitVersionError from './git-version-error';
+import NewVersionAvailable from './new-version-available';
+import BugTrackingNagScreen from './bug-tracking-nag-screen';
+import NPSSurvey from './nps-survey';
+
+class AlertArea extends Component {
+  static propTypes = {
+    config: PropTypes.object.isRequired,
+    gitVersionErrorVisible: PropTypes.bool.isRequired,
+    showNewVersionAvailable: PropTypes.bool.isRequired,
+    showBugtrackingNagscreen: PropTypes.bool.isRequired,
+    showNPSSurvey: PropTypes.bool.isRequired
+  }
+
+  render() {
+    const {
+      config: {
+        ungitConfig: { platform },
+        versions: {
+          gitVersion: { error },
+          latestVersion: {
+            latestVersion
+          }
+        }
+      },
+      gitVersionErrorVisible,
+      showNewVersionAvailable,
+      showBugtrackingNagscreen,
+      showNPSSurvey
+    } = this.props;
+    return (
+      <div className="container" data-ta-container="app">
+        {
+          gitVersionErrorVisible ? (
+            <GitVersionError gitVersionError={ error }/>
+          ) : null
+        }
+        {
+          showNewVersionAvailable ? (
+            <NewVersionAvailable
+              latestVersion={ latestVersion }
+              platform={ platform }/>
+          ) : null
+        }
+        {
+          showBugtrackingNagscreen ? (
+            <BugTrackingNagScreen />
+          ) : null
+        }
+        {
+          showNPSSurvey ? (
+            <NPSSurvey />
+          ) : null
+        }
+      </div>
+    );
+  }
+}
+
+export default AlertArea;

src-react/components/alert-area/new-version-available.js

@@ -0,0 +1,24 @@
+import React, { Component, PropTypes } from 'react';
+
+class NewVersionAvailable extends Component {
+  static propTypes = {
+    latestVersion: PropTypes.string,
+    platform: PropTypes.string
+  }
+
+  render() {
+    const newVersionInstallCommand = `#{this.props.platform ? '' : 'sudo -H'}npm update -g ungit`;
+    return (
+      <div className="alert alert-info">
+        A new version of ungit (<span>{ this.props.latestVersion }</span>) is
+        <a href="https://github.com/FredrikNoren/ungit">available</a>! Run
+        <code>{ newVersionInstallCommand }</code> to install.
+        See what's new in the
+        <a href="https://github.com/FredrikNoren/ungit/blob/master/CHANGELOG.md">changelog</a>.
+        <button type="button" className="close" data-bind="click: dismissNewVersion">&times;</button>
+      </div>
+    );
+  }
+}
+
+export default NewVersionAvailable;

src-react/components/alert-area/nps-survey.js

@@ -0,0 +1,37 @@
+import React, { Component } from 'react';
+
+class NPSSurvey extends Component {
+  static propTypes = {
+  }
+
+  render() {
+    return (
+      <div className="alert alert-info clearfix" data-bind="visible: showNPSSurvey">
+        <button type="button" className="close" data-bind="click: dismissNPSSurvey">&times;</button>
+        <span className="text-dimmed">Hi! This is a one-question survey to learn more about how people use Ungit. You can dismiss it by clicking the x in the upper right corner.</span>
+        <p><h4>Question: How likely are you to recommend Ungit to your friends and colleagues?</h4></p>
+        <p>
+          <div className="btn-group btn-group-justified">
+            <a className="btn btn-default" role="button" data-bind="click: sendNPS.bind(null, 0)">0</a>
+            <a className="btn btn-default" role="button" data-bind="click: sendNPS.bind(null, 1)">1</a>
+            <a className="btn btn-default" role="button" data-bind="click: sendNPS.bind(null, 2)">2</a>
+            <a className="btn btn-default" role="button" data-bind="click: sendNPS.bind(null, 3)">3</a>
+            <a className="btn btn-default" role="button" data-bind="click: sendNPS.bind(null, 4)">4</a>
+            <a className="btn btn-default" role="button" data-bind="click: sendNPS.bind(null, 5)">5</a>
+            <a className="btn btn-default" role="button" data-bind="click: sendNPS.bind(null, 6)">6</a>
+            <a className="btn btn-default" role="button" data-bind="click: sendNPS.bind(null, 7)">7</a>
+            <a className="btn btn-default" role="button" data-bind="click: sendNPS.bind(null, 8)">8</a>
+            <a className="btn btn-default" role="button" data-bind="click: sendNPS.bind(null, 9)">9</a>
+            <a className="btn btn-default" role="button" data-bind="click: sendNPS.bind(null, 10)">10</a>
+          </div>
+          <div className="clearfix">
+            Not at all likely
+            <div className="pull-right">Extremely likely</div>
+          </div>
+        </p>
+      </div>
+    );
+  }
+}
+
+export default NPSSurvey;

src-react/containers/path.js

@@ -31,7 +31,8 @@ class Path extends Component {
               <AlerArea config={ this.props.config }
                 gitVersionErrorVisible={ app.gitVersionErrorVisible }
                 showNewVersionAvailable={ app.showNewVersionAvailable }
-                showBugtrackingNagscreen={ app.showBugtrackingNagscreen } />
+                showBugtrackingNagscreen={ app.showBugtrackingNagscreen }
+                showNPSSurvey={ app.showNPSSurvey } />
             ) : null
           }
         </div>

src-react/reducers/app.js

@@ -0,0 +1,48 @@
+import * as types from 'constants/action-types';
+
+function app(state, action, config) {
+  
+  switch(action.type) {
+    case types.RECEIVE_UNGIT_CONFIG: {
+      const { ungitConfig } = config;
+      const bugtrackingNagscreenDismissed = localStorage.getItem('bugtrackingNagscreenDismissed');
+      const showBugtrackingNagscreen = !ungitConfig.config.bugtracking && !bugtrackingNagscreenDismissed;
+
+      return { ...state, showBugtrackingNagscreen };
+    }
+
+    case types.RECEIVE_GIT_VERSION: {
+      const { ungitConfig, versions: { gitVersion } } = config;
+      const gitVersionCheckOverride = ungitConfig.config && ungitConfig.config.gitVersionCheckOverride;
+      const gitVersionErrorDismissed = localStorage.getItem('gitVersionErrorDismissed');
+      const gitVersionError = gitVersion && !gitVersion.satisfied && gitVersion.error;
+      const gitVersionErrorVisible = !gitVersionCheckOverride && gitVersionError && gitVersionErrorDismissed;
+
+      return { ...state, gitVersionErrorVisible };
+    }
+    
+    case types.RECEIVE_LATEST_VERSION: {
+      const { ungitConfig, versions: { latestVersion } } = config;
+      const gitVersionCheckOverride = ungitConfig.config && ungitConfig.config.gitVersionCheckOverride;
+      const outdated = latestVersion && latestVersion.outdated;
+      const showNewVersionAvailable = !gitVersionCheckOverride && outdated;
+
+      return { ...state, showNewVersionAvailable };
+    }
+
+    case types.RECEIVE_USER_CONFIG: {
+      const { userConfig } = config;
+      const bugtrackingNagscreenDismissed = localStorage.getItem('bugtrackingNagscreenDismissed');
+      const showBugtrackingNagscreen = !userConfig.bugtracking && !bugtrackingNagscreenDismissed;
+
+      return { ...state, showBugtrackingNagscreen };
+    }
+    default:
+      const NPSSurveyLastDismissed = parseInt(localStorage.getItem('NPSSurveyLastDismissed') || '0', 10);
+      const monthsSinceNPSLastDismissed = (Date.now() - NPSSurveyLastDismissed) / (1000 * 60 * 60 * 24 * 30);
+      const showNPSSurvey = monthsSinceNPSLastDismissed >= 6 && Math.random() < 0.01;
+      return { ...state, showNPSSurvey };
+  }
+}
+
+export default app;

src-react/reducers/index.js

@@ -1,11 +1,14 @@
-import { combineReducers } from 'redux';
-
-import path from './path';
 import config from './config';
+import app from './app';
+import path from './path';
 
-const ungitApp = combineReducers({
-  config,
-  path
-});
+function ungitApp(state, action) {
+  const _config = config(state.config, action);
+  return {
+    config: _config,
+    app: app(state.app, action, _config),
+    path: path(state.path, action, _config),
+  };
+}
 
 export default ungitApp;

src-react/store.js

@@ -11,6 +11,12 @@ const initialState = {
       latestVersion: null
     }
   },
+  app: {
+    gitVersionErrorVisible: false,
+    showNewVersionAvailable: false,
+    showBugtrackingNagscreen: false,
+    showNPSSurvey: false
+  },
   path: {
     pending: null,
     errMessage: []