sergiodt
/
vn-verdnaturachat
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Chore: Create useDebounce hook (#4470) 

* create useDebounce hook

* fix types

* apply useDebounce hook

* migrate to use-debounce lib

* remove useless useDebounce
This commit is contained in:
Gleidson Daniel Silva 2022-09-16 12:19:07 -03:00 committed by GitHub
parent aefb60b5d2
commit e146cbae9f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 31 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/lib/methods/helpers/debounce.ts
View File

@ -1,3 +1,5 @@
import { useDebouncedCallback } from 'use-debounce';
export function debounce(func: Function, wait?: number, immediate?: boolean) {
let timeout: ReturnType<typeof setTimeout> | 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: (...args: any) => any, wait?: number): (...args: any[]) => void {
return useDebouncedCallback(func, wait || 1000);
}

15
app/views/CannedResponsesListView/index.tsx
View File

@ -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();

30
app/views/DiscussionsView/index.tsx
View File

@ -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,20 +145,16 @@ const DiscussionsView = ({ navigation, route }: IDiscussionsViewProps): React.Re
navigation.setOptions(options);
}, [navigation, isSearching]);
const onDiscussionPress = debounce(
(item: TThreadModel) => {
if (item.drid && item.t) {
navigation.push('RoomView', {
rid: item.drid,
prid: item.rid,
name: item.msg,
t
});
}
},
1000,
true
);
const onDiscussionPress = (item: TThreadModel) => {
if (item.drid && item.t) {
navigation.push('RoomView', {
rid: item.drid,
prid: item.rid,
name: item.msg,
t
});
}
};
const renderItem = ({ item }: { item: IMessageFromServer }) => (
<Item

1
package.json
View File

@ -137,6 +137,7 @@
"ua-parser-js": "^1.0.2",
"uri-js": "^4.4.1",
"url-parse": "1.5.10",
"use-debounce": "^8.0.4",
"use-deep-compare-effect": "1.6.1",
"xregexp": "5.0.2",
"yup": "^0.32.11"

5
yarn.lock
View File

@ -20213,6 +20213,11 @@ use-composed-ref@^1.3.0:
resolved "https://registry.yarnpkg.com/use-composed-ref/-/use-composed-ref-1.3.0.tgz#3d8104db34b7b264030a9d916c5e94fbe280dbda"
integrity sha512-GLMG0Jc/jiKov/3Ulid1wbv3r54K9HlMW29IWcDFPEqFkSO2nS0MuefWgMJpeHQ9YJeXDL3ZUF+P3jdXlZX/cQ==
use-debounce@^8.0.4:
version "8.0.4"
resolved "https://registry.yarnpkg.com/use-debounce/-/use-debounce-8.0.4.tgz#27e93b2f010bd0b8ad06e9fc7de891d9ee5d6b8e"
integrity sha512-fGqsYQzl8kLHF2QpQSgIwgOgJmnh6j5L6SIzQiHdLfwp3q1egUL3btq5Bg2SJysH6A0ILLgT2IqXZKoNJr0nFw==
use-deep-compare-effect@1.6.1:
version "1.6.1"
resolved "https://registry.yarnpkg.com/use-deep-compare-effect/-/use-deep-compare-effect-1.6.1.tgz#061a0ac5400aa0461e33dddfaa2a98bca873182a"