Fix/debounce company card onchange (#580)

* Add internal state and debounce for editable text card

* Use debounce for date fields too

* Update refetch

* Nit

front/src/modules/pipeline-progress/components/Board.tsx

@@ -83,7 +83,7 @@ export function Board({
 
   useEffect(() => {
     setBoardItems(initialItems);
-  }, [initialItems, setBoardItems]);
+  }, [initialItems, setBoardItems, boardItems]);
 
   useEffect(() => {
     if (isInitialBoardLoaded) return;

front/src/modules/pipeline-progress/components/NewButton.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useState } from 'react';
+import { getOperationName } from '@apollo/client/utilities';
 import { useRecoilState } from 'recoil';
 import { v4 as uuidv4 } from 'uuid';
 
@@ -13,6 +14,7 @@ import {
   useCreateOnePipelineProgressMutation,
 } from '~/generated/graphql';
 
+import { GET_PIPELINES } from '../queries';
 import { boardColumnsState } from '../states/boardColumnsState';
 import { boardItemsState } from '../states/boardItemsState';
 
@@ -28,7 +30,9 @@ export function NewButton({ pipelineId, columnId }: OwnProps) {
   const [board, setBoard] = useRecoilState(boardColumnsState);
   const [boardItems, setBoardItems] = useRecoilState(boardItemsState);
 
-  const [createOnePipelineProgress] = useCreateOnePipelineProgressMutation();
+  const [createOnePipelineProgress] = useCreateOnePipelineProgressMutation({
+    refetchQueries: [getOperationName(GET_PIPELINES) ?? ''],
+  });
   const onEntitySelect = useCallback(
     async (company: Pick<Company, 'id' | 'name' | 'domainName'>) => {
       setIsCreatingCard(false);

front/src/modules/pipeline-progress/hooks/useBoard.ts

@@ -21,6 +21,7 @@ type Items = { [key: string]: Item };
 export function useBoard(pipelineId: string) {
   const pipelines = useGetPipelinesQuery({
     variables: { where: { id: { equals: pipelineId } } },
+    skip: pipelineId === '',
   });
   const pipelineStages = pipelines.data?.findManyPipeline[0]?.pipelineStages;
   const orderedPipelineStages = pipelineStages

front/src/modules/ui/board-card-field-inputs/components/BoardCardEditableFieldDate.tsx

@@ -1,5 +1,8 @@
+import { useMemo, useState } from 'react';
+
 import { BoardCardEditableField } from '@/ui/board-card-field/components/BoardCardEditableField';
 import { InplaceInputDateDisplayMode } from '@/ui/inplace-inputs/components/InplaceInputDateDisplayMode';
+import { debounce } from '@/utils/debounce';
 
 import { BoardCardEditableFieldDateEditMode } from './BoardCardEditableFieldDateEditMode';
 
@@ -14,11 +17,21 @@ export function BoardCardEditableFieldDate({
   onChange,
   editModeHorizontalAlign,
 }: OwnProps) {
+  const [internalValue, setInternalValue] = useState(value);
+  const debouncedOnChange = useMemo(() => {
+    return debounce(onChange, 200);
+  }, [onChange]);
   return (
     <BoardCardEditableField
       editModeHorizontalAlign={editModeHorizontalAlign}
       editModeContent={
-        <BoardCardEditableFieldDateEditMode value={value} onChange={onChange} />
+        <BoardCardEditableFieldDateEditMode
+          value={internalValue}
+          onChange={(date: Date) => {
+            setInternalValue(date);
+            debouncedOnChange(date);
+          }}
+        />
       }
       nonEditModeContent={<InplaceInputDateDisplayMode value={value} />}
     ></BoardCardEditableField>

front/src/modules/ui/board-card-field-inputs/components/BoardCardEditableFieldText.tsx

@@ -1,8 +1,9 @@
-import { ChangeEvent } from 'react';
+import { ChangeEvent, useMemo, useState } from 'react';
 
 import { BoardCardEditableField } from '@/ui/board-card-field/components/BoardCardEditableField';
 import { InplaceInputTextDisplayMode } from '@/ui/inplace-inputs/components/InplaceInputTextDisplayMode';
 import { InplaceInputTextEditMode } from '@/ui/inplace-inputs/components/InplaceInputTextEditMode';
+import { debounce } from '@/utils/debounce';
 
 type OwnProps = {
   placeholder?: string;
@@ -17,6 +18,10 @@ export function BoardCardEditableFieldText({
   onChange,
   editModeHorizontalAlign,
 }: OwnProps) {
+  const [internalValue, setInternalValue] = useState(value);
+  const debouncedOnChange = useMemo(() => {
+    return debounce(onChange, 200);
+  }, [onChange]);
   return (
     <BoardCardEditableField
       editModeHorizontalAlign={editModeHorizontalAlign}
@@ -24,9 +29,10 @@ export function BoardCardEditableFieldText({
         <InplaceInputTextEditMode
           placeholder={placeholder || ''}
           autoFocus
-          value={value}
+          value={internalValue}
           onChange={(event: ChangeEvent<HTMLInputElement>) => {
-            onChange(event.target.value);
+            setInternalValue(event.target.value);
+            debouncedOnChange(event.target.value);
           }}
         />
       }