Port forms scenario

Author: markerikson

src/scenarios/forms/App.jsx

@@ -0,0 +1,48 @@
+import React from "react";
+import { connect } from "react-redux";
+
+import Form from "./Form";
+import * as c from "./constants";
+
+import { typeTextInRandomInput } from "./inputs";
+
+let slices;
+
+const mapState = state => {
+  if (!slices) {
+    slices = Object.keys(state).map(key => Number(key));
+    //slices.sort();
+  }
+
+  return { slices };
+};
+
+//const mapDispatch = { typeTextInRandomInput };
+
+async function infiniteBobRoss() {
+  while (true) {
+    await typeTextInRandomInput();
+  }
+}
+
+class App extends React.Component {
+  render() {
+    return (
+      <div>
+        <button onClick={infiniteBobRoss}>Type Text</button>
+        <div className="row">
+          {this.props.slices.map((slice, idx) => {
+            return (
+              <div style={{ display: "inline-block", minWidth: 70 }} key={idx}>
+                <Form id={slice} />
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    );
+  }
+}
+App.displayName = "App";
+
+export default connect(mapState)(App);

src/scenarios/forms/Form.jsx

@@ -0,0 +1,43 @@
+import React from "react";
+import { connect } from "react-redux";
+
+import { updateInput } from "./inputs";
+
+import * as c from "./constants";
+
+const mapState = (state, ownProps) => {
+  return {
+    text: state[ownProps.id]
+  };
+};
+
+const mapDispatch = { updateInput };
+
+class Form extends React.Component {
+  onChange = e => {
+    this.props.updateInput({ inputId: this.props.id, text: e.target.value });
+  };
+
+  render() {
+    const { text, id } = this.props;
+
+    const fillers = Array.from({
+      length: c.NUMBER_OF_CHECKBOXES_PER_FORM
+    }).map((item, i) => <input type="checkbox" key={i} />);
+
+    return (
+      <React.Fragment>
+        <form style={{ display: "flex", alignItems: "flex-start" }}>
+          Form {id}:
+          <textarea id={`input-${id}`} value={text} onChange={this.onChange} />
+        </form>
+        <div>{fillers}</div>
+      </React.Fragment>
+    );
+  }
+}
+
+export default connect(
+  mapState,
+  mapDispatch
+)(Form);

src/scenarios/forms/constants.js

@@ -0,0 +1,2 @@
+export const NUMBER_OF_INPUTS = 500;
+export const NUMBER_OF_CHECKBOXES_PER_FORM = 50;

src/scenarios/forms/index.tsx

@@ -0,0 +1,44 @@
+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, typeTextInRandomInput } from './inputs'
+
+const store = configureStore({
+  reducer: rootReducer,
+  middleware: (gdm) =>
+    gdm({
+      immutabilityCheck: false,
+      serializableCheck: false,
+    }),
+})
+
+store.dispatch(initialize({ numberOfInputs: c.NUMBER_OF_INPUTS }))
+
+async function infiniteBobRoss() {
+  while (true) {
+    await typeTextInRandomInput()
+  }
+}
+
+const FormsApp = () => {
+  useLayoutEffect(() => {
+    setTimeout(infiniteBobRoss, 50)
+
+    setTimeout(infiniteBobRoss, 70)
+
+    setTimeout(infiniteBobRoss, 90)
+
+    setTimeout(infiniteBobRoss, 110)
+  }, [])
+
+  return <App />
+}
+
+// @ts-ignore
+renderApp(FormsApp, store)

src/scenarios/forms/inputs.js

@@ -0,0 +1,41 @@
+import { createSlice } from '@reduxjs/toolkit'
+import * as c from './constants'
+import userEvent from '@testing-library/user-event'
+
+const { reducer, actions } = createSlice({
+  initialState: {},
+  name: 'inputs',
+  reducers: {
+    initialize(state, action) {
+      const { numberOfInputs } = action.payload
+      for (let i = 0; i < numberOfInputs; i++) {
+        state[i] = ''
+      }
+    },
+    updateInput(state, action) {
+      const { inputId, text } = action.payload
+      state[inputId] = text
+    },
+  },
+})
+
+export const { initialize, updateInput } = actions
+
+const BOB_ROSS_IPSUM = `
+Little short strokes. And I know you're saying, 'Oh Bob, you've done it this 
+time.' And you may be right. You can do anything here. So don't worry about it. 
+Even the worst thing we can do here is good. Absolutely no pressure. You are 
+just a whisper floating across a mountain. Isn't that fantastic that you can 
+create an almighty tree that fast?
+`.trim()
+
+export function typeTextInRandomInput() {
+  const inputId = Math.floor(Math.random() * c.NUMBER_OF_INPUTS)
+  console.log('Input id: ', inputId)
+
+  const input = document.getElementById(`input-${inputId}`)
+
+  return userEvent.type(input, BOB_ROSS_IPSUM, { delay: 25 })
+}
+
+export default reducer