Feature: add throttle middleware

Author: Glitches

.babelrc

@@ -14,6 +14,7 @@
   ],
   "plugins": [
     "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-proposal-object-rest-spread",
     "@babel/plugin-proposal-export-default-from",
     ["lodash", {"id": ["lodash", "semantic-ui-react"]}]
   ],

src/App.js

@@ -1,5 +1,13 @@
 import React, { Component } from 'react';
-import { Button, Grid, Header, List, Segment } from 'semantic-ui-react';
+import {
+  Button,
+  Form,
+  Grid,
+  Header,
+  Input,
+  List,
+  Segment
+} from 'semantic-ui-react';
 import * as action from './actions/index.js';
 import { connect } from 'react-redux';
 
@@ -39,10 +47,16 @@ class App extends Component {
   state = {};
 
   callFade = () => {
-    console.log('here');
     this.props.fadeLed();
   };
 
+  setFadeTime = (e, data) => {
+    //    console.log('event', e.target);
+    e.preventDefault();
+    console.log('data', data);
+    this.props.fadeTime(data.value);
+  };
+
   render() {
     return (
       <Navbar leftItems={leftItems} rightItems={rightItems}>
@@ -51,34 +65,18 @@ class App extends Component {
 
           <Grid>
             <Grid.Column computer={6} mobile={16}>
-              <p>
-                Welcome to your Semantic UI React App! It is awesome{' '}
-                <span aria-label="emoji" role="img">
-                  😉
-                </span>
-              </p>
+              <Input focus placeholder="Time" onChange={this.setFadeTime} />
+              <Form>
+                <Form.Field>
+                  <label>Fade Time</label>
+                  <input placeholder="Fade Time" onChange={this.setFadeTime} />
+                </Form.Field>
+              </Form>
             </Grid.Column>
             <Grid.Column computer={10} mobile={16}>
               <Header as="h3">
-                Themed <code>Button</code>
+                Click the <code>Button</code> to fade
               </Header>
-              <p>
-                Semantic UI React does not have own theming and fully relies on
-                CSS part of Semantic UI. It is normal, Semantic UI theming is
-                very powerful, it allows you fully modify the look of your app
-                using theming variables.
-              </p>
-              <p>
-                We changed the <code>primary</code> color of <code>Button</code>{' '}
-                component, it is really easy
-                <span aria-label="emoji" role="img">
-                  😁
-                </span>{' '}
-                Take a look to{' '}
-                <code>/src/styling/theme/elements/button.variables</code>. By
-                the way, the <code>theme</code> directory structure fully
-                matches the component structure of Semantic UI React.
-              </p>
               <Button primary>Primary Button</Button>
               <Button onClick={() => this.callFade()}>Fade LED</Button>
 
@@ -122,11 +120,12 @@ class App extends Component {
   }
 }
 const mapStateToProps = state => ({
-  fadedLed: state.fade
+  time: state.time
 });
 
 const mapDispatchToProps = dispatch => ({
-  fadeLed: () => dispatch(action.fadeLed())
+  fadeLed: () => dispatch(action.fadeLed()),
+  fadeTime: millisec => dispatch(action.fadeTime(millisec))
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(App);

src/actions/index.js

@@ -9,20 +9,17 @@ export const fadeLed = data => ({
     types: [FADE_REQUEST, FADE_SUCCESS, FADE_FAILURE],
     endpoint: '/fade',
     method: 'GET'
+  },
+  meta: {
+    throttle: 1500
   }
 });
 
-export const LOGOUT_USER = 'LOGOUT_USER';
+export const FADE_TIME = 'FADE_TIME';
 
-export const logoutUser = () => ({
-  type: LOGOUT_USER
-});
-
-export const SET_USER = 'SET_USER';
-
-export const setUser = data => ({
-  type: SET_USER,
-  data
+export const fadeTime = millisec => ({
+  type: FADE_TIME,
+  millisec
 });
 
 export const goToUser = userId => ({

src/index.js

@@ -3,12 +3,20 @@ import ReactDOM from 'react-dom';
 import { AppContainer } from 'react-hot-loader';
 import App from './App';
 import { Provider } from 'react-redux';
-import { createStore, applyMiddleware } from 'redux';
+import { createStore, applyMiddleware, compose } from 'redux';
 
 import reducers from './reducers';
 import api from './middleware/api';
+import throttler from './middleware/throttle';
 
-let store = createStore(reducers, applyMiddleware(api));
+const composeEnhancers =
+  typeof window === 'object' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
+    ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({})
+    : compose;
+
+const enhancer = composeEnhancers(applyMiddleware(throttler, api));
+
+const store = createStore(reducers, enhancer);
 
 const render = Component => {
   ReactDOM.render(

src/middleware/throttle.js

@@ -0,0 +1,26 @@
+import { CALL_API } from './api';
+
+const throttled = {};
+
+const throttler = () => next => action => {
+  const time = action[CALL_API] && action.meta && action.meta.throttle;
+  console.log(throttled);
+  console.log(action);
+
+  if (!time) return next(action);
+
+  if (throttled[CALL_API]) {
+    console.log('action true');
+    return;
+  }
+  throttled[CALL_API] = true;
+
+  setTimeout(() => {
+    console.log('here');
+    throttled[CALL_API] = false;
+  }, time);
+
+  return next(action);
+};
+
+export default throttler;

src/reducers/arduino.js

@@ -0,0 +1,19 @@
+import * as actions from '../actions/index.js';
+
+const arduinoState = {
+  fade_millisec: 1000
+};
+
+const arduino = (state = arduinoState, action) => {
+  switch (action.type) {
+    case actions.FADE_TIME:
+      return {
+        ...state,
+        fade_millisec: action.millisec
+      };
+    default:
+      return state;
+  }
+};
+
+export default arduino;

src/styling/theme/elements/button.variables

@@ -2,4 +2,4 @@
     User Variable Overrides
 *******************************/
 
-@primaryColor: @pink;
+@primaryColor: @red;