refactor: flat onChange

src/client/types/actions.type-renderer.jsx

@@ -13,7 +13,7 @@ const decorate = compose(
 
 const Actions = ({
   context,
-  dispatchers,
+  onChange = () => {},
   value,
 }) => (
   <div className="actions">
@@ -24,7 +24,7 @@ const Actions = ({
             (traversal, i) => (
               // eslint-disable-next-line react/no-array-index-key
               <li key={i}>
-                <Value.Component context={context} dispatchers={dispatchers} value={traversal} />
+                <Value.Component context={context} onChange={onChange} value={traversal} />
               </li>
             ),
           )

src/client/types/bool.type-renderer.jsx

@@ -4,9 +4,7 @@ import React from 'react';
 import propTypes from './prop-types';
 
 const Bool = ({
-  dispatchers: {
+  onChange = () => {},
-    onChange = () => {},
-  } = {},
   value,
 }) => (
   <select onChange={(event) => onChange(!!event.target.value, event)} value={value ? '1' : ''}>

src/client/types/condition.type-renderer.jsx

@@ -23,11 +23,11 @@ const decorate = compose(
 
 const Condition = ({
   context,
-  dispatchers: parentDispatchers,
+  onChange: parentOnChange = () => {},
   value,
 }) => {
   const onChange = (change) => {
-    parentDispatchers.onChange({
+    parentOnChange({
       ...value,
       ...change,
     });
@@ -41,15 +41,13 @@ const Condition = ({
       ...operands.slice(index + 1),
     ];
   };
-  const makeDispatchers = (index) => ({
+  const makeOnChange = (index) => (newValue, event) => {
-    onChange: (newValue, event) => {
+    onChange(
-      onChange(
+      operatorRef.current === event.target
-        operatorRef.current === event.target
+        ? {operator: newValue}
-          ? {operator: newValue}
+        : {operands: mergeToOperand(index, newValue)},
-          : {operands: mergeToOperand(index, newValue)},
+    );
-      );
+  };
-    },
-  });
   return (
     <span className="condition">
       {
@@ -63,13 +61,13 @@ const Condition = ({
             case '<=': {
               return value.operands.slice(1).reduce(
                 (r, operand, i) => {
-                  const opDispatchers = makeDispatchers(i + 1);
+                  const opOnChange = makeOnChange(i);
                   return (
                     <>
                       {r}
                       <select
                         className="operator"
-                        onChange={(event) => opDispatchers.onChange(event.target.value, event)}
+                        onChange={(event) => opOnChange(event.target.value, event)}
                         ref={operatorRef}
                         value={value.operator}
                       >
@@ -78,7 +76,7 @@ const Condition = ({
                       <span className="operand">
                         <Value.Component
                           context={context}
-                          dispatchers={opDispatchers}
+                          onChange={opOnChange}
                           value={operand}
                         />
                       </span>
@@ -89,7 +87,7 @@ const Condition = ({
                   <span className="operand">
                     <Value.Component
                       context={context}
-                      dispatchers={makeDispatchers(0)}
+                      onChange={makeOnChange(0)}
                       value={value.operands[0]}
                     />
                   </span>

src/client/types/literal.type-renderer.jsx

@@ -13,7 +13,7 @@ const decorate = compose(
 
 const Literal = ({
   context,
-  dispatchers,
+  onChange = () => {},
   value,
 }) => {
   const typeRenderers = useTypeRenderers();
@@ -30,7 +30,7 @@ const Literal = ({
             .map((option) => <option key={option}>{option}</option>)
         }
       </select>
-      {Component ? <Component dispatchers={dispatchers} value={value.value} /> : null}
+      {Component ? <Component onChange={onChange} value={value.value} /> : null}
     </div>
   );
 };

src/client/types/number.type-renderer.jsx

@@ -10,9 +10,7 @@ const decorate = compose(
 );
 
 const Number = ({
-  dispatchers: {
+  onChange = () => {},
-    onChange = () => {},
-  } = {},
   options,
   value,
 }) => {

src/client/types/routines.type-renderer.jsx

@@ -12,7 +12,7 @@ const decorate = compose(
 
 const Routines = ({
   context,
-  dispatchers,
+  onChange = () => {},
   value,
 }) => {
   const entries = value.routines ? Object.entries(value.routines) : [];
@@ -28,7 +28,7 @@ const Routines = ({
                     <span className="text">{name}</span>
                     <Actions.Component
                       context={context}
-                      dispatchers={dispatchers}
+                      onChange={onChange}
                       value={routine.routine}
                     />
                   </label>

src/client/types/string.type-renderer.jsx

@@ -4,9 +4,7 @@ import React from 'react';
 import propTypes from './prop-types';
 
 const String = ({
-  dispatchers: {
+  onChange = () => {},
-    onChange = () => {},
-  } = {},
   options,
   value,
 }) => (

src/client/types/traversal.type-renderer.jsx

@@ -14,7 +14,7 @@ const decorate = compose(
 const Traversal = (props) => {
   const {
     context,
-    dispatchers,
+    onChange = () => {},
     value: {steps, value},
   } = props;
   const stepsType = typeFromSteps(context, steps);
@@ -50,7 +50,7 @@ const Traversal = (props) => {
                             {arg.label}
                             <Value.Component
                               context={context}
-                              dispatchers={dispatchers}
+                              onChange={onChange}
                               value={arg}
                             />
                           </label>
@@ -72,7 +72,7 @@ const Traversal = (props) => {
             <span className="op">=</span>
             <Value.Component
               context={context}
-              dispatchers={dispatchers}
+              onChange={onChange}
               value={value}
             />
           </span>

src/client/types/vector.type-renderer.jsx

@@ -11,23 +11,17 @@ const decorate = compose(
 );
 
 const Vector = ({
-  dispatchers: {
+  onChange = () => {},
-    onChange = () => {},
-  } = {},
   value,
 }) => (
   <span className="vector">
     <Number.Component
-      dispatchers={{
+      onChange={(axe) => onChange([axe, value[1]])}
-        onChange: (axe) => onChange([axe, value[1]]),
-      }}
       value={value[0]}
     />
     <span className="separator">{' x '}</span>
     <Number.Component
-      dispatchers={{
+      onChange={(axe) => onChange([value[0], axe])}
-        onChange: (axe) => onChange([value[0], axe]),
-      }}
       value={value[1]}
     />
   </span>

src/client/value.jsx

@@ -14,7 +14,7 @@ const decorate = compose(
 
 const Value = ({
   context,
-  dispatchers,
+  onChange = () => {},
   options,
   type: typeHint,
   value,
@@ -36,7 +36,7 @@ const Value = ({
           ? (
             <Component
               context={context}
-              dispatchers={dispatchers}
+              onChange={onChange}
               options={options}
               type={type}
               value={value}

src/common/resources/entity/trait-pane.jsx

@@ -49,9 +49,7 @@ const makeTraitPaneRenderer = (context, dispatch, target, traitType) => (trait)
           <div className="invisible-separator" />
           <Value.Component
             context={context}
-            dispatchers={{
+            onChange={(value) => dispatch(setTraitProperty({...payload, value}))}
-              onChange: (value) => dispatch(setTraitProperty({...payload, value})),
-            }}
             options={options}
             type={type}
             value={values[key]}