Port tree-view scenario

Author: markerikson

src/scenarios/tree-view/actions/index.js

@@ -0,0 +1,79 @@
+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 const increment = (nodeId) => ({
+  type: INCREMENT,
+  nodeId,
+})
+
+let nextId = 0
+export const createNode = () => ({
+  type: CREATE_NODE,
+  nodeId: `new_${nextId++}`,
+})
+
+export const deleteNode = (nodeId) => ({
+  type: DELETE_NODE,
+  nodeId,
+})
+
+export const addChild = (nodeId, childId) => ({
+  type: ADD_CHILD,
+  nodeId,
+  childId,
+})
+
+export const removeChild = (nodeId, childId) => ({
+  type: REMOVE_CHILD,
+  nodeId,
+  childId,
+})
+
+function randomInteger(exclusiveMax) {
+  return Math.floor(Math.random() * exclusiveMax)
+}
+
+function getRandomElement(selector) {
+  const elements = document.querySelectorAll(selector)
+  const randomIndex = randomInteger(elements.length)
+  const element = elements[randomIndex]
+  return element
+}
+
+function clickIncrement() {
+  const incrementButton = getRandomElement('.increment')
+  incrementButton.click()
+}
+
+function clickAddChild() {
+  const addChildButton = getRandomElement('.addChild')
+  addChildButton.click()
+}
+
+function clickDeleteNode() {
+  const deleteNodeButton = getRandomElement('.deleteNode')
+  deleteNodeButton.click()
+}
+
+const odds = [
+  { action: clickIncrement, percent: 60 },
+  { action: clickAddChild, percent: 30 },
+  { action: clickDeleteNode, percent: 10 },
+]
+
+export function doRandomAction() {
+  const randomPercentage = randomInteger(100)
+
+  let currentPercentage = 0
+  for (let entry of odds) {
+    currentPercentage += entry.percent
+
+    if (randomPercentage < currentPercentage) {
+      entry.action()
+      break
+    }
+  }
+}

src/scenarios/tree-view/containers/Node.jsx

@@ -0,0 +1,73 @@
+import React from 'react'
+import { Component } from 'react'
+import { connect } from 'react-redux'
+import * as actions from '../actions'
+
+export class Node extends Component {
+  handleIncrementClick = () => {
+    const { increment, id } = this.props
+    increment(id)
+  }
+
+  handleAddChildClick = e => {
+    e.preventDefault()
+
+    const { addChild, createNode, id } = this.props
+    const childId = createNode().nodeId
+    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} parentId={id} />
+      </li>
+    )
+  }
+
+  render() {
+    const { counter, parentId, childIds, id } = this.props
+    return (
+      <div>
+        Counter #{id}: {counter}
+        {' '}
+        <button className="increment" onClick={this.handleIncrementClick}>
+          +
+        </button>
+        {' '}
+        {typeof parentId !== 'undefined' &&
+          <a href="#" className="deleteNode" onClick={this.handleRemoveClick} // eslint-disable-line jsx-a11y/href-no-hash
+             style={{ color: 'lightgray', textDecoration: 'none' }}>
+            Delete
+          </a>
+        }
+        <ul>
+          {childIds.map(this.renderChild)}
+          <li key="add">
+            <a href="#" className="addChild" // eslint-disable-line jsx-a11y/href-no-hash
+              onClick={this.handleAddChildClick}
+            >
+              Add child
+            </a>
+          </li>
+        </ul>
+      </div>
+    )
+  }
+}
+
+function mapStateToProps(state, ownProps) {
+  return state[ownProps.id]
+}
+
+const ConnectedNode = connect(mapStateToProps, actions)(Node)
+export default ConnectedNode

src/scenarios/tree-view/generateTree.js

@@ -0,0 +1,21 @@
+export default function generateTree(numNodes = 1000) {
+  let tree = {
+    0: {
+      id: 0,
+      counter: 0,
+      childIds: []
+    }
+  };
+
+  for (let i = 1; i < numNodes; i++) {
+    let parentId = Math.floor(Math.pow(Math.random(), 2) * i);
+    tree[i] = {
+      id: i,
+      counter: 0,
+      childIds: []
+    };
+    tree[parentId].childIds.push(i);
+  }
+
+  return tree;
+}

src/scenarios/tree-view/index.tsx

@@ -0,0 +1,41 @@
+import React, { useLayoutEffect } from 'react'
+import { render } from 'react-dom'
+import { Provider } from 'react-redux'
+import { createStore, combineReducers, AnyAction } from 'redux'
+// @ts-ignore
+import seedrandom from 'seedrandom'
+
+import { renderApp } from '../../common'
+
+import reducer from './reducers'
+import { doRandomAction } from './actions'
+import generateTree from './generateTree'
+import Node from './containers/Node'
+
+seedrandom('test seed', { global: true })
+
+const tree = generateTree(5000)
+const store = createStore(reducer, tree)
+
+let maxUpdates = 3500,
+  numUpdates = 0
+
+function runUpdates() {
+  doRandomAction()
+  numUpdates++
+
+  if (numUpdates < maxUpdates) {
+    setTimeout(runUpdates, 25)
+  }
+}
+
+const StockTickerApp = () => {
+  useLayoutEffect(() => {
+    setTimeout(runUpdates, 250)
+  }, [])
+
+  return <Node id={0} />
+}
+
+// @ts-ignore
+renderApp(StockTickerApp, store)

src/scenarios/tree-view/reducers/index.js

@@ -0,0 +1,65 @@
+import { INCREMENT, ADD_CHILD, REMOVE_CHILD, CREATE_NODE, DELETE_NODE } from '../actions'
+
+const childIds = (state, action) => {
+  switch (action.type) {
+    case ADD_CHILD:
+      return [ ...state, action.childId ]
+    case REMOVE_CHILD:
+      return state.filter(id => id !== action.childId)
+    default:
+      return state
+  }
+}
+
+const node = (state, action) => {
+  switch (action.type) {
+    case CREATE_NODE:
+      return {
+        id: action.nodeId,
+        counter: 0,
+        childIds: []
+      }
+    case INCREMENT:
+      return {
+        ...state,
+        counter: state.counter + 1
+      }
+    case ADD_CHILD:
+    case REMOVE_CHILD:
+      return {
+        ...state,
+        childIds: childIds(state.childIds, action)
+      }
+    default:
+      return state
+  }
+}
+
+const getAllDescendantIds = (state, nodeId) => (
+  state[nodeId].childIds.reduce((acc, childId) => (
+    [ ...acc, childId, ...getAllDescendantIds(state, childId) ]
+  ), [])
+)
+
+const deleteMany = (state, ids) => {
+  state = { ...state }
+  ids.forEach(id => delete state[id])
+  return state
+}
+
+export default (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 {
+    ...state,
+    [nodeId]: node(state[nodeId], action)
+  }
+}