From 2b56f83d4366861c81e8d47e86481fd7b437c96a Mon Sep 17 00:00:00 2001
From: Baptiste Arnaud <contact@baptiste-arnaud.fr>
Date: Wed, 11 May 2022 06:39:28 -0700
Subject: [PATCH] =?UTF-8?q?feat(editor):=20=E2=9A=A1=EF=B8=8F=20Rename=20v?=
 =?UTF-8?q?ariable=20button?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/shared/VariableSearchInput.tsx | 39 +++++++++++++++----
 .../TypebotContext/actions/variables.ts       |  2 +-
 2 files changed, 32 insertions(+), 9 deletions(-)

diff --git a/apps/builder/components/shared/VariableSearchInput.tsx b/apps/builder/components/shared/VariableSearchInput.tsx
index bdef934b1..bead54838 100644
--- a/apps/builder/components/shared/VariableSearchInput.tsx
+++ b/apps/builder/components/shared/VariableSearchInput.tsx
@@ -9,8 +9,9 @@ import {
   Button,
   InputProps,
   IconButton,
+  HStack,
 } from '@chakra-ui/react'
-import { PlusIcon, TrashIcon } from 'assets/icons'
+import { EditIcon, PlusIcon, TrashIcon } from 'assets/icons'
 import { useTypebot } from 'contexts/TypebotContext'
 import cuid from 'cuid'
 import { Variable } from 'models'
@@ -35,7 +36,8 @@ export const VariableSearchInput = ({
   ...inputProps
 }: Props) => {
   const { onOpen, onClose, isOpen } = useDisclosure()
-  const { typebot, createVariable, deleteVariable } = useTypebot()
+  const { typebot, createVariable, deleteVariable, updateVariable } =
+    useTypebot()
   const variables = typebot?.variables ?? []
   const [inputValue, setInputValue] = useState(
     variables.find(byId(initialVariableId))?.name ?? ''
@@ -113,6 +115,19 @@ export const VariableSearchInput = ({
       }
     }
 
+  const handleRenameVariableClick =
+    (variable: Variable) => (e: React.MouseEvent) => {
+      e.stopPropagation()
+      const name = prompt('Rename variable', variable.name)
+      if (!name) return
+      updateVariable(variable.id, { name })
+      setFilteredItems(
+        filteredItems.map((item) =>
+          item.id === variable.id ? { ...item, name } : item
+        )
+      )
+    }
+
   return (
     <Flex ref={dropdownRef} w="full">
       <Popover
@@ -174,12 +189,20 @@ export const VariableSearchInput = ({
                     justifyContent="space-between"
                   >
                     {item.name}
-                    <IconButton
-                      icon={<TrashIcon />}
-                      aria-label="Remove variable"
-                      size="xs"
-                      onClick={handleDeleteVariableClick(item)}
-                    />
+                    <HStack>
+                      <IconButton
+                        icon={<EditIcon />}
+                        aria-label="Rename variable"
+                        size="xs"
+                        onClick={handleRenameVariableClick(item)}
+                      />
+                      <IconButton
+                        icon={<TrashIcon />}
+                        aria-label="Remove variable"
+                        size="xs"
+                        onClick={handleDeleteVariableClick(item)}
+                      />
+                    </HStack>
                   </Button>
                 )
               })}
diff --git a/apps/builder/contexts/TypebotContext/actions/variables.ts b/apps/builder/contexts/TypebotContext/actions/variables.ts
index 721593c38..4be29276c 100644
--- a/apps/builder/contexts/TypebotContext/actions/variables.ts
+++ b/apps/builder/contexts/TypebotContext/actions/variables.ts
@@ -25,7 +25,7 @@ export const variablesAction = (setTypebot: SetTypebot): VariablesActions => ({
   ) =>
     setTypebot((typebot) =>
       produce(typebot, (typebot) => {
-        typebot.variables.map((v) =>
+        typebot.variables = typebot.variables.map((v) =>
           v.id === variableId ? { ...v, ...updates } : v
         )
       })