Port deeptree scenario

Author: markerikson

src/scenarios/deeptree/App.jsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { connect } from "react-redux";
+
+import Slice from "./Slice";
+import * as c from "./constants";
+import { incrementRandomCounter } from "./counters";
+
+let slices;
+
+const mapState = state => {
+  if (!slices) {
+    slices = Object.keys(state).map(key => Number(key));
+    slices.sort();
+  }
+
+  return { slices };
+};
+
+const mapDispatch = { incrementRandomCounter };
+
+class App extends React.Component {
+  render() {
+    return (
+      <div>
+        <button onClick={this.props.incrementRandomCounter}>
+          Update Random Counter
+        </button>
+        <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/Slice.jsx

@@ -0,0 +1,43 @@
+import React, { Component } from "react";
+import { connect } from "react-redux";
+
+const mapStateToProps = (state, props) => {
+  return {
+    value: state[props.idx]
+  };
+};
+
+const Counter = ({ value }) => {
+  return <div>Value: {value}</div>;
+};
+
+const ConnectedCounter = connect(mapStateToProps)(Counter);
+
+class Slice extends Component {
+  state = {};
+
+  componentDidMount = () => {
+    //this.props.fillPairs(this.props.idx);
+  };
+
+  render() {
+    const { remainingDepth, idx } = this.props;
+
+    if (remainingDepth > 0) {
+      return (
+        <div>
+          {idx}.{remainingDepth}
+          <div>
+            <Slice idx={idx} remainingDepth={remainingDepth - 1} />
+          </div>
+        </div>
+      );
+    }
+
+    return <ConnectedCounter idx={idx} />;
+  }
+}
+Slice.displayName = "Slice";
+
+export default Slice;
+//export default connect(mapStateToProps, actions)(Slice);

src/scenarios/deeptree/constants.js

@@ -0,0 +1,3 @@
+export const NUMBER_OF_SLICES = 250;
+
+export const TREE_DEPTH = 15;

src/scenarios/deeptree/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/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 rootReducer, {
+  initialize,
+  incrementRandomCounter,
+  incrementMany,
+} from './counters'
+
+const store = configureStore({
+  reducer: rootReducer,
+  middleware: (gdm) =>
+    gdm({
+      immutabilityCheck: false,
+      serializableCheck: false,
+    }),
+})
+
+store.dispatch(initialize({ numberOfCounters: c.NUMBER_OF_SLICES }))
+
+function doRandomUpdate() {
+  store.dispatch(incrementRandomCounter())
+}
+
+function doUpdateMany(mod: number) {
+  store.dispatch(incrementMany({ mod }))
+}
+
+const DeepTreeApp = () => {
+  useLayoutEffect(() => {
+    setInterval(doRandomUpdate, 13)
+
+    setInterval(() => doUpdateMany(5), 21)
+
+    setInterval(doRandomUpdate, 34)
+
+    setInterval(() => doUpdateMany(3), 55)
+  }, [])
+
+  return <App />
+}
+
+// @ts-ignore
+renderApp(DeepTreeApp, store)