add r2-bs-alert

lewis617 · lewis617 · commit 7312215c8057 · 2016-11-16T18:35:32.000+08:00
diff --git a/r2-bs-alert/.gitignore b/r2-bs-alert/.gitignore
@@ -0,0 +1,15 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+
+# testing
+coverage
+
+# production
+build
+
+# misc
+.DS_Store
+.env
+npm-debug.log
diff --git a/r2-bs-alert/README.md b/r2-bs-alert/README.md
@@ -0,0 +1 @@
+# React Redux Bootstrap Alert Example
diff --git a/r2-bs-alert/package.json b/r2-bs-alert/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "r2-bs-alert",
+  "version": "0.1.0",
+  "private": true,
+  "devDependencies": {
+    "enzyme": "^2.6.0",
+    "react-addons-test-utils": "^15.3.2",
+    "react-scripts": "0.7.0",
+    "redux-mock-store": "^1.2.1",
+    "redux-thunk": "^2.1.0"
+  },
+  "dependencies": {
+    "bootstrap": "3",
+    "react": "^15.3.2",
+    "react-bootstrap": "^0.30.6",
+    "react-dom": "^15.3.2",
+    "react-redux": "^4.4.6",
+    "redux": "^3.6.0"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
diff --git a/r2-bs-alert/public/favicon.ico b/r2-bs-alert/public/favicon.ico
diff --git a/r2-bs-alert/public/index.html b/r2-bs-alert/public/index.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <!--
+      Notice the use of %PUBLIC_URL% in the tag above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start`.
+      To create a production bundle, use `npm run build`.
+    -->
+  </body>
+</html>
diff --git a/r2-bs-alert/src/App.css b/r2-bs-alert/src/App.css
@@ -0,0 +1,3 @@
+.App{
+    width: 500px;
+}
diff --git a/r2-bs-alert/src/App.js b/r2-bs-alert/src/App.js
@@ -0,0 +1,44 @@
+import React, { Component } from 'react';
+import { AlertList } from './alert';
+import { ButtonGroup, Button } from 'react-bootstrap';
+import { connect } from 'react-redux';
+import { alertMessage } from './alert';
+import './App.css';
+
+class App extends Component {
+  render() {
+    return (
+      <div className="App">
+        <AlertList />
+        <ButtonGroup>
+          <Button
+            onClick={() => this.props.dispatch(alertMessage('Success', 'success'))}
+            bsStyle="success"
+          >
+            Success
+          </Button>
+          <Button
+            onClick={() => this.props.dispatch(alertMessage('Danger', 'danger', 5500))}
+            bsStyle="danger"
+          >
+            Danger
+          </Button>
+          <Button
+            onClick={() => this.props.dispatch(alertMessage('Warning', 'warning'))}
+            bsStyle="warning"
+          >
+            Warning
+          </Button>
+          <Button
+            onClick={() => this.props.dispatch(alertMessage('Info', 'info'))}
+            bsStyle="info"
+          >
+            Info
+          </Button>
+        </ButtonGroup>
+      </div>
+    );
+  }
+}
+
+export default connect()(App);
diff --git a/r2-bs-alert/src/App.test.js b/r2-bs-alert/src/App.test.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { createStore, combineReducers, applyMiddleware } from 'redux';
+import { Provider } from 'react-redux';
+import thunk from 'redux-thunk';
+import App from './App';
+import { reducer as alertsReducer, alertMessage } from './alert';
+import 'bootstrap/dist/css/bootstrap.css';
+
+const store = createStore(
+  combineReducers({ alerts: alertsReducer }),
+  {},
+  applyMiddleware(thunk)
+);
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(
+    <Provider store={store}>
+      <App />
+    </Provider>,
+    div
+  );
+});
diff --git a/r2-bs-alert/src/alert/AlertList.js b/r2-bs-alert/src/alert/AlertList.js
@@ -0,0 +1,40 @@
+import React, { Component, PropTypes } from 'react';
+import { connect } from 'react-redux';
+import Alert from 'react-bootstrap/lib/Alert';
+import { hideAllAlert, alertHide } from './redux';
+
+class CustomAlert extends Component {
+  static propTypes = {
+    alerts: PropTypes.array.isRequired,
+    hideAllAlert: PropTypes.func.isRequired,
+    alertHide: PropTypes.func.isRequired
+  };
+
+  componentDidMount() {
+    this.props.hideAllAlert();
+  }
+
+  render() {
+    const { alerts, alertHide } = this.props;
+    return (
+      <div>
+        {alerts.map((item, i) => (
+          <Alert
+            key={i}
+            bsStyle={item.messageType}
+            onDismiss={() => alertHide(item.key)}
+          >
+            {item.messageText}
+          </Alert>
+        ))}
+      </div>
+    );
+  }
+}
+
+export default connect(
+  state => ({
+    alerts: state.alerts.items
+  }),
+  { hideAllAlert, alertHide }
+)(CustomAlert);
diff --git a/r2-bs-alert/src/alert/__tests__/AlertList.test.js b/r2-bs-alert/src/alert/__tests__/AlertList.test.js
@@ -0,0 +1,59 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { createStore, combineReducers, applyMiddleware } from 'redux';
+import { Provider } from 'react-redux';
+import thunk from 'redux-thunk';
+import { AlertList, reducer } from '../index';
+
+function setup(state = {}) {
+  const store = createStore(
+    combineReducers({ alerts: reducer }),
+    state,
+    applyMiddleware(thunk)
+  );
+  const app = mount(
+    <Provider store={store}>
+      <AlertList />
+    </Provider>
+  );
+  return {
+    app,
+    store
+  };
+}
+
+describe('AlertList', () => {
+  let originalTimeout;
+  beforeEach(function() {
+    originalTimeout = jasmine.DEFAULT_TIMEOUT_INTERVAL;
+    jasmine.DEFAULT_TIMEOUT_INTERVAL = 10000;
+  });
+
+  afterEach(function() {
+    jasmine.DEFAULT_TIMEOUT_INTERVAL = originalTimeout;
+  });
+  it('should display messages and hide all after delay', () => {
+    const { app } = setup({ alerts: { lastKey: 1, items: [{ key: 0 }, { key: 1 }] } });
+    expect(app.find('.alert').length).toBe(2);
+    return new Promise(resolve => {
+      setTimeout(() => {
+        resolve();
+      }, 5000)
+    }).then(() => {
+      expect(app.find('.alert').length).toBe(0);
+    });
+  });
+
+  it('should display messages and hide itself after clicked', () => {
+    const { app } = setup({
+      alerts: {
+        lastKey: 1,
+        items: [{ key: 0, messageText: 'messageText1' }, { key: 1, messageText: 'messageText2' }]
+      }
+    });
+    app.find('.alert').at(1).find('button').at(0)
+      .simulate('click');
+    expect(app.find('.alert').text()).not.toMatch(/messageText2/);
+    expect(app.find('.alert').text()).toMatch(/messageText1/);
+  });
+});
diff --git a/r2-bs-alert/src/alert/__tests__/redux.test.js b/r2-bs-alert/src/alert/__tests__/redux.test.js
@@ -0,0 +1,77 @@
+import configureStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+import reducer, { ALERT_SHOW, ALERT_HIDE, alertShow, alertHide, alertMessage, hideAllAlert } from '../redux';
+
+const middlewares = [thunk];
+const mockStore = configureStore(middlewares);
+
+describe('action test', () => {
+  it('alertShow should create ALERT_SHOW', () => {
+    expect(alertShow('message', 'success', 0))
+      .toEqual({
+        payload: {
+          messageText: 'message',
+          messageType: 'success',
+          key: 0
+        },
+        type: ALERT_SHOW
+      });
+  });
+  it('alertHide should create ALERT_HIDE', () => {
+    expect(alertHide(0))
+      .toEqual({
+        payload: {
+          key: 0
+        },
+        type: ALERT_HIDE
+      });
+  });
+  it('alertMessage should create ALERT_SHOW and create ALERT_HIDE after delay', (done) => {
+    const expectedActions = [
+      alertShow('message', 'success', 1)
+    ];
+    const getState = { alerts: { lastKey: 0, items: [] } };
+    const store = mockStore(getState);
+    store.dispatch(alertMessage('message', 'success', 0));
+    expect(store.getActions()).toEqual(expectedActions);
+    setTimeout(() => {
+      expect(store.getActions()).toEqual(expectedActions.concat([alertHide(1)]));
+      done();
+    }, 0);
+  });
+  it('hideAllAlert should create multi ALERT_HIDE after delay', (done) => {
+    const expectedActions = [
+      alertHide(0),
+      alertHide(1)
+    ];
+    const getState = { alerts: { lastKey: 1, items: [{ key: 0 }, { key: 1 }] } };
+    const store = mockStore(getState);
+    store.dispatch(hideAllAlert(0));
+    setTimeout(() => {
+      expect(store.getActions()).toEqual(expectedActions);
+      done();
+    }, 0);
+  });
+});
+
+it('reducer test', () => {
+  it('should handle alertShow action', () => {
+    expect(reducer({ items: [], lastKey: -1 }, alertShow('message', 'success', 0))).toEqual({
+      items: [{
+        messageText: 'message',
+        messageType: 'success',
+        key: 0
+      }],
+      lastKey: 0
+    });
+  });
+  it('should handle alertHide action', () => {
+    expect(reducer({
+      items: [{ messageText: 'message', messageType: 'success', key: 0 }],
+      lastKey: 0
+    }, alertHide(0))).toEqual({ items: [], lastKey: 0 });
+  });
+  it('should handle unknown action', () => {
+    expect(reducer([], { type: 'unknown' })).toEqual([]);
+  });
+});
diff --git a/r2-bs-alert/src/alert/index.js b/r2-bs-alert/src/alert/index.js
@@ -0,0 +1,4 @@
+import AlertList from './AlertList';
+export { AlertList };
+import reducer, { alertMessage } from './redux';
+export { reducer, alertMessage };
diff --git a/r2-bs-alert/src/alert/redux.js b/r2-bs-alert/src/alert/redux.js
@@ -0,0 +1,58 @@
+export const ALERT_SHOW = 'ALERT_SHOW';
+export const ALERT_HIDE = 'ALERT_HIDE';
+
+export function alertShow(messageText, messageType, key) {
+  return {
+    type: ALERT_SHOW,
+    payload: {
+      messageText, messageType, key
+    }
+  };
+}
+
+export function alertHide(key) {
+  return {
+    type: ALERT_HIDE,
+    payload: { key }
+  };
+}
+
+export function alertMessage(messageText, messageType, delay = 5000) {
+  return (dispatch, getState) => {
+    if (typeof messageText === 'string' && ['success', 'warning', 'danger', 'info'].indexOf(messageType) > -1) {
+      const key = getState().alerts.lastKey + 1;
+      dispatch(alertShow(messageText, messageType, key));
+      setTimeout(() => dispatch(alertHide(key)), delay);
+    } else {
+      console.error('messageText must be string and messageType must be success, warning, danger, info');
+    }
+  };
+}
+
+export function hideAllAlert(delay = 5000) {
+  return (dispatch, getState) => {
+    getState().alerts.items.forEach((item) => {
+      setTimeout(() => {
+        dispatch(alertHide(item.key));
+      }, delay);
+    });
+  };
+}
+
+export default function (state = { lastKey: -1, items: [] }, action) {
+  switch (action.type) {
+    case ALERT_SHOW:
+      return {
+        ...state,
+        items: [...state.items, action.payload],
+        lastKey: state.lastKey + 1
+      };
+    case ALERT_HIDE:
+      return {
+        ...state,
+        items: state.items.filter(item => (item.key !== action.payload.key))
+      };
+    default:
+      return state;
+  }
+}
diff --git a/r2-bs-alert/src/index.js b/r2-bs-alert/src/index.js
diff --git a/r2-bs-alert/yarn.lock b/r2-bs-alert/yarn.lock
