Search/filter command by pattern, function name, and effect type

src/components/Effect/Effect.js

@@ -26,7 +26,6 @@ class Effect extends React.Component {
     const {effect} = this.props
     const { status, result, error, winner } = effect
 
-
     let nodes = []
     let data
 

src/components/ListView/ListView.js

@@ -28,6 +28,7 @@ class ListView extends React.Component {
   render() {
     const indent = this.props.indent || DEFAULT_INDENT
 
+    console.log(this.props.nodes);
     return (
       <ListViewContainer>
         { this.props.nodes.map(node => {

src/containers/ActionList/ActionList.js

@@ -21,7 +21,6 @@ class ActionEntry extends React.Component {
 
   render() {
     const {action } = this.props
-    console.log(action.action.type)
 
     return (
       <ActionEntryContainer onClick={this.onSelect}>

src/containers/EffectEntry/EffectEntry.js

@@ -48,9 +48,10 @@ class EffectEntry extends React.Component {
   onUnpin = () => this.props.onUnpin(-1)
 
   render() {
-    const {effect, collapsed, pinned, hasChildren} = this.props
+    const {effect, collapsed, pinned, hasChildren, passFilter} = this.props
 
     let pinNode
+    console.log(effect)
     if(!effect.root) {
       pinNode = (
         pinned
@@ -60,6 +61,7 @@ class EffectEntry extends React.Component {
     }
 
     return (
+      passFilter ?
       <EffectEntryContainer>
         <Row onMouseDown={this.onSelect}>
           <Cell>
@@ -88,6 +90,8 @@ class EffectEntry extends React.Component {
           )
         }
       </EffectEntryContainer>
+      :
+      null
     )
   }
 }
@@ -99,6 +103,7 @@ EffectEntry.propTypes = {
   collapsed: PropTypes.bool.isRequired,
   onCollapse: PropTypes.func.isRequired,
   onSelect: PropTypes.func.isRequired,
+  passFilter: PropTypes.bool.isRequired,
   // injected by Redux store
   effect: PropTypes.object.isRequired,
   hasChildren: PropTypes.bool.isRequired,

src/containers/EffectList/EffectList.js

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import styled, { css } from 'styled-components'
 import { connect } from 'react-redux'
+import { asEffect } from 'redux-saga/utils'
 import { matchCurrentAction } from '../../store/selectors'
 import {
   KEY_ARROW_DOWN,
@@ -25,16 +26,49 @@ const cssMatchAction = css`
   margin-top: -1px;
 `
 
+const effectTypes = ['take', 'put', 'fork', 'call', 'cps', 'join', 'cancel']
+
 class EffectList extends React.Component {
 
   state = {
-    collapsedEffects: {}
+    collapsedEffects: {},
+    filter: { word: 'a', type: undefined }
   }
 
   isCollapsed = effectId => {
     return !!this.state.collapsedEffects[effectId]
   }
 
+  isFiltered = effectId => {
+    const { filter } = this.state
+
+    if (!filter.word) return true
+
+    let data = {}, description
+    const effect = this.props.effectsById[effectId]
+
+    if (effect.root) {
+      data = { type: 'root', name: effect.effect.saga.name }
+    }
+
+    else {
+      effectTypes.forEach(type => {
+        if (description = asEffect[type](effect.effect)) {
+          data = {
+            type,
+            name: description.pattern
+              || description.channel
+              || description.action
+              || (description.fn && description.fn.name)
+          }
+        }
+      })
+    }
+
+    console.log(data)
+    return data.name && data.name.toLowerCase().includes(filter.word.toLowerCase())
+  }
+
   collapseEffect = (effectId, collapsed) => {
     this.setState(state => ({
       collapsedEffects: {
@@ -121,6 +155,7 @@ class EffectList extends React.Component {
           selected={this.props.selectedEffectId === effectId}
           pinned={this.props.pinnedEffectId === effectId}
           collapsed={this.isCollapsed(effectId)}
+          passFilter={this.isFiltered(effectId)}
           onCollapse={this.collapseEffect}
           onPin={this.props.onPin}
           onUnpin={this.props.onUnpin}

src/store/reducers.js

@@ -50,6 +50,7 @@ export function effectsById(state = {}, action) {
   switch (action.type) {
     case EFFECT_TRIGGERED:
       effect = action.effect
+      console.log(effect)
       effectId = effect.effectId
       newState = {...state,
         [effectId]: {