feat: actions, traversal, routines state

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

@@ -13,30 +13,45 @@ const decorate = compose(
 const Actions = ({
   context,
   onChange = () => {},
-  value,
-}) => (
-  <div className="actions">
-    <ol>
-      {
-        value && value.traversals.length > 0 && (
-          value.traversals.map(
-            (traversal, i) => (
-              // eslint-disable-next-line react/no-array-index-key
-              <li key={i}>
-                <Traversal.Component
-                  context={context}
-                  onChange={onChange}
-                  type="any"
-                  value={traversal}
-                />
-              </li>
-            ),
+  value = {},
+}) => {
+  const {traversals = []} = value;
+  return (
+    <div className="actions">
+      <ol>
+        {
+          traversals.length > 0 && (
+            traversals.map(
+              (traversal, i) => (
+                // eslint-disable-next-line react/no-array-index-key
+                <li key={i}>
+                  <Traversal.Component
+                    context={context}
+                    onChange={(traversalValue) => {
+                      return onChange({
+                        ...value,
+                        traversals: [
+                          ...traversals.slice(0, i),
+                          {
+                            ...traversals[i],
+                            ...traversalValue,
+                          },
+                          ...traversals.slice(i + 1),
+                        ],
+                      });
+                    }}
+                    type="any"
+                    value={traversal}
+                  />
+                </li>
+              ),
+            )
           )
-        )
-      }
-    </ol>
-  </div>
-);
+        }
+      </ol>
+    </div>
+  );
+};
 
 Actions.propTypes = {
   ...propTypes,

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

@@ -13,9 +13,10 @@ const decorate = compose(
 const Routines = ({
   context,
   onChange = () => {},
-  value,
+  value = {},
 }) => {
-  const entries = value.routines ? Object.entries(value.routines) : [];
+  const {routines = {}} = value;
+  const entries = Object.entries(routines);
   return (
     <div className="routines">
       <ol>
@@ -28,7 +29,20 @@ const Routines = ({
                     <span className="text">{name}</span>
                     <Actions.Component
                       context={context}
-                      onChange={onChange}
+                      onChange={(actionsValue) => {
+                        return onChange({
+                          ...value,
+                          routines: {
+                            ...routines,
+                            [name]: {
+                              ...routine,
+                              routine: {
+                                ...actionsValue,
+                              },
+                            },
+                          },
+                        });
+                      }}
                       value={routine.routine}
                     />
                   </label>

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

@@ -5,7 +5,12 @@ import React from 'react';
 import Value from '~/client/value';
 
 import propTypes from './prop-types';
-import {descriptionFromSteps, stepsOptions, typeFromSteps} from './typing';
+import {
+  descriptionFromSteps,
+  stepsOptions,
+  toBehaviorItem,
+  typeFromSteps,
+} from './typing';
 
 const decorate = compose(
   contempo(require('./traversal.raw.scss')),
@@ -16,8 +21,9 @@ const Traversal = (props) => {
     context,
     onChange = () => {},
     type,
-    value: {steps, value},
+    value = {},
   } = props;
+  const {steps, value: assignValue} = value;
   const stepsType = type || typeFromSteps(context, steps);
   const optionsList = stepsOptions(context, steps, stepsType);
   return (
@@ -72,14 +78,18 @@ const Traversal = (props) => {
         </span>
       ))}
       {
-        value && (
+        assignValue && (
           <span className="assign">
             <span className="op">=</span>
             <Value.Component
               context={context}
-              onChange={onChange}
+              onChange={(valueValue) => onChange({
+                ...value,
+                steps,
+                value: toBehaviorItem(valueValue),
+              })}
               type={stepsType}
-              value={value}
+              value={assignValue}
             />
           </span>
         )