set clientId on remote actions for duplicate vote prevention

teropa · Sep 6, 2015 · 59a8b529d7a712acf33a4c8deabc7948acb6cd38 · 59a8b52 · andiwinata · Feb 5, 2017
1 parent 84c51e7
commit 59a8b529d7a712acf33a4c8deabc7948acb6cd38
Unified Split

Showing with 42 additions and 3 deletions.

+3 −1 package.json

+7 −0 src/action_creators.js

+10 −0 src/client_id.js

+3 −1 src/index.jsx

+2 −0 src/reducer.js

+4 −1 src/remote_action_middleware.js

+13 −0 test/reducer_spec.js
diff --git a/package.json b/package.json
@@ -25,10 +25,12 @@
  "dependencies": {
    "classnames": "^2.1.3",
    "immutable": "^3.7.5",
+    "object-assign": "^4.0.1",
    "react": "^0.13.3",
    "react-redux": "^2.1.0",
    "react-router": "^0.13.3",
    "redux": "^2.0.0",
-    "socket.io-client": "^1.3.6"
+    "socket.io-client": "^1.3.6",
+    "uuid": "^2.0.1"
  }
 }
diff --git a/src/action_creators.js b/src/action_creators.js
@@ -1,3 +1,10 @@
+export function setClientId(clientId) {
+  return {
+    type: 'SET_CLIENT_ID',
+    clientId
+  };
+}
+
 export function setState(state) {
  return {
    type: 'SET_STATE',
diff --git a/src/client_id.js b/src/client_id.js
@@ -0,0 +1,10 @@
+import uuid from 'uuid';
+
+export default function getClientId() {
+  let id = localStorage.getItem('clientId');
+  if (!id) {
+    id = uuid.v4();
+    localStorage.setItem('clientId', id);
+  }
+  return id;
+}
diff --git a/src/index.jsx b/src/index.jsx
@@ -4,8 +4,9 @@ import {createStore, applyMiddleware} from 'redux';
 import {Provider} from 'react-redux';
 import io from 'socket.io-client';
 import reducer from './reducer';
-import {setState} from './action_creators';
+import {setClientId, setState} from './action_creators';
 import remoteActionMiddleware from './remote_action_middleware';
+import getClientId from './client_id';
 import App from './components/App';
 import {VotingContainer} from './components/Voting';
 import {ResultsContainer} from './components/Results';
@@ -21,6 +22,7 @@ const createStoreWithMiddleware = applyMiddleware(
  remoteActionMiddleware(socket)
 )(createStore);
 const store = createStoreWithMiddleware(reducer);
+store.dispatch(setClientId(getClientId()));

 const routes = <Route handler={App}>
  <Route path="/results" handler={ResultsContainer} />
diff --git a/src/reducer.js b/src/reducer.js
@@ -29,6 +29,8 @@ function resetVote(state) {

 export default function(state = Map(), action) {
  switch (action.type) {
+  case 'SET_CLIENT_ID':
+    return state.set('clientId', action.clientId);
  case 'SET_STATE':
    return resetVote(setState(state, action.state));
  case 'VOTE':
diff --git a/src/remote_action_middleware.js b/src/remote_action_middleware.js
@@ -1,6 +1,9 @@
+import objectAssign from 'object-assign';
+
 export default socket => store => next => action => {
  if (action.meta && action.meta.remote) {
-    socket.emit('action', action);
+    const clientId = store.getState().get('clientId');
+    socket.emit('action', objectAssign({}, action, {clientId}));
  }
  return next(action);
 }
diff --git a/test/reducer_spec.js b/test/reducer_spec.js
@@ -5,6 +5,19 @@ import reducer from '../src/reducer';

 describe('reducer', () => {

+  it('handles SET_CLIENT_ID', () => {
+    const initialState = Map();
+    const action = {
+      type: 'SET_CLIENT_ID',
+      clientId: '1234'
+    };
+    const nextState = reducer(initialState, action);
+
+    expect(nextState).to.equal(fromJS({
+      clientId: '1234'
+    }));
+  });
+  
  it('handles SET_STATE', () => {
    const initialState = Map();
    const action = {