From 525e3a55ea612fb1accc8fe150bce2597359c2ec Mon Sep 17 00:00:00 2001 From: Gleidson Daniel Date: Thu, 25 Aug 2022 16:28:52 -0300 Subject: [PATCH 1/5] create useDebounce hook --- app/lib/methods/helpers/debounce.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/app/lib/methods/helpers/debounce.ts b/app/lib/methods/helpers/debounce.ts index edc7c5ac8b9..bbedb8954bb 100644 --- a/app/lib/methods/helpers/debounce.ts +++ b/app/lib/methods/helpers/debounce.ts @@ -1,3 +1,5 @@ +import { useCallback } from 'react'; + export function debounce(func: Function, wait?: number, immediate?: boolean) { let timeout: ReturnType | null; function _debounce(...args: any[]) { @@ -21,3 +23,7 @@ export function debounce(func: Function, wait?: number, immediate?: boolean) { _debounce.stop = () => clearTimeout(timeout!); return _debounce; } + +export function useDebounce(func: Function, wait?: number, immediate?: boolean): () => void { + return useCallback(debounce(func, wait, immediate), []); +} From 9b967dd5606ed74436fde918905d6d3e92f39bd1 Mon Sep 17 00:00:00 2001 From: Gleidson Daniel Date: Thu, 25 Aug 2022 16:40:09 -0300 Subject: [PATCH 2/5] fix types --- app/lib/methods/helpers/debounce.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/lib/methods/helpers/debounce.ts b/app/lib/methods/helpers/debounce.ts index bbedb8954bb..d7e93e4a8a5 100644 --- a/app/lib/methods/helpers/debounce.ts +++ b/app/lib/methods/helpers/debounce.ts @@ -24,6 +24,6 @@ export function debounce(func: Function, wait?: number, immediate?: boolean) { return _debounce; } -export function useDebounce(func: Function, wait?: number, immediate?: boolean): () => void { +export function useDebounce(func: Function, wait?: number, immediate?: boolean): (...args: any[]) => void { return useCallback(debounce(func, wait, immediate), []); } From d669fddeeb30757fb4ffef8cc03b537277e1dbe6 Mon Sep 17 00:00:00 2001 From: Gleidson Daniel Date: Thu, 25 Aug 2022 16:40:34 -0300 Subject: [PATCH 3/5] apply useDebounce hook --- app/views/CannedResponsesListView/index.tsx | 15 ++++++--------- app/views/DiscussionsView/index.tsx | 8 ++++---- 2 files changed, 10 insertions(+), 13 deletions(-) diff --git a/app/views/CannedResponsesListView/index.tsx b/app/views/CannedResponsesListView/index.tsx index bd2acd611ff..d525a6fa348 100644 --- a/app/views/CannedResponsesListView/index.tsx +++ b/app/views/CannedResponsesListView/index.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState, useCallback } from 'react'; +import React, { useEffect, useState } from 'react'; import { FlatList } from 'react-native'; import { RouteProp } from '@react-navigation/native'; import { StackNavigationOptions, StackNavigationProp } from '@react-navigation/stack'; @@ -24,7 +24,7 @@ import DropdownItemHeader from './Dropdown/DropdownItemHeader'; import styles from './styles'; import { ICannedResponse } from '../../definitions/ICannedResponse'; import { ChatsStackParamList } from '../../stacks/types'; -import { getRoomTitle, getUidDirectMessage, debounce } from '../../lib/methods/helpers'; +import { getRoomTitle, getUidDirectMessage, useDebounce } from '../../lib/methods/helpers'; import { Services } from '../../lib/services'; import { ILivechatDepartment } from '../../definitions/ILivechatDepartment'; import { useAppSelector } from '../../lib/hooks'; @@ -88,7 +88,7 @@ const CannedResponsesListView = ({ navigation, route }: ICannedResponsesListView } }; - const getDepartments = debounce(async () => { + const getDepartments = useDebounce(async () => { try { const res = await Services.getDepartments(); if (res.success) { @@ -187,12 +187,9 @@ const CannedResponsesListView = ({ navigation, route }: ICannedResponsesListView } }, [departments, cannedResponses]); - const searchCallback = useCallback( - debounce(async (text = '', department = '', depId = '') => { - await getListCannedResponse({ text, department, depId, debounced: true }); - }, 1000), - [] - ); // use debounce with useCallback https://stackoverflow.com/a/58594890 + const searchCallback = useDebounce(async (text = '', department = '', depId = '') => { + await getListCannedResponse({ text, department, depId, debounced: true }); + }, 1000); useEffect(() => { getRoomFromDb(); diff --git a/app/views/DiscussionsView/index.tsx b/app/views/DiscussionsView/index.tsx index 512f84e18ed..6230dadb042 100644 --- a/app/views/DiscussionsView/index.tsx +++ b/app/views/DiscussionsView/index.tsx @@ -10,7 +10,7 @@ import ActivityIndicator from '../../containers/ActivityIndicator'; import I18n from '../../i18n'; import StatusBar from '../../containers/StatusBar'; import log from '../../lib/methods/helpers/log'; -import { debounce, isIOS } from '../../lib/methods/helpers'; +import { isIOS, useDebounce } from '../../lib/methods/helpers'; import SafeAreaView from '../../containers/SafeAreaView'; import * as HeaderButton from '../../containers/HeaderButton'; import * as List from '../../containers/List'; @@ -81,10 +81,10 @@ const DiscussionsView = ({ navigation, route }: IDiscussionsViewProps): React.Re } }; - const onSearchChangeText = debounce(async (text: string) => { + const onSearchChangeText = useDebounce(async (text: string) => { setIsSearching(true); await load(text); - }, 300); + }, 500); const onCancelSearchPress = () => { setIsSearching(false); @@ -145,7 +145,7 @@ const DiscussionsView = ({ navigation, route }: IDiscussionsViewProps): React.Re navigation.setOptions(options); }, [navigation, isSearching]); - const onDiscussionPress = debounce( + const onDiscussionPress = useDebounce( (item: TThreadModel) => { if (item.drid && item.t) { navigation.push('RoomView', { From 3c0cdd2ebe04e71df4ea59b303322145cf670dc3 Mon Sep 17 00:00:00 2001 From: Gleidson Daniel Date: Fri, 9 Sep 2022 15:02:18 -0300 Subject: [PATCH 4/5] migrate to use-debounce lib --- app/lib/methods/helpers/debounce.ts | 6 +++--- app/views/DiscussionsView/index.tsx | 24 ++++++++++-------------- package.json | 1 + yarn.lock | 5 +++++ 4 files changed, 19 insertions(+), 17 deletions(-) diff --git a/app/lib/methods/helpers/debounce.ts b/app/lib/methods/helpers/debounce.ts index d7e93e4a8a5..5061e322b47 100644 --- a/app/lib/methods/helpers/debounce.ts +++ b/app/lib/methods/helpers/debounce.ts @@ -1,4 +1,4 @@ -import { useCallback } from 'react'; +import { useDebouncedCallback } from 'use-debounce'; export function debounce(func: Function, wait?: number, immediate?: boolean) { let timeout: ReturnType | null; @@ -24,6 +24,6 @@ export function debounce(func: Function, wait?: number, immediate?: boolean) { return _debounce; } -export function useDebounce(func: Function, wait?: number, immediate?: boolean): (...args: any[]) => void { - return useCallback(debounce(func, wait, immediate), []); +export function useDebounce(func: (...args: any) => any, wait?: number): (...args: any[]) => void { + return useDebouncedCallback(func, wait || 1000); } diff --git a/app/views/DiscussionsView/index.tsx b/app/views/DiscussionsView/index.tsx index 6230dadb042..aba3f040935 100644 --- a/app/views/DiscussionsView/index.tsx +++ b/app/views/DiscussionsView/index.tsx @@ -145,20 +145,16 @@ const DiscussionsView = ({ navigation, route }: IDiscussionsViewProps): React.Re navigation.setOptions(options); }, [navigation, isSearching]); - const onDiscussionPress = useDebounce( - (item: TThreadModel) => { - if (item.drid && item.t) { - navigation.push('RoomView', { - rid: item.drid, - prid: item.rid, - name: item.msg, - t - }); - } - }, - 1000, - true - ); + const onDiscussionPress = useDebounce((item: TThreadModel) => { + if (item.drid && item.t) { + navigation.push('RoomView', { + rid: item.drid, + prid: item.rid, + name: item.msg, + t + }); + } + }, 1000); const renderItem = ({ item }: { item: IMessageFromServer }) => ( Date: Fri, 9 Sep 2022 15:14:02 -0300 Subject: [PATCH 5/5] remove useless useDebounce --- app/views/DiscussionsView/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/views/DiscussionsView/index.tsx b/app/views/DiscussionsView/index.tsx index aba3f040935..5785d3e8229 100644 --- a/app/views/DiscussionsView/index.tsx +++ b/app/views/DiscussionsView/index.tsx @@ -145,7 +145,7 @@ const DiscussionsView = ({ navigation, route }: IDiscussionsViewProps): React.Re navigation.setOptions(options); }, [navigation, isSearching]); - const onDiscussionPress = useDebounce((item: TThreadModel) => { + const onDiscussionPress = (item: TThreadModel) => { if (item.drid && item.t) { navigation.push('RoomView', { rid: item.drid, @@ -154,7 +154,7 @@ const DiscussionsView = ({ navigation, route }: IDiscussionsViewProps): React.Re t }); } - }, 1000); + }; const renderItem = ({ item }: { item: IMessageFromServer }) => (