Moves request-counting to renderer reducer

Author: mitchhentges

package.json

@@ -47,6 +47,7 @@
     "redux": "^3.5.2",
     "redux-logger": "^3.0.6",
     "redux-thunk": "^2.0.1",
+    "reselect": "^4.0.0",
     "source-map-support": "^0.5.3",
     "uniqid": "^4.0.0"
   },

src/common/service/proxy.js

@@ -91,22 +91,8 @@ export default class Proxy {
     }
   }
 
-  getRequestById(id) {
-    if (!id) return null;
-    return this._requests.find((request) => request.request.id === id);
-  }
-
-  getRequestData(filter) {
-    const matchesFilter = (request) =>
-      request.fullUrl().includes(filter) || request.original.fullUrl.includes(filter);
-
-    const requests = !filter ? this._requests : this._requests.filter(({request}) => matchesFilter(request));
-
-    return {
-      requests,
-      totalCount: this._requests.length,
-      filteredCount: requests.length
-    };
+  getRequests() {
+    return this._requests;
   }
 
   clear() {

src/main/index.js

@@ -100,10 +100,6 @@ app.on('ready', () => {
     }
   });
 
-  ipc.on('proxy-filter', (evt, {filter}) => {
-    proxy.setFilter(filter);
-  });
-
   ipc.on('proxy-clear', () => {
     proxy.proxy.clear();
   });

src/main/proxy.js

@@ -11,7 +11,6 @@ class ProxyHandler extends EventEmitter {
   constructor(config, urlMapper) {
     super();
     this.config = config;
-    this.filter = undefined;
     this.status = undefined;
     this.cachingEnabled = false;
 
@@ -110,10 +109,7 @@ class ProxyHandler extends EventEmitter {
   }
 
   getRequestData() {
-    const requestData = this.proxy.getRequestData(this.filter);
-    requestData.requests = requestData.requests
-      .map(this.sanitizeRequest_());
-    return requestData;
+    return this.proxy.getRequests().map(this.sanitizeRequest_());
   }
 
   getRequest(id) {
@@ -140,11 +136,6 @@ class ProxyHandler extends EventEmitter {
   isCaching() {
     return this.isCaching;
   }
-
-  setFilter(filter) {
-    this.filter = filter;
-    this.onUpdate_();
-  }
 }
 
 export default function createProxyHandler(config, urlMapper) {

src/renderer/component/footer/footer.js

@@ -20,8 +20,8 @@ import {
 } from '../../../common/actions/proxy.js';
 
 import { getUpdateStatus } from '../../reducers/app.js';
-import { getRequestData } from '../../reducers/requests.js';
 import { getProxyState } from '../../reducers/proxy.js';
+import { getFilteredRequestCount, getTotalRequestCount } from '../../reducers/requests';
 
 const Footer = props =>
   <div className="footer">
@@ -36,7 +36,8 @@ const Footer = props =>
       throttleRate={props.throttleRate}
     />
     <RequestCount
-      requestData={props.requestData}
+      filteredRequestCount={props.filteredRequestCount}
+      totalRequestCount={props.totalRequestCount}
       clearRequests={props.clearRequests}
     />
     <UpdateStatus
@@ -55,7 +56,8 @@ Footer.propTypes = {
   proxyStatus: ProxyStatusTypes.isRequired,
   proxyReason: PropTypes.string,
   proxyMessage: PropTypes.string,
-  requestData: PropTypes.object.isRequired,
+  filteredRequestCount: PropTypes.number.isRequired,
+  totalRequestCount: PropTypes.number.isRequired,
   clearRequests: PropTypes.func.isRequired,
   toggleThrottle: PropTypes.func.isRequired,
   setThrottleRate: PropTypes.func.isRequired,
@@ -73,7 +75,8 @@ const mapStateToProps = (state) => {
     cachingEnabled: proxy.cachingEnabled,
     throttleEnabled: proxy.throttleEnabled,
     throttleRate: proxy.throttleRate,
-    requestData: getRequestData(state),
+    filteredRequestCount: getFilteredRequestCount(state),
+    totalRequestCount: getTotalRequestCount(state),
     proxyStatus: proxy.status,
     proxyReason: proxy.statusReason,
     updateStatus: update.status,

src/renderer/component/footer/request-count.js

@@ -1,18 +1,18 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const RequestCount = ({requestData, clearRequests}) => {
-  const {filteredCount, totalCount} = requestData;
+const RequestCount = ({filteredRequestCount, totalRequestCount, clearRequests}) => {
   return <div className="request-count">
     <button title="Clear all requests" onClick={clearRequests}>
       <i className="fa fa-ban" />
     </button>
-    {`Requests: ${filteredCount} / ${totalCount}`}
+    {`Requests: ${filteredRequestCount} / ${totalRequestCount}`}
   </div>;
 };
 
 RequestCount.propTypes = {
-  requestData: PropTypes.object.isRequired,
+  filteredRequestCount: PropTypes.number.isRequired,
+  totalRequestCount: PropTypes.number.isRequired,
   clearRequests: PropTypes.func.isRequired
 };
 

src/renderer/component/requests/requests.js

@@ -4,8 +4,8 @@ import { connect } from 'react-redux';
 
 import Request from './request.js';
 
-const Requests = ({requestData, activeRequest, contextRequest, labels, handleClick, handleContextMenu}) => {
-  const requestNodes = requestData.requests.map(({request, response}) => {
+const Requests = ({requests, activeRequest, contextRequest, labels, handleClick, handleContextMenu}) => {
+  const requestNodes = requests.map(({request, response}) => {
     const isActive = activeRequest && activeRequest.id === request.id || false;
     const isContextMenu = contextRequest && contextRequest.id === request.id || false;
 
@@ -28,7 +28,7 @@ const Requests = ({requestData, activeRequest, contextRequest, labels, handleCli
 };
 
 Requests.propTypes = {
-  requestData: PropTypes.object.isRequired,
+  requests: PropTypes.array.isRequired,
   activeRequest: PropTypes.object,
   contextRequest: PropTypes.object,
   labels: PropTypes.array.isRequired,
@@ -37,11 +37,12 @@ Requests.propTypes = {
 };
 
 import { setActiveRequest, setContextRequest } from '../../../common/actions/requests.js';
-import { getRequestData, getActiveRequest, getContextRequest } from '../../reducers/requests.js';
+import { getActiveRequest, getContextRequest } from '../../reducers/requests.js';
 import { getLabels } from '../../reducers/app.js';
+import { getVisibleRequests } from '../../reducers/requests';
 
 const mapStateToProps = (state) => ({
-  requestData: getRequestData(state),
+  requests: getVisibleRequests(state),
   labels: getLabels(state),
   activeRequest: getActiveRequest(state),
   contextRequest: getContextRequest(state)

src/renderer/reducers/requests.js

@@ -1,16 +1,13 @@
 import { combineReducers } from 'redux';
+import { createSelector } from 'reselect';
 
 import * as actions from '../../common/actions/requests.js';
 
 const initialState = {
   filter: null,
   active: null,
   context: null,
-  data: {
-    requests: [],
-    totalCount: 0,
-    filteredCount: 0
-  }
+  data: []
 };
 
 // reducers
@@ -59,7 +56,7 @@ export default combineReducers({
 // selectors
 
 export function hasRequests(state) {
-  return state.requests.data.totalCount > 0;
+  return state.requests.data.length > 0;
 }
 
 export function getRequestFilter(state) {
@@ -70,20 +67,25 @@ export function getActiveRequest(state) {
   return state.requests.active;
 }
 
-export function isActiveRequest(state, request) {
-  const activeRequest = getActiveRequest(state);
-  return activeRequest && request && activeRequest.id === request.id;
-}
-
 export function getContextRequest(state) {
   return state.requests.context;
 }
 
-export function isContextRequest(state, request) {
-  const contextRequest = getContextRequest(state);
-  return contextRequest && request && contextRequest.id === request.id;
+export const getVisibleRequests = createSelector(
+  [getRequestFilter, state => state.requests.data],
+  (requestFilter, requests) => {
+    const matchesFilter = (request) =>
+      request.fullUrl.includes(requestFilter) || request.original.fullUrl.includes(requestFilter);
+
+    return !requestFilter
+      ? requests
+      : requests.filter(({request}) => matchesFilter(request));
+  });
+
+export function getTotalRequestCount(state) {
+  return state.requests.data.length;
 }
 
-export function getRequestData(state) {
-  return state.requests.data;
+export function getFilteredRequestCount(state) {
+  return getVisibleRequests(state).length;
 }

src/renderer/store/middleware/proxy.js

@@ -16,7 +16,7 @@ const middleware = store => next => action => {
 
   // let the reducers decide the state, then apply it to the proxy
   const result = next(action);
-  const { proxy: state, requests: requestState } = store.getState();
+  const { proxy: state } = store.getState();
 
   switch (action.type) {
   case actions.TOGGLE_CACHING:
@@ -31,12 +31,6 @@ const middleware = store => next => action => {
     });
     break;
 
-  case requestActions.SET_REQUEST_FILTER:
-    ipc.send('proxy-filter', {
-      filter: requestState.filter
-    });
-    break;
-
   case actions.CLEAR_REQUESTS:
     ipc.send('proxy-clear');
     break;

test/unit/reducers/requests.js

@@ -0,0 +1,74 @@
+import assert from 'assert';
+
+import requests from 'renderer/reducers/requests.js';
+import { getFilteredRequestCount, getTotalRequestCount, getVisibleRequests } from 'renderer/reducers/requests';
+
+const initialState = {
+  filter: null,
+  active: null,
+  context: null,
+  data: []
+};
+
+const setupState = (newState) => {
+  return {
+    requests: Object.assign({}, initialState, newState)
+  };
+};
+
+describe('requests reducers', () => {
+  it('should return the initial state', () => {
+    const nextState = requests(undefined, {});
+    assert.deepEqual(nextState, initialState);
+  });
+});
+
+describe('requests selectors', () => {
+  describe('when no filter applied', () => {
+    const state = setupState({
+      data: [
+        {request: {fullUrl: '1', original: {fullUrl: '1'}}},
+        {request: {fullUrl: '2', original: {fullUrl: '2'}}},
+        {request: {fullUrl: '3', original: {fullUrl: '3'}}}
+      ]
+    });
+
+    it('all requests are visible', () => {
+      assert.deepEqual(getVisibleRequests(state), [
+        {request: {fullUrl: '1', original: {fullUrl: '1'}}},
+        {request: {fullUrl: '2', original: {fullUrl: '2'}}},
+        {request: {fullUrl: '3', original: {fullUrl: '3'}}}
+      ]);
+    });
+
+    it('all requests should be included in "filtered count"', () => {
+      assert(getFilteredRequestCount(state) === 3);
+    });
+  });
+
+  describe('when filter applied', () => {
+    const state = setupState({
+      filter: 'foo',
+      data: [
+        {request: {fullUrl: 'foo', original: {fullUrl: 'foo'}}},
+        {request: {fullUrl: 'foo', original: {fullUrl: 'bar'}}},
+        {request: {fullUrl: 'baz', original: {fullUrl: 'baz'}}}
+      ]
+    });
+
+    it('filters by url and original url', function() {
+      assert.deepEqual(getVisibleRequests(state), [
+        {request: {fullUrl: 'foo', original: {fullUrl: 'foo'}}},
+        {request: {fullUrl: 'foo', original: {fullUrl: 'bar'}}}
+      ]);
+    });
+
+    it('should show the number of requests that match an applied filter', () => {
+      assert(getFilteredRequestCount(state) === 2);
+    });
+
+    it('should show correct total request count even when filter applied', () => {
+      assert(getTotalRequestCount(state) === 3);
+    });
+  });
+});