From 1c8aaff39dc6da226810d4a813e5421d7f89de28 Mon Sep 17 00:00:00 2001 From: Emilien Chauvet Date: Mon, 10 Jul 2023 18:19:46 -0700 Subject: [PATCH] Fix/debounce company card onchange (#580) * Add internal state and debounce for editable text card * Use debounce for date fields too * Update refetch * Nit --- .../pipeline-progress/components/Board.tsx | 2 +- .../pipeline-progress/components/NewButton.tsx | 6 +++++- .../modules/pipeline-progress/hooks/useBoard.ts | 1 + .../components/BoardCardEditableFieldDate.tsx | 15 ++++++++++++++- .../components/BoardCardEditableFieldText.tsx | 12 +++++++++--- 5 files changed, 30 insertions(+), 6 deletions(-) diff --git a/front/src/modules/pipeline-progress/components/Board.tsx b/front/src/modules/pipeline-progress/components/Board.tsx index 3687f2888..55f103647 100644 --- a/front/src/modules/pipeline-progress/components/Board.tsx +++ b/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; diff --git a/front/src/modules/pipeline-progress/components/NewButton.tsx b/front/src/modules/pipeline-progress/components/NewButton.tsx index e138fd961..09f67430f 100644 --- a/front/src/modules/pipeline-progress/components/NewButton.tsx +++ b/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) => { setIsCreatingCard(false); diff --git a/front/src/modules/pipeline-progress/hooks/useBoard.ts b/front/src/modules/pipeline-progress/hooks/useBoard.ts index 8c90c4e9c..4ed764bcc 100644 --- a/front/src/modules/pipeline-progress/hooks/useBoard.ts +++ b/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 diff --git a/front/src/modules/ui/board-card-field-inputs/components/BoardCardEditableFieldDate.tsx b/front/src/modules/ui/board-card-field-inputs/components/BoardCardEditableFieldDate.tsx index fcd98724b..7318074b7 100644 --- a/front/src/modules/ui/board-card-field-inputs/components/BoardCardEditableFieldDate.tsx +++ b/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 ( + { + setInternalValue(date); + debouncedOnChange(date); + }} + /> } nonEditModeContent={} > diff --git a/front/src/modules/ui/board-card-field-inputs/components/BoardCardEditableFieldText.tsx b/front/src/modules/ui/board-card-field-inputs/components/BoardCardEditableFieldText.tsx index 8d062fa91..587d40355 100644 --- a/front/src/modules/ui/board-card-field-inputs/components/BoardCardEditableFieldText.tsx +++ b/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 ( ) => { - onChange(event.target.value); + setInternalValue(event.target.value); + debouncedOnChange(event.target.value); }} /> }