Remove node for tree-view example

examples/tree-view/actions/index.js

@@ -1,6 +1,8 @@
 export const INCREMENT = 'INCREMENT'
 export const CREATE_NODE = 'CREATE_NODE'
+export const DELETE_NODE = 'DELETE_NODE'
 export const ADD_CHILD = 'ADD_CHILD'
+export const REMOVE_CHILD = 'REMOVE_CHILD'
 
 export function increment(nodeId) {
   return {
@@ -17,10 +19,25 @@ export function createNode() {
   }
 }
 
+export function deleteNode(nodeId) {
+  return {
+    type: DELETE_NODE,
+    nodeId
+  }
+}
+
 export function addChild(nodeId, childId) {
   return {
     type: ADD_CHILD,
     nodeId,
     childId
   }
 }
+
+export function removeChild(nodeId, childId) {
+  return {
+    type: REMOVE_CHILD,
+    nodeId,
+    childId
+  }
+}

examples/tree-view/containers/Node.js

@@ -7,7 +7,9 @@ class Node extends Component {
   constructor(props) {
     super(props)
     this.handleIncrementClick = this.handleIncrementClick.bind(this)
+    this.handleRemoveClick = this.handleRemoveClick.bind(this)
     this.handleAddChildClick = this.handleAddChildClick.bind(this)
+    this.renderChild = this.renderChild.bind(this)
   }
 
   handleIncrementClick() {
@@ -23,23 +25,39 @@ class Node extends Component {
     addChild(id, childId)
   }
 
+  handleRemoveClick(e) {
+    e.preventDefault()
+
+    const { removeChild, deleteNode, parentId, id } = this.props
+    removeChild(parentId, id)
+    deleteNode(id)
+  }
+
   renderChild(childId) {
+    const { id } = this.props
     return (
       <li key={childId}>
-        <ConnectedNode id={childId} />
+        <ConnectedNode id={childId} parentId={id} />
       </li>
     )
   }
 
   render() {
-    const { counter, childIds } = this.props
+    const { counter, parentId, childIds } = this.props
     return (
       <div>
         Counter: {counter}
         {' '}
         <button onClick={this.handleIncrementClick}>
           +
         </button>
+        {' '}
+        {typeof parentId !== 'undefined' ?
+          <a href="#" onClick={this.handleRemoveClick}>
+            Delete
+          </a> :
+          null
+        }
         <ul>
           {childIds.map(this.renderChild)}
           <li key="add">

examples/tree-view/package.json

@@ -3,7 +3,9 @@
   "version": "0.0.0",
   "description": "Redux tree-view example",
   "scripts": {
-    "start": "node server.js"
+    "start": "node server.js",
+    "test": "NODE_ENV=test mocha --recursive --compilers js:babel-core/register",
+    "test:watch": "npm test -- --watch"
   },
   "repository": {
     "type": "git",
@@ -24,6 +26,7 @@
     "babel-core": "^5.6.18",
     "babel-loader": "^5.1.4",
     "babel-plugin-react-transform": "^1.1.0",
+    "deep-freeze": "0.0.1",
     "expect": "^1.6.0",
     "express": "^4.13.3",
     "jsdom": "^5.6.1",

examples/tree-view/reducers/index.js

@@ -1,4 +1,19 @@
-import { INCREMENT, ADD_CHILD, CREATE_NODE } from '../actions'
+import { INCREMENT, ADD_CHILD, REMOVE_CHILD, CREATE_NODE, DELETE_NODE } from '../actions'
+
+function childIds(state, action) {
+  switch (action.type) {
+    case ADD_CHILD:
+      return [ ...state, action.childId ]
+    case REMOVE_CHILD:
+      const index = state.indexOf(action.childId)
+      return [
+        ...state.slice(0, index),
+        ...state.slice(index + 1)
+      ]
+    default:
+      return state
+  }
+}
 
 function node(state, action) {
   switch (action.type) {
@@ -13,22 +28,39 @@ function node(state, action) {
         counter: state.counter + 1
       })
     case ADD_CHILD:
+    case REMOVE_CHILD:
       return Object.assign({}, state, {
-        childIds: [ ...state.childIds, action.childId ]
+        childIds: childIds(state.childIds, action)
       })
     default:
       return state
   }
 }
 
+function getAllDescendantIds(state, nodeId) {
+  return state[nodeId].childIds.reduce((acc, childId) => (
+    [ ...acc, childId, ...getAllDescendantIds(state, childId) ]
+  ), [])
+}
+
+function deleteMany(state, ids) {
+  state = Object.assign({}, state)
+  ids.forEach(id => delete state[id])
+  return state
+}
+
 export default function (state = {}, action) {
   const { nodeId } = action
   if (typeof nodeId === 'undefined') {
     return state
   }
 
+  if (action.type === DELETE_NODE) {
+    const descendantIds = getAllDescendantIds(state, nodeId)
+    return deleteMany(state, [ nodeId, ...descendantIds ])
+  }
+
   return Object.assign({}, state, {
     [nodeId]: node(state[nodeId], action)
   })
 }
-

examples/tree-view/test/.eslintrc

@@ -0,0 +1,5 @@
+{
+  "env": {
+    "mocha": true
+  }
+}

examples/tree-view/test/reducer.spec.js

@@ -0,0 +1,164 @@
+import expect from 'expect'
+import deepFreeze from 'deep-freeze'
+import reducer from '../reducers'
+import { increment, createNode, deleteNode, addChild, removeChild } from '../actions'
+
+describe('reducer', () => {
+  it('should provide the initial state', () => {
+    expect(reducer(undefined, {})).toEqual({})
+  })
+
+  it('should handle INCREMENT action', () => {
+    const stateBefore = {
+      'node_0': {
+        id: 'node_0',
+        counter: 0,
+        childIds: []
+      }
+    }
+    const action = increment('node_0')
+    const stateAfter = {
+      'node_0': {
+        id: 'node_0',
+        counter: 1,
+        childIds: []
+      }
+    }
+
+    deepFreeze(stateBefore)
+    deepFreeze(action)
+
+    expect(reducer(stateBefore, action)).toEqual(stateAfter)
+  })
+
+  it('should handle CREATE_NODE action', () => {
+    const stateBefore = {}
+    const action = createNode()
+    const stateAfter = {
+      [action.nodeId]: {
+        id: action.nodeId,
+        counter: 0,
+        childIds: []
+      }
+    }
+
+    deepFreeze(stateBefore)
+    deepFreeze(action)
+
+    expect(reducer(stateBefore, action)).toEqual(stateAfter)
+  })
+
+  it('should handle DELETE_NODE action', () => {
+    const stateBefore = {
+      'node_0': {
+        id: 'node_0',
+        counter: 0,
+        childIds: [ 'node_1' ]
+      },
+      'node_1': {
+        id: 'node_1',
+        counter: 0,
+        childIds: []
+      },
+      'node_2': {
+        id: 'node_2',
+        counter: 0,
+        childIds: [ 'node_3', 'node_4' ]
+      },
+      'node_3': {
+        id: 'node_3',
+        counter: 0,
+        childIds: []
+      },
+      'node_4': {
+        id: 'node_4',
+        counter: 0,
+        childIds: []
+      }
+    }
+    const action = deleteNode('node_2')
+    const stateAfter = {
+      'node_0': {
+        id: 'node_0',
+        counter: 0,
+        childIds: [ 'node_1' ]
+      },
+      'node_1': {
+        id: 'node_1',
+        counter: 0,
+        childIds: []
+      }
+    }
+
+    deepFreeze(stateBefore)
+    deepFreeze(action)
+
+    expect(reducer(stateBefore, action)).toEqual(stateAfter)
+  })
+
+  it('should handle ADD_CHILD action', () => {
+    const stateBefore = {
+      'node_0': {
+        id: 'node_0',
+        counter: 0,
+        childIds: []
+      },
+      'node_1': {
+        id: 'node_1',
+        counter: 0,
+        childIds: []
+      }
+    }
+    const action = addChild('node_0', 'node_1')
+    const stateAfter = {
+      'node_0': {
+        id: 'node_0',
+        counter: 0,
+        childIds: [ 'node_1' ]
+      },
+      'node_1': {
+        id: 'node_1',
+        counter: 0,
+        childIds: []
+      }
+    }
+
+    deepFreeze(stateBefore)
+    deepFreeze(action)
+
+    expect(reducer(stateBefore, action)).toEqual(stateAfter)
+  })
+
+  it('should handle REMOVE_CHILD action', () => {
+    const stateBefore = {
+      'node_0': {
+        id: 'node_0',
+        counter: 0,
+        childIds: [ 'node_1' ]
+      },
+      'node_1': {
+        id: 'node_1',
+        counter: 0,
+        childIds: []
+      }
+    }
+    const action = removeChild('node_0', 'node_1')
+    const stateAfter = {
+      'node_0': {
+        id: 'node_0',
+        counter: 0,
+        childIds: []
+      },
+      'node_1': {
+        id: 'node_1',
+        counter: 0,
+        childIds: []
+      }
+    }
+
+    deepFreeze(stateBefore)
+    deepFreeze(action)
+
+    expect(reducer(stateBefore, action)).toEqual(stateAfter)
+  })
+})