refactor: Op

packages/entity/src/behavior-components/expression.jsx

@@ -1,10 +1,11 @@
 import {join} from 'path';
 
-import {isKey} from '@avocado/behavior';
+import {isInvocation, isKey} from '@avocado/behavior';
 import {PropTypes, React} from '@latus/react';
 import classnames from 'classnames';
 
-import Op from './expression/op';
+import Invocation from './expression/invocation';
+import Key from './expression/key';
 
 const Expression = ({
   context,
@@ -19,25 +20,40 @@ const Expression = ({
   // eslint-disable-next-line react/destructuring-assignment
   let description = context.constructor.descriptionFor(walk);
   do {
-    Ops.push(
-      <Op
-        description={description}
-        context={context}
-        Expression={Expression}
-        key={JSON.stringify(ops[i])}
-        op={ops[i]}
-        path={join(path, 'ops', Ops.length.toString())}
-      />,
-    );
-    if (isKey(ops[i])) {
+    const op = ops[i];
+    const opKey = JSON.stringify(op);
+    const opPath = join(path, 'ops', Ops.length.toString());
+    if (isKey(op)) {
+      Ops.push(
+        <Key
+          description={description}
+          key={opKey}
+          op={op}
+          path={opPath}
+        />,
+      );
+    }
+    if (isInvocation(op)) {
+      Ops.push(
+        <Invocation
+          context={context}
+          description={description}
+          Expression={Expression}
+          key={opKey}
+          op={op}
+          path={opPath}
+        />,
+      );
+    }
+    if (isKey(op)) {
       if (context === walk) {
-        [walk] = context.get(ops[i].key);
+        [walk] = context.get(op.key);
       }
       else {
-        walk = walk[ops[i].key];
+        walk = walk[op.key];
       }
       description = {
-        ...description.children[ops[i].key],
+        ...description.children[op.key],
         ...context.constructor.descriptionFor(walk),
       };
     }

packages/entity/src/behavior-components/expression/op.jsx

@@ -1,47 +0,0 @@
-import {
-  isInvocation,
-  isKey,
-} from '@avocado/behavior';
-import {PropTypes, React} from '@latus/react';
-
-import Invocation from './invocation';
-import Key from './key';
-
-const Op = ({
-  context,
-  description,
-  Expression,
-  op,
-  path,
-}) => (
-  <div className="op">
-    {isKey(op) && (
-      <Key
-        description={description}
-        op={op}
-        path={path}
-      />
-    )}
-    {isInvocation(op) && (
-      <Invocation
-        context={context}
-        description={description}
-        Expression={Expression}
-        op={op}
-        path={path}
-      />
-    )}
-  </div>
-);
-
-Op.propTypes = {
-  context: PropTypes.shape({}).isRequired,
-  description: PropTypes.shape({}).isRequired,
-  Expression: PropTypes.func.isRequired,
-  op: PropTypes.shape({
-    key: PropTypes.string,
-  }).isRequired,
-  path: PropTypes.string.isRequired,
-};
-
-export default Op;