Data picker - code cleanup (#5705)

* wip - refactor * update tests * remove todo * refactor if ladder in REPLACE_ELEMENT_IN_SCOPE * remove unused import
concrete-utopia · May 21, 2024 · d266b88 · d266b88
1 parent 4b33c77
commit d266b88
Show file tree

Hide file tree

Showing 13 changed files with 324 additions and 453 deletions.
diff --git a/editor/src/components/editor/action-types.ts b/editor/src/components/editor/action-types.ts
@@ -170,11 +170,14 @@ export interface ReplaceMappedElement {
   importsToAdd: Imports
 }
 
-export type ElementReplacementPath = {
-  type: 'replace-child-with-uid'
-  uid: string
-  replaceWith: JSXElementChild
-}
+export type ElementReplacementPath =
+  | {
+      type: 'replace-child-with-uid'
+      uid: string
+      replaceWith: JSXElementChild
+    }
+  | { type: 'update-map-expression'; valueToMap: JSExpression }
+  | { type: 'replace-property-value'; propertyPath: PropertyPath; replaceWith: JSExpression }
 
 export interface ReplaceElementInScope {
   action: 'REPLACE_ELEMENT_IN_SCOPE'
@@ -850,12 +853,6 @@ export interface UpdateConditionalExpression {
   expression: string
 }
 
-export interface UpdateMapExpression {
-  action: 'UPDATE_MAP_EXPRESSION'
-  target: ElementPath
-  expression: JSExpression
-}
-
 export interface AddImports {
   action: 'ADD_IMPORTS'
   target: ElementPath
@@ -1361,7 +1358,6 @@ export type EditorAction =
   | SetMapCountOverride
   | SwitchConditionalBranches
   | UpdateConditionalExpression
-  | UpdateMapExpression
   | ExecutePostActionMenuChoice
   | ClearPostActionSession
   | StartPostActionSession

diff --git a/editor/src/components/editor/actions/action-creators.ts b/editor/src/components/editor/actions/action-creators.ts
@@ -231,7 +231,6 @@ import type {
   IncreaseOnlineStateFailureCount,
   AddCollapsedViews,
   ReplaceMappedElement,
-  UpdateMapExpression,
   ReplaceTarget,
   InsertAsChildTarget,
   ReplaceKeepChildrenAndStyleTarget,
@@ -1771,17 +1770,6 @@ export function updateConditionalExpression(
   }
 }
 
-export function updateMapExpression(
-  target: ElementPath,
-  expression: JSExpression,
-): UpdateMapExpression {
-  return {
-    action: 'UPDATE_MAP_EXPRESSION',
-    target: target,
-    expression: expression,
-  }
-}
-
 export function switchConditionalBranches(target: ElementPath): SwitchConditionalBranches {
   return {
     action: 'SWITCH_CONDITIONAL_BRANCHES',

diff --git a/editor/src/components/editor/actions/action-utils.ts b/editor/src/components/editor/actions/action-utils.ts
@@ -209,7 +209,6 @@ export function isTransientAction(action: EditorAction): boolean {
     case 'SET_MAP_COUNT_OVERRIDE':
     case 'SWITCH_CONDITIONAL_BRANCHES':
     case 'UPDATE_CONIDTIONAL_EXPRESSION':
-    case 'UPDATE_MAP_EXPRESSION':
     case 'CUT_SELECTION_TO_CLIPBOARD':
     case 'UPDATE_TOP_LEVEL_ELEMENTS_FROM_COLLABORATION_UPDATE':
     case 'UPDATE_EXPORTS_DETAIL_FROM_COLLABORATION_UPDATE':

diff --git a/editor/src/components/editor/actions/actions.tsx b/editor/src/components/editor/actions/actions.tsx
@@ -56,7 +56,7 @@ import type {
   JSXElementChild,
   JSXConditionalExpression,
   JSXFragment,
-  JSXMapExpression,
+  JSExpression,
 } from '../../../core/shared/element-template'
 import {
   deleteJSXAttribute,
@@ -127,6 +127,7 @@ import type {
   ParseSuccess,
   ProjectContents,
   ProjectFile,
+  PropertyPath,
   StaticElementPath,
   TextFile,
 } from '../../../core/shared/project-file-types'
@@ -343,7 +344,6 @@ import type {
   RemoveFeaturedRoute,
   AddCollapsedViews,
   ReplaceMappedElement,
-  UpdateMapExpression,
   ReplaceElementInScope,
   ReplaceJSXElement,
 } from '../action-types'
@@ -2430,17 +2430,67 @@ export const UPDATE_FNS = {
     }
   },
   REPLACE_ELEMENT_IN_SCOPE: (action: ReplaceElementInScope, editor: EditorModel): EditorModel => {
-    return modifyUnderlyingTarget(action.target, editor, (element) => {
+    const replaceChildWithUid = (
+      element: JSXElementChild,
+      uid: string,
+      replaceWith: JSXElementChild,
+    ): JSXElementChild => {
       if (element.type !== 'JSX_ELEMENT' && element.type !== 'JSX_FRAGMENT') {
         return element
       }
 
       return {
         ...element,
-        children: element.children.map((c) =>
-          c.uid !== action.replacementPath.uid ? c : action.replacementPath.replaceWith,
+        children: element.children.map((c) => (c.uid !== uid ? c : replaceWith)),
+      }
+    }
+
+    const updateMapExpression = (
+      element: JSXElementChild,
+      valueToMap: JSExpression,
+    ): JSXElementChild => {
+      if (element.type !== 'JSX_MAP_EXPRESSION') {
+        return element
+      }
+      return {
+        ...element,
+        valueToMap: valueToMap,
+      }
+    }
+
+    const replacePropertyValue = (
+      element: JSXElementChild,
+      propertyPath: PropertyPath,
+      replaceWith: JSExpression,
+    ): JSXElementChild => {
+      if (element.type !== 'JSX_ELEMENT') {
+        return element
+      }
+      return {
+        ...element,
+        props: defaultEither(
+          element.props,
+          setJSXValueAtPath(element.props, propertyPath, replaceWith),
         ),
       }
+    }
+
+    return modifyUnderlyingTarget(action.target, editor, (element) => {
+      const replacementPath = action.replacementPath
+      switch (replacementPath.type) {
+        case 'replace-child-with-uid':
+          return replaceChildWithUid(element, replacementPath.uid, replacementPath.replaceWith)
+        case 'replace-property-value':
+          return replacePropertyValue(
+            element,
+            replacementPath.propertyPath,
+            replacementPath.replaceWith,
+          )
+        case 'update-map-expression':
+          return updateMapExpression(element, replacementPath.valueToMap)
+        default:
+          assertNever(replacementPath)
+      }
     })
   },
   INSERT_ATTRIBUTE_OTHER_JAVASCRIPT_INTO_ELEMENT: (
@@ -4386,22 +4436,6 @@ export const UPDATE_FNS = {
       editor,
     )
   },
-  UPDATE_MAP_EXPRESSION: (action: UpdateMapExpression, editor: EditorModel): EditorModel => {
-    return modifyOpenJsxChildAtPath(
-      action.target,
-      (element): JSXElementChild => {
-        if (isJSXMapExpression(element)) {
-          return {
-            ...element,
-            valueToMap: action.expression,
-          }
-        } else {
-          return element
-        }
-      },
-      editor,
-    )
-  },
   UPDATE_CONDITIONAL_EXPRESSION: (
     action: UpdateConditionalExpression,
     editor: EditorModel,

diff --git a/editor/src/components/editor/store/editor-update.tsx b/editor/src/components/editor/store/editor-update.tsx
@@ -459,8 +459,6 @@ export function runSimpleLocalEditorAction(
       return UPDATE_FNS.SET_MAP_COUNT_OVERRIDE(action, state)
     case 'UPDATE_CONIDTIONAL_EXPRESSION':
       return UPDATE_FNS.UPDATE_CONDITIONAL_EXPRESSION(action, state)
-    case 'UPDATE_MAP_EXPRESSION':
-      return UPDATE_FNS.UPDATE_MAP_EXPRESSION(action, state)
     case 'SWITCH_CONDITIONAL_BRANCHES':
       return UPDATE_FNS.SWITCH_CONDITIONAL_BRANCHES(action, state)
     case 'UPDATE_TOP_LEVEL_ELEMENTS_FROM_COLLABORATION_UPDATE':