From 39e20eb6fe94872e309fb2513e29897e078fa7ba Mon Sep 17 00:00:00 2001 From: lfjnascimento Date: Wed, 17 Jul 2024 14:14:46 -0300 Subject: [PATCH] refactor(#77): remove input from tree page and add debounced input --- .../DebounceInput/DebounceInput.tsx | 32 +++++++++++++++++++ dashboard/src/hooks/useDebounce.tsx | 2 +- dashboard/src/routes/Trees/Trees.tsx | 10 +++--- 3 files changed, 37 insertions(+), 7 deletions(-) create mode 100644 dashboard/src/components/DebounceInput/DebounceInput.tsx diff --git a/dashboard/src/components/DebounceInput/DebounceInput.tsx b/dashboard/src/components/DebounceInput/DebounceInput.tsx new file mode 100644 index 0000000..89ee603 --- /dev/null +++ b/dashboard/src/components/DebounceInput/DebounceInput.tsx @@ -0,0 +1,32 @@ +import { useEffect, useState } from 'react'; + +import { useDebounce } from '../../hooks/useDebounce'; +import { Input, InputProps } from '../ui/input'; + +interface IDebounceInput extends InputProps { + interval: number; +} + +const DebounceInput = ({ + interval, + onChange, + ...props +}: IDebounceInput): JSX.Element => { + const [inputEvent, setInputEvent] = + useState>(); + const eDebounced = useDebounce(inputEvent, interval); + + const onInputSearchTextChange = ( + e: React.ChangeEvent, + ): void => { + setInputEvent(e); + }; + + useEffect(() => { + if (eDebounced && onChange) onChange(eDebounced); + }, [eDebounced, onChange]); + + return ; +}; + +export default DebounceInput; diff --git a/dashboard/src/hooks/useDebounce.tsx b/dashboard/src/hooks/useDebounce.tsx index ebff03e..b099504 100644 --- a/dashboard/src/hooks/useDebounce.tsx +++ b/dashboard/src/hooks/useDebounce.tsx @@ -1,6 +1,6 @@ import { useState, useEffect } from 'react'; -export const useDebounce = (input: string, delay: number): string => { +export const useDebounce = (input: T, delay: number): T => { const [debouncedValue, setDebouncedValue] = useState(input); useEffect(() => { diff --git a/dashboard/src/routes/Trees/Trees.tsx b/dashboard/src/routes/Trees/Trees.tsx index 40fb4b5..14fe0f9 100644 --- a/dashboard/src/routes/Trees/Trees.tsx +++ b/dashboard/src/routes/Trees/Trees.tsx @@ -2,13 +2,10 @@ import { ChangeEvent, useCallback, useState } from 'react'; import TreeListingPage from '@/components/TreeListingPage/TreeListingPage'; -import { Input } from '@/components/ui/input'; - -import { useDebounce } from '../../hooks/useDebounce'; +import DebounceInput from '@/components/DebounceInput/DebounceInput'; const Trees = (): JSX.Element => { const [inputSearchText, setInputSearchText] = useState(''); - const debouncedInput = useDebounce(inputSearchText, DEBOUNCE_INTERVAL); const onInputSearchTextChange = useCallback( (e: ChangeEvent) => { @@ -20,17 +17,18 @@ const Trees = (): JSX.Element => { return ( <>
- +
{/* placeholder for search */} {/* TODO: use i18n for the input placeholder */} -