From e12e7754e48e0721edb9bfd1bf801a7385d359b7 Mon Sep 17 00:00:00 2001
From: David Kramer <74869455+Davidkramer1999@users.noreply.github.com>
Date: Sat, 30 Sep 2023 18:29:41 +0200
Subject: [PATCH] Fix board column title edit optimistic rendering #1745
 (#1780)

adding update of state as well

Co-authored-by: kramer <david.kramer@gmail.com>
---
 .../components/BoardColumnEditTitleMenu.tsx   | 28 +++++++++++++++----
 1 file changed, 23 insertions(+), 5 deletions(-)

diff --git a/front/src/modules/ui/board/components/BoardColumnEditTitleMenu.tsx b/front/src/modules/ui/board/components/BoardColumnEditTitleMenu.tsx
index 2629bd57a..c62040ede 100644
--- a/front/src/modules/ui/board/components/BoardColumnEditTitleMenu.tsx
+++ b/front/src/modules/ui/board/components/BoardColumnEditTitleMenu.tsx
@@ -76,15 +76,34 @@ export const BoardColumnEditTitleMenu = ({
   color,
 }: BoardColumnEditTitleMenuProps) => {
   const [internalValue, setInternalValue] = useState(title);
+  const [, setBoardColumns] = useRecoilState(boardColumnsState);
   const debouncedOnUpdateTitle = debounce(
     (newTitle) => onTitleEdit(newTitle, color),
     200,
   );
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
-    setInternalValue(event.target.value);
-    debouncedOnUpdateTitle(event.target.value);
+    const title = event.target.value;
+    setInternalValue(title);
+    debouncedOnUpdateTitle(title);
+
+    setBoardColumns((previousBoardColumns) =>
+      previousBoardColumns.map((column) =>
+        column.id === stageId ? { ...column, title: title } : column,
+      ),
+    );
+  };
+
+  const handleColorChange = (newColor: ThemeColor) => {
+    onTitleEdit(title, newColor);
+    onClose();
+    setBoardColumns((previousBoardColumns) =>
+      previousBoardColumns.map((column) =>
+        column.id === stageId
+          ? { ...column, colorCode: newColor ? newColor : 'gray' }
+          : column,
+      ),
+    );
   };
-  const [, setBoardColumns] = useRecoilState(boardColumnsState);
 
   const handleDelete = useCallback(() => {
     setBoardColumns((previousBoardColumns) =>
@@ -109,8 +128,7 @@ export const BoardColumnEditTitleMenu = ({
         <MenuItemSelectColor
           key={colorOption.name}
           onClick={() => {
-            onTitleEdit(title, colorOption.id);
-            onClose();
+            handleColorChange(colorOption.id);
           }}
           color={colorOption.id}
           selected={colorOption.id === color}