Port deeptree-nested scenario

Author: markerikson

src/scenarios/deeptree-nested/App.jsx

@@ -0,0 +1,79 @@
+import React from "react";
+import { connect } from "react-redux";
+
+import Slice from "./Slice";
+import * as c from "./constants";
+import { incrementMany, incrementRandomCounter } from "./counters";
+import { appendRandomCharacter, appendRandomCharToMany } from "./strings";
+
+let slices;
+
+const mapState = state => {
+  if (!slices) {
+    slices = Array.from({ length: c.NUMBER_OF_SLICES }).map(
+      (dummy, idx) => idx
+    );
+    //slices.sort();
+  }
+
+  return { slices };
+};
+
+function doUpdateMany(mod) {
+  return incrementMany({ mod });
+}
+
+const mapDispatch = {
+  incrementRandomCounter,
+  incrementFifth: () => doUpdateMany(5),
+  incrementThird: () => doUpdateMany(3),
+  appendRandomCharacter,
+  appendMany: () => appendRandomCharToMany(4)
+};
+
+class App extends React.Component {
+  render() {
+    return (
+      <div>
+        <div>
+          <button
+            id="incrementRandom"
+            onClick={this.props.incrementRandomCounter}
+          >
+            Update Random Counter
+          </button>
+          <button id="incrementFifth" onClick={this.props.incrementFifth}>
+            Update 1/5 Counters
+          </button>
+          <button id="incrementThird" onClick={this.props.incrementThird}>
+            Update 1/3 Counters
+          </button>
+          <button
+            id="appendRandomCharacter"
+            onClick={this.props.appendRandomCharacter}
+          >
+            Append Random Char
+          </button>
+          <button id="appendMany" onClick={this.props.appendMany}>
+            Append Char to Many
+          </button>
+        </div>
+        <div className="row">
+          {this.props.slices.map((slice, idx) => {
+            return (
+              <div style={{ display: "inline-block", minWidth: 70 }} key={idx}>
+                <Slice idx={slice} remainingDepth={c.TREE_DEPTH} />
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    );
+  }
+}
+App.displayName = "App";
+
+export default connect(
+  mapState,
+  mapDispatch
+)(App);

src/scenarios/deeptree-nested/Slice.jsx

@@ -0,0 +1,95 @@
+import React, { Component } from "react";
+import { connect } from "react-redux";
+
+import { initialize, createStringId } from "./strings";
+import { TEXT_INPUT_MOD } from "./constants";
+
+const counterMapState = (state, props) => {
+  return {
+    value: state.counters[props.idx]
+  };
+};
+
+const Counter = ({ value }) => {
+  return <div>Value: {value}</div>;
+};
+
+Counter.displayName = "Counter";
+
+const ConnectedCounter = connect(counterMapState)(Counter);
+
+const textMapState = (state, ownProps) => {
+  const stringId = createStringId(ownProps.idx, ownProps.inputId); //`${ownProps.idx}-${ownProps.remainingDepth}`;
+  const text = state.strings[stringId] || "unknown";
+
+  return { text, stringId };
+};
+
+const textMapDispatch = { initialize };
+
+class TextDisplay extends Component {
+  componentDidMount() {
+    const { stringId } = this.props;
+    this.props.initialize({ stringId });
+  }
+
+  render() {
+    const { text, stringId, children } = this.props;
+
+    return (
+      <div>
+        Text {stringId}:<br />
+        <textarea value={text} />
+        {children}
+      </div>
+    );
+  }
+}
+TextDisplay.displayName = "TextDisplay";
+
+const ConnectedTextDisplay = connect(
+  textMapState,
+  textMapDispatch
+)(TextDisplay);
+
+class Slice extends Component {
+  state = {};
+
+  componentDidMount = () => {
+    //this.props.fillPairs(this.props.idx);
+  };
+
+  render() {
+    const { remainingDepth, idx } = this.props;
+
+    if (remainingDepth > 0) {
+      let renderedChild = (
+        <div>
+          {idx}.{remainingDepth}
+          <div>
+            <Slice idx={idx} remainingDepth={remainingDepth - 1} />
+          </div>
+        </div>
+      );
+
+      if (remainingDepth % TEXT_INPUT_MOD === 0) {
+        renderedChild = (
+          <ConnectedTextDisplay
+            idx={idx}
+            inputId={remainingDepth / TEXT_INPUT_MOD}
+          >
+            {renderedChild}
+          </ConnectedTextDisplay>
+        );
+      }
+
+      return renderedChild;
+    }
+
+    return <ConnectedCounter idx={idx} />;
+  }
+}
+Slice.displayName = "Slice";
+
+export default Slice;
+//export default connect(mapStateToProps, actions)(Slice);

src/scenarios/deeptree-nested/constants.js

@@ -0,0 +1,5 @@
+export const NUMBER_OF_SLICES = 200;
+
+export const TREE_DEPTH = 15;
+
+export const TEXT_INPUT_MOD = 5;

src/scenarios/deeptree-nested/counters.js

@@ -0,0 +1,38 @@
+import { createSlice } from '@reduxjs/toolkit'
+import * as c from './constants'
+
+const { reducer, actions } = createSlice({
+  name: 'counters',
+  initialState: {},
+  reducers: {
+    initialize(state, action) {
+      const { numberOfCounters } = action.payload
+      for (let i = 0; i < numberOfCounters; i++) {
+        state[i] = 0
+      }
+    },
+    increment(state, action) {
+      const { counterId } = action.payload
+      const value = state[counterId] || 0
+      state[counterId] = value + 1
+    },
+    incrementMany(state, action) {
+      const { mod } = action.payload
+      for (let counterId = 0; counterId < c.NUMBER_OF_SLICES; counterId++) {
+        if (counterId % mod === 0) {
+          const value = state[counterId] || 0
+          state[counterId] = value + 1
+        }
+      }
+    },
+  },
+})
+
+export const { initialize, increment, incrementMany } = actions
+
+export function incrementRandomCounter() {
+  const counterId = Math.floor(Math.random() * c.NUMBER_OF_SLICES)
+  return increment({ counterId })
+}
+
+export default reducer

src/scenarios/deeptree-nested/index.tsx

@@ -0,0 +1,49 @@
+import React, { useLayoutEffect } from 'react'
+import ReactDOM from 'react-dom'
+import { configureStore, AnyAction } from '@reduxjs/toolkit'
+
+import { renderApp } from '../../common'
+
+import App from './App'
+import * as c from './constants'
+import countersReducer, { initialize } from './counters'
+import stringsReducer from './strings'
+
+const store = configureStore({
+  reducer: {
+    counters: countersReducer,
+    strings: stringsReducer,
+  },
+  middleware: (gdm) =>
+    gdm({
+      immutabilityCheck: false,
+      serializableCheck: false,
+    }),
+})
+
+store.dispatch(initialize({ numberOfCounters: c.NUMBER_OF_SLICES }))
+
+function clickButton(id) {
+  const element = document.getElementById(id)
+
+  if (element) {
+    element.click()
+  }
+}
+
+const MULTIPLIER = 2
+
+const DeepTreeNestedApp = () => {
+  useLayoutEffect(() => {
+    setInterval(() => clickButton('incrementRandom'), 13 * MULTIPLIER)
+    setInterval(() => clickButton('appendRandomCharacter'), 37 * MULTIPLIER)
+    setInterval(() => clickButton('incrementFifth'), 103 * MULTIPLIER)
+    setInterval(() => clickButton('incrementThird'), 193 * MULTIPLIER)
+    setInterval(() => clickButton('appendMany'), 251 * MULTIPLIER)
+  }, [])
+
+  return <App />
+}
+
+// @ts-ignore
+renderApp(DeepTreeNestedApp, store)

src/scenarios/deeptree-nested/strings.js

@@ -0,0 +1,83 @@
+import { createSlice } from '@reduxjs/toolkit'
+import * as c from './constants'
+
+import { TEXT_INPUT_MOD, TREE_DEPTH } from './constants'
+
+const { reducer, actions } = createSlice({
+  name: 'strings',
+  initialState: {},
+  reducers: {
+    initialize(state, action) {
+      const { stringId } = action.payload
+      state[stringId] = 'a'
+    },
+    append(state, action) {
+      const { stringId, character } = action.payload
+
+      if (state[stringId]) {
+        state[stringId] += character
+      }
+      //const value = state[counterId] || 0;
+      //state[counterId] = value + 1;
+    },
+    appendMany(state, action) {
+      const { mod, character } = action.payload
+      const keys = Object.keys(state)
+
+      keys.forEach((stringId, index) => {
+        if (index % mod === 0) {
+          state[stringId] += character
+        }
+      })
+      for (let counterId = 0; counterId < c.NUMBER_OF_SLICES; counterId++) {
+        if (counterId % mod === 0) {
+          const value = state[counterId] || 0
+          state[counterId] = value + 1
+        }
+      }
+    },
+  },
+})
+
+export const { initialize, append, appendMany } = actions
+
+const CHARACTERS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'
+let nextCharCounter = 0
+
+export function createStringId(sliceId, depth) {
+  const stringId = `${sliceId}-${depth}`
+  return stringId
+}
+
+function getNextCharacter() {
+  const charIndex = nextCharCounter % CHARACTERS.length
+  nextCharCounter++
+  const character = CHARACTERS.charAt(charIndex)
+  return character
+}
+
+function getRandomInt(min, max) {
+  min = Math.ceil(min)
+  max = Math.floor(max)
+  return Math.floor(Math.random() * (max - min + 1)) + min
+}
+
+export function appendRandomCharacter() {
+  const sliceId = getRandomInt(0, c.NUMBER_OF_SLICES)
+  const maxTextsPerSlice = Math.floor(TREE_DEPTH / TEXT_INPUT_MOD)
+  const selectedTextId = getRandomInt(1, maxTextsPerSlice)
+
+  const character = getNextCharacter()
+
+  const stringId = createStringId(sliceId, selectedTextId)
+
+  return append({ stringId, character })
+}
+
+export function appendRandomCharToMany(mod) {
+  const character = getNextCharacter()
+
+  return appendMany({ mod, character })
+}
+
+export default reducer