fix: adding a column doesn't affect previous edited columns (#1011)

xgeekshq · Feb 6, 2023 · 2f0864e · 2f0864e
1 parent 6f8b8f8
commit 2f0864e
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 18 deletions.
diff --git a/frontend/src/components/Board/Settings/partials/Columns/ColumnBoxAndDelete.tsx b/frontend/src/components/Board/Settings/partials/Columns/ColumnBoxAndDelete.tsx
@@ -1,5 +1,8 @@
 import Flex from '@/components/Primitives/Flex';
 import Input from '@/components/Primitives/Input';
+import { editColumnsState } from '@/store/board/atoms/board.atom';
+import { useRecoilState } from 'recoil';
+import { useState } from 'react';
 import { DeleteColumnButton } from './DeleteButton';
 
 interface Props {
@@ -8,25 +11,55 @@ interface Props {
   disableDeleteColumn?: boolean;
 }
 
-const ColumnBoxAndDelete = ({ title, index, disableDeleteColumn }: Props) => (
-  <Flex gap={20}>
-    <Input
-      forceState
-      css={{ mb: '0px' }}
-      id={`column${index + 1}title`}
-      maxChars="30"
-      placeholder={`Column ${index + 1}`}
-      state="default"
-      type="text"
-    />
-    <Flex direction="column">
-      <DeleteColumnButton
-        columnTitle={title}
-        columnIndex={index}
-        disableDeleteColumn={disableDeleteColumn}
+const ColumnBoxAndDelete = ({ title, index, disableDeleteColumn }: Props) => {
+  const [editColumns, setEditColumns] = useRecoilState(editColumnsState);
+  const [timer, setTimer] = useState<NodeJS.Timeout>();
+
+  const updateColumns = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const columns = [...editColumns];
+
+    const columnEditedIdx = columns.findIndex((column) => column.title === title);
+    let columnToUpdate = columns.splice(columnEditedIdx, 1)[0];
+
+    columnToUpdate = {
+      ...columnToUpdate,
+      title: event.target.value,
+    };
+
+    columns.splice(columnEditedIdx, 0, columnToUpdate);
+
+    setEditColumns(columns);
+  };
+
+  const handleOnInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    clearTimeout(timer);
+
+    const newTimer = setTimeout(() => updateColumns(event), 500);
+
+    setTimer(newTimer);
+  };
+
+  return (
+    <Flex gap={20}>
+      <Input
+        forceState
+        css={{ mb: '0px' }}
+        id={`column${index + 1}title`}
+        maxChars="30"
+        placeholder={`Column ${index + 1}`}
+        state="default"
+        type="text"
+        onChange={handleOnInputChange}
       />
+      <Flex direction="column">
+        <DeleteColumnButton
+          columnTitle={title}
+          columnIndex={index}
+          disableDeleteColumn={disableDeleteColumn}
+        />
+      </Flex>
     </Flex>
-  </Flex>
-);
+  );
+};
 
 export { ColumnBoxAndDelete };
diff --git a/frontend/src/components/Primitives/Input.tsx b/frontend/src/components/Primitives/Input.tsx
@@ -187,6 +187,7 @@ interface InputProps extends StyledInpupProps {
   currentValue?: string;
   maxChars?: string;
   showCount?: boolean;
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
 const Input: React.FC<InputProps> = ({
@@ -205,6 +206,7 @@ const Input: React.FC<InputProps> = ({
   maxChars,
   min,
   showCount,
+  onChange,
 }) => {
   Input.defaultProps = {
     state: undefined,
@@ -308,6 +310,7 @@ const Input: React.FC<InputProps> = ({
             inputRef.current = e;
           }}
           onFocus={clearErrorCode}
+          onChange={onChange}
         />
         <PlaceholderText as="label" data-iconposition={iconPosition} htmlFor={id}>
           {placeholder}