From 071a9afd4e60ae32c38623efe293394644f18e9c Mon Sep 17 00:00:00 2001 From: Reinaldo Neto Date: Mon, 17 Jan 2022 12:40:58 -0300 Subject: [PATCH 01/12] [FIX] Search and pagination for omnichannels departments --- app/lib/rocketchat.js | 7 +++++-- app/views/ForwardLivechatView.tsx | 14 +++++++++----- 2 files changed, 14 insertions(+), 7 deletions(-) diff --git a/app/lib/rocketchat.js b/app/lib/rocketchat.js index ac923025f35..b55278e0cf2 100644 --- a/app/lib/rocketchat.js +++ b/app/lib/rocketchat.js @@ -1146,9 +1146,12 @@ const RocketChat = { // RC 2.2.0 return this.sdk.get(`livechat/department/${departmentId}?includeAgents=false`); }, - getDepartments() { + getDepartments(text) { + const params = { + ...(text && { text }) + }; // RC 2.2.0 - return this.sdk.get('livechat/department'); + return this.sdk.get('livechat/department', params); }, usersAutoComplete(selector) { // RC 2.4.0 diff --git a/app/views/ForwardLivechatView.tsx b/app/views/ForwardLivechatView.tsx index ea17466dd55..c22b6c3b46e 100644 --- a/app/views/ForwardLivechatView.tsx +++ b/app/views/ForwardLivechatView.tsx @@ -63,13 +63,16 @@ const ForwardLivechatView = ({ forwardRoom, navigation, route, theme }: IForward const rid = route.params?.rid; - const getDepartments = async () => { + const getDepartments = async (text = '') => { try { - const result = await RocketChat.getDepartments(); + const result = await RocketChat.getDepartments(text); if (result.success) { - setDepartments( - result.departments.map((department: ILivechatDepartment) => ({ label: department.name, value: department._id })) - ); + const parsedDepartments = result.departments.map((department: ILivechatDepartment) => ({ + label: department.name, + value: department._id + })); + setDepartments(parsedDepartments); + return parsedDepartments; } } catch { // do nothing @@ -148,6 +151,7 @@ const ForwardLivechatView = ({ forwardRoom, navigation, route, theme }: IForward value: room?.departmentId, data: departments, onChangeValue: setDepartment, + onChangeText: getDepartments, goBack: false }); }; From b7b2f783de508fb515c3657a1778a5248327c2ff Mon Sep 17 00:00:00 2001 From: Reinaldo Neto Date: Tue, 18 Jan 2022 19:24:42 -0300 Subject: [PATCH 02/12] pagination complete --- app/lib/rocketchat.js | 6 ++++-- app/stacks/types.ts | 9 ++++++++- app/views/ForwardLivechatView.tsx | 19 ++++++++++++++----- app/views/PickerView.tsx | 30 +++++++++++++++++++++++++++--- 4 files changed, 53 insertions(+), 11 deletions(-) diff --git a/app/lib/rocketchat.js b/app/lib/rocketchat.js index b55278e0cf2..bc4a7c862e4 100644 --- a/app/lib/rocketchat.js +++ b/app/lib/rocketchat.js @@ -1146,9 +1146,11 @@ const RocketChat = { // RC 2.2.0 return this.sdk.get(`livechat/department/${departmentId}?includeAgents=false`); }, - getDepartments(text) { + getDepartments({ count, offset, text }) { const params = { - ...(text && { text }) + ...(text && { text }), + count, + offset }; // RC 2.2.0 return this.sdk.get('livechat/department', params); diff --git a/app/stacks/types.ts b/app/stacks/types.ts index c6016f2e4f4..5e1b04bfce2 100644 --- a/app/stacks/types.ts +++ b/app/stacks/types.ts @@ -97,7 +97,14 @@ export type ChatsStackParamList = { title: string; data: IOptionsField[]; value?: any; // TODO: Change - onChangeText?: ((text: string) => IOptionsField[]) | ((term?: string) => Promise); + onChangeText?: (text?: string) => Promise<{ data: IOptionsField[] } | undefined>; + onEndReached?: ( + text: string, + offset?: number + ) => Promise<{ data: IOptionsField[]; total: number; offset: number } | undefined>; + offset?: number; + total?: number; + count?: number; goBack?: boolean; onChangeValue: Function; }; diff --git a/app/views/ForwardLivechatView.tsx b/app/views/ForwardLivechatView.tsx index c22b6c3b46e..77486e5f7a8 100644 --- a/app/views/ForwardLivechatView.tsx +++ b/app/views/ForwardLivechatView.tsx @@ -54,25 +54,31 @@ interface IForwardLivechatViewProps { forwardRoom: (rid: string, transferData: ITransferData) => void; } +const COUNT_DEPARTMENT = 50; + const ForwardLivechatView = ({ forwardRoom, navigation, route, theme }: IForwardLivechatViewProps) => { const [departments, setDepartments] = useState([]); const [departmentId, setDepartment] = useState(''); + const [departmentTotal, setDepartmentTotal] = useState(0); + const [departmentOffset, setDepartmentOffset] = useState(0); const [users, setUsers] = useState([]); const [userId, setUser] = useState(); const [room, setRoom] = useState({}); const rid = route.params?.rid; - const getDepartments = async (text = '') => { + const getDepartments = async (text = '', offset = 0) => { try { - const result = await RocketChat.getDepartments(text); + const result = await RocketChat.getDepartments({ count: COUNT_DEPARTMENT, text, offset }); if (result.success) { const parsedDepartments = result.departments.map((department: ILivechatDepartment) => ({ label: department.name, value: department._id })); setDepartments(parsedDepartments); - return parsedDepartments; + setDepartmentTotal(result?.total); + setDepartmentOffset(result?.offset); + return { data: parsedDepartments, total: result?.total, offset: result?.offset }; } } catch { // do nothing @@ -90,12 +96,11 @@ const ForwardLivechatView = ({ forwardRoom, navigation, route, theme }: IForward if (result.success) { const parsedUsers = result.items.map((user: IUser) => ({ label: user.username, value: user._id })); setUsers(parsedUsers); - return parsedUsers; + return { data: parsedUsers }; } } catch { // do nothing } - return []; }; const getRoom = async () => { @@ -152,6 +157,10 @@ const ForwardLivechatView = ({ forwardRoom, navigation, route, theme }: IForward data: departments, onChangeValue: setDepartment, onChangeText: getDepartments, + onEndReached: getDepartments, + offset: departmentOffset, + total: departmentTotal, + count: COUNT_DEPARTMENT, goBack: false }); }; diff --git a/app/views/PickerView.tsx b/app/views/PickerView.tsx index db2a7a265ab..0c66b535f62 100644 --- a/app/views/PickerView.tsx +++ b/app/views/PickerView.tsx @@ -37,6 +37,9 @@ interface IItem { interface IPickerViewState { data: IOptionsField[]; value: string; + offset: number; + total: number; + text: string; } interface IPickerViewProps { @@ -55,7 +58,9 @@ const Item = React.memo(({ item, selected, onItemPress, theme }: IItem) => ( )); class PickerView extends React.PureComponent { - private onSearch?: ((text: string) => IOptionsField[]) | ((term?: string | undefined) => Promise); + private onSearch?: (text?: string) => Promise<{ data: IOptionsField[] } | undefined>; + + private count: number; static navigationOptions = ({ route }: IPickerViewProps) => ({ title: route.params?.title ?? I18n.t('Select_an_option') @@ -65,9 +70,12 @@ class PickerView extends React.PureComponent super(props); const data = props.route.params?.data ?? []; const value = props.route.params?.value; - this.state = { data, value }; + const total = props.route.params?.total ?? 0; + const offset = props.route.params?.offset ?? 0; + this.state = { data, value, offset, total, text: '' }; this.onSearch = props.route.params?.onChangeText; + this.count = props.route.params?.count ?? 0; } onChangeValue = (value: string) => { @@ -84,13 +92,27 @@ class PickerView extends React.PureComponent async (text: string) => { if (this.onSearch) { const data = await this.onSearch(text); - this.setState({ data }); + if (data?.data) { + this.setState({ ...data, text }); + } } }, 300, true ); + onEndReached = async () => { + const { route } = this.props; + const { data, offset, total, text } = this.state; + const onEndReached = route.params?.onEndReached; + if (onEndReached && offset + this.count < total) { + const val = await onEndReached(text, offset + this.count); + if (val?.data) { + this.setState({ ...val, data: [...data, ...val.data] }); + } + } + }; + renderSearch() { if (!this.onSearch) { return null; @@ -121,6 +143,8 @@ class PickerView extends React.PureComponent onItemPress={() => this.onChangeValue(item.value as string)} /> )} + onEndReached={() => this.onEndReached()} + onEndReachedThreshold={0.5} ItemSeparatorComponent={List.Separator} ListHeaderComponent={List.Separator} ListFooterComponent={List.Separator} From 0568f8b6e8971b6d1effeedf04d52a60a2f477ab Mon Sep 17 00:00:00 2001 From: Reinaldo Neto Date: Tue, 18 Jan 2022 20:07:12 -0300 Subject: [PATCH 03/12] minor tweak --- app/views/PickerView.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/app/views/PickerView.tsx b/app/views/PickerView.tsx index 0c66b535f62..b20b7334c12 100644 --- a/app/views/PickerView.tsx +++ b/app/views/PickerView.tsx @@ -105,8 +105,9 @@ class PickerView extends React.PureComponent const { route } = this.props; const { data, offset, total, text } = this.state; const onEndReached = route.params?.onEndReached; - if (onEndReached && offset + this.count < total) { - const val = await onEndReached(text, offset + this.count); + const newOffset = offset + this.count; + if (onEndReached && newOffset < total) { + const val = await onEndReached(text, newOffset); if (val?.data) { this.setState({ ...val, data: [...data, ...val.data] }); } From 33ac43359bfba0dcae98535028fdf2eb85d68d8e Mon Sep 17 00:00:00 2001 From: Reinaldo Neto Date: Wed, 19 Jan 2022 15:26:34 -0300 Subject: [PATCH 04/12] renamed a param and workaround for a ux bug --- app/views/ForwardLivechatView.tsx | 12 ++++++++---- app/views/PickerView.tsx | 14 +++++++------- 2 files changed, 15 insertions(+), 11 deletions(-) diff --git a/app/views/ForwardLivechatView.tsx b/app/views/ForwardLivechatView.tsx index 77486e5f7a8..267023359de 100644 --- a/app/views/ForwardLivechatView.tsx +++ b/app/views/ForwardLivechatView.tsx @@ -75,9 +75,11 @@ const ForwardLivechatView = ({ forwardRoom, navigation, route, theme }: IForward label: department.name, value: department._id })); - setDepartments(parsedDepartments); - setDepartmentTotal(result?.total); - setDepartmentOffset(result?.offset); + if (!text && !offset) { + setDepartments(parsedDepartments); + setDepartmentTotal(result?.total); + setDepartmentOffset(result?.offset); + } return { data: parsedDepartments, total: result?.total, offset: result?.offset }; } } catch { @@ -95,7 +97,9 @@ const ForwardLivechatView = ({ forwardRoom, navigation, route, theme }: IForward }); if (result.success) { const parsedUsers = result.items.map((user: IUser) => ({ label: user.username, value: user._id })); - setUsers(parsedUsers); + if (!term) { + setUsers(parsedUsers); + } return { data: parsedUsers }; } } catch { diff --git a/app/views/PickerView.tsx b/app/views/PickerView.tsx index 06aacad59b9..87d4ab1f9ed 100644 --- a/app/views/PickerView.tsx +++ b/app/views/PickerView.tsx @@ -39,7 +39,7 @@ interface IPickerViewState { value: string; offset: number; total: number; - text: string; + searchText: string; } interface IPickerViewProps { @@ -72,7 +72,7 @@ class PickerView extends React.PureComponent const value = props.route.params?.value; const total = props.route.params?.total ?? 0; const offset = props.route.params?.offset ?? 0; - this.state = { data, value, offset, total, text: '' }; + this.state = { data, value, offset, total, searchText: '' }; this.onSearch = props.route.params?.onChangeText; this.count = props.route.params?.count ?? 0; @@ -89,11 +89,11 @@ class PickerView extends React.PureComponent }; onChangeText = debounce( - async (text: string) => { + async (searchText: string) => { if (this.onSearch) { - const data = await this.onSearch(text); + const data = await this.onSearch(searchText); if (data?.data) { - this.setState({ ...data, text }); + this.setState({ ...data, searchText }); } } }, @@ -103,11 +103,11 @@ class PickerView extends React.PureComponent onEndReached = async () => { const { route } = this.props; - const { data, offset, total, text } = this.state; + const { data, offset, total, searchText } = this.state; const onEndReached = route.params?.onEndReached; const newOffset = offset + this.count; if (onEndReached && newOffset < total) { - const val = await onEndReached(text, newOffset); + const val = await onEndReached(searchText, newOffset); if (val?.data) { this.setState({ ...val, data: [...data, ...val.data] }); } From 108bb06425f1746ca54ae38cff4f85d30623c371 Mon Sep 17 00:00:00 2001 From: Reinaldo Neto Date: Thu, 20 Jan 2022 16:24:52 -0300 Subject: [PATCH 05/12] fix style of flatlist and search as header scrollable --- app/views/ForwardLivechatView.tsx | 2 +- app/views/PickerView.tsx | 22 ++++++++++++++-------- 2 files changed, 15 insertions(+), 9 deletions(-) diff --git a/app/views/ForwardLivechatView.tsx b/app/views/ForwardLivechatView.tsx index 267023359de..5576d40bc35 100644 --- a/app/views/ForwardLivechatView.tsx +++ b/app/views/ForwardLivechatView.tsx @@ -160,7 +160,7 @@ const ForwardLivechatView = ({ forwardRoom, navigation, route, theme }: IForward value: room?.departmentId, data: departments, onChangeValue: setDepartment, - onChangeText: getDepartments, + // onChangeText: getDepartments, onEndReached: getDepartments, offset: departmentOffset, total: departmentTotal, diff --git a/app/views/PickerView.tsx b/app/views/PickerView.tsx index 87d4ab1f9ed..fc91262f0c0 100644 --- a/app/views/PickerView.tsx +++ b/app/views/PickerView.tsx @@ -17,13 +17,17 @@ import { IOptionsField } from './NotificationPreferencesView/options'; const styles = StyleSheet.create({ search: { width: '100%', - height: 56 + height: 56, + marginBottom: 32 }, noResult: { fontSize: 16, paddingVertical: 56, ...sharedStyles.textSemibold, ...sharedStyles.textAlignCenter + }, + listNoHeader: { + marginTop: 32 } }); @@ -116,13 +120,16 @@ class PickerView extends React.PureComponent renderSearch() { if (!this.onSearch) { - return null; + return ; } return ( - - - + <> + + + + + ); } @@ -132,7 +139,7 @@ class PickerView extends React.PureComponent return ( - {this.renderSearch()} + {/* {this.renderSearch()} */} item.value as string} @@ -147,12 +154,11 @@ class PickerView extends React.PureComponent onEndReached={() => this.onEndReached()} onEndReachedThreshold={0.5} ItemSeparatorComponent={List.Separator} - ListHeaderComponent={List.Separator} + ListHeaderComponent={() => this.renderSearch()} ListFooterComponent={List.Separator} ListEmptyComponent={() => ( {I18n.t('No_results_found')} )} - contentContainerStyle={[List.styles.contentContainerStyleFlatList]} /> ); From 10ec5fb9601877512d4be8b24e6690858221424d Mon Sep 17 00:00:00 2001 From: Reinaldo Neto Date: Mon, 24 Jan 2022 20:00:45 -0300 Subject: [PATCH 06/12] stick the header --- app/views/ForwardLivechatView.tsx | 2 +- app/views/PickerView.tsx | 29 ++++++++++++----------------- 2 files changed, 13 insertions(+), 18 deletions(-) diff --git a/app/views/ForwardLivechatView.tsx b/app/views/ForwardLivechatView.tsx index 5576d40bc35..267023359de 100644 --- a/app/views/ForwardLivechatView.tsx +++ b/app/views/ForwardLivechatView.tsx @@ -160,7 +160,7 @@ const ForwardLivechatView = ({ forwardRoom, navigation, route, theme }: IForward value: room?.departmentId, data: departments, onChangeValue: setDepartment, - // onChangeText: getDepartments, + onChangeText: getDepartments, onEndReached: getDepartments, offset: departmentOffset, total: departmentTotal, diff --git a/app/views/PickerView.tsx b/app/views/PickerView.tsx index fc91262f0c0..ca8a0032f86 100644 --- a/app/views/PickerView.tsx +++ b/app/views/PickerView.tsx @@ -118,28 +118,12 @@ class PickerView extends React.PureComponent } }; - renderSearch() { - if (!this.onSearch) { - return ; - } - - return ( - <> - - - - - - ); - } - render() { const { data, value } = this.state; const { theme } = this.props; return ( - {/* {this.renderSearch()} */} item.value as string} @@ -154,7 +138,18 @@ class PickerView extends React.PureComponent onEndReached={() => this.onEndReached()} onEndReachedThreshold={0.5} ItemSeparatorComponent={List.Separator} - ListHeaderComponent={() => this.renderSearch()} + ListHeaderComponent={ + !this.onSearch ? ( + + ) : ( + <> + + + + + + ) + } ListFooterComponent={List.Separator} ListEmptyComponent={() => ( {I18n.t('No_results_found')} From 09f2993858cfd91b706881e4b0fee1c27534c3ca Mon Sep 17 00:00:00 2001 From: Reinaldo Neto Date: Mon, 24 Jan 2022 20:09:27 -0300 Subject: [PATCH 07/12] Merge branch 'fix.forward-department-list' of https://github.com/RocketChat/Rocket.Chat.ReactNative into fix.forward-department-list From f12f5545c3f44447361195d4ce501c9cc0b358f7 Mon Sep 17 00:00:00 2001 From: Reinaldo Neto Date: Mon, 24 Jan 2022 21:43:24 -0300 Subject: [PATCH 08/12] refactor pagination --- app/stacks/types.ts | 9 ++------- app/views/ForwardLivechatView.tsx | 28 ++++++---------------------- app/views/PickerView.tsx | 15 ++++----------- 3 files changed, 12 insertions(+), 40 deletions(-) diff --git a/app/stacks/types.ts b/app/stacks/types.ts index 5c5f6bc7c3d..2fe3b66f795 100644 --- a/app/stacks/types.ts +++ b/app/stacks/types.ts @@ -98,14 +98,9 @@ export type ChatsStackParamList = { title: string; data: IOptionsField[]; value?: any; // TODO: Change - onChangeText?: (text?: string) => Promise<{ data: IOptionsField[] } | undefined>; - onEndReached?: ( - text: string, - offset?: number - ) => Promise<{ data: IOptionsField[]; total: number; offset: number } | undefined>; - offset?: number; + onChangeText?: (text?: string) => Promise; + onEndReached?: (text: string, offset?: number) => Promise; total?: number; - count?: number; goBack?: boolean; onChangeValue: Function; }; diff --git a/app/views/ForwardLivechatView.tsx b/app/views/ForwardLivechatView.tsx index 267023359de..646d5859a26 100644 --- a/app/views/ForwardLivechatView.tsx +++ b/app/views/ForwardLivechatView.tsx @@ -13,8 +13,10 @@ import RocketChat from '../lib/rocketchat'; import OrSeparator from '../containers/OrSeparator'; import Input from '../containers/UIKit/MultiSelect/Input'; import { forwardRoom as forwardRoomAction } from '../actions/room'; +import { ISubscription } from '../definitions'; import { ILivechatDepartment } from './definition/ILivechatDepartment'; import { ChatsStackParamList } from '../stacks/types'; +import { IOptionsField } from './NotificationPreferencesView/options'; const styles = StyleSheet.create({ container: { @@ -23,14 +25,6 @@ const styles = StyleSheet.create({ } }); -// TODO: Refactor when migrate room -interface IRoom { - departmentId?: any; - servedBy?: { - _id: string; - }; -} - interface ITransferData { roomId: string; userId?: string; @@ -41,12 +35,6 @@ interface IUser { username: string; _id: string; } - -interface IParsedData { - label: string; - value: string; -} - interface IForwardLivechatViewProps { navigation: StackNavigationProp; route: RouteProp; @@ -57,13 +45,12 @@ interface IForwardLivechatViewProps { const COUNT_DEPARTMENT = 50; const ForwardLivechatView = ({ forwardRoom, navigation, route, theme }: IForwardLivechatViewProps) => { - const [departments, setDepartments] = useState([]); + const [departments, setDepartments] = useState([]); const [departmentId, setDepartment] = useState(''); const [departmentTotal, setDepartmentTotal] = useState(0); - const [departmentOffset, setDepartmentOffset] = useState(0); - const [users, setUsers] = useState([]); + const [users, setUsers] = useState([]); const [userId, setUser] = useState(); - const [room, setRoom] = useState({}); + const [room, setRoom] = useState({} as ISubscription); const rid = route.params?.rid; @@ -71,14 +58,13 @@ const ForwardLivechatView = ({ forwardRoom, navigation, route, theme }: IForward try { const result = await RocketChat.getDepartments({ count: COUNT_DEPARTMENT, text, offset }); if (result.success) { - const parsedDepartments = result.departments.map((department: ILivechatDepartment) => ({ + const parsedDepartments: IOptionsField[] = result.departments.map((department: ILivechatDepartment) => ({ label: department.name, value: department._id })); if (!text && !offset) { setDepartments(parsedDepartments); setDepartmentTotal(result?.total); - setDepartmentOffset(result?.offset); } return { data: parsedDepartments, total: result?.total, offset: result?.offset }; } @@ -162,9 +148,7 @@ const ForwardLivechatView = ({ forwardRoom, navigation, route, theme }: IForward onChangeValue: setDepartment, onChangeText: getDepartments, onEndReached: getDepartments, - offset: departmentOffset, total: departmentTotal, - count: COUNT_DEPARTMENT, goBack: false }); }; diff --git a/app/views/PickerView.tsx b/app/views/PickerView.tsx index ca8a0032f86..102ecc8f5a9 100644 --- a/app/views/PickerView.tsx +++ b/app/views/PickerView.tsx @@ -41,7 +41,6 @@ interface IItem { interface IPickerViewState { data: IOptionsField[]; value: string; - offset: number; total: number; searchText: string; } @@ -64,8 +63,6 @@ const Item = React.memo(({ item, selected, onItemPress, theme }: IItem) => ( class PickerView extends React.PureComponent { private onSearch?: (text?: string) => Promise<{ data: IOptionsField[] } | undefined>; - private count: number; - static navigationOptions = ({ route }: IPickerViewProps) => ({ title: route.params?.title ?? I18n.t('Select_an_option') }); @@ -75,11 +72,8 @@ class PickerView extends React.PureComponent const data = props.route.params?.data ?? []; const value = props.route.params?.value; const total = props.route.params?.total ?? 0; - const offset = props.route.params?.offset ?? 0; - this.state = { data, value, offset, total, searchText: '' }; - + this.state = { data, value, total, searchText: '' }; this.onSearch = props.route.params?.onChangeText; - this.count = props.route.params?.count ?? 0; } onChangeValue = (value: string) => { @@ -107,11 +101,10 @@ class PickerView extends React.PureComponent onEndReached = async () => { const { route } = this.props; - const { data, offset, total, searchText } = this.state; + const { data, total, searchText } = this.state; const onEndReached = route.params?.onEndReached; - const newOffset = offset + this.count; - if (onEndReached && newOffset < total) { - const val = await onEndReached(searchText, newOffset); + if (onEndReached && data.length < total) { + const val = await onEndReached(searchText, data.length); if (val?.data) { this.setState({ ...val, data: [...data, ...val.data] }); } From 453f280c4692c9e108ea64bef4db52748e11972d Mon Sep 17 00:00:00 2001 From: Reinaldo Neto Date: Tue, 25 Jan 2022 23:43:57 -0300 Subject: [PATCH 09/12] fix value type --- app/stacks/types.ts | 2 +- app/views/PickerView.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/app/stacks/types.ts b/app/stacks/types.ts index 2fe3b66f795..7c74e38b301 100644 --- a/app/stacks/types.ts +++ b/app/stacks/types.ts @@ -97,7 +97,7 @@ export type ChatsStackParamList = { PickerView: { title: string; data: IOptionsField[]; - value?: any; // TODO: Change + value?: string; onChangeText?: (text?: string) => Promise; onEndReached?: (text: string, offset?: number) => Promise; total?: number; diff --git a/app/views/PickerView.tsx b/app/views/PickerView.tsx index 102ecc8f5a9..7f439b12d2a 100644 --- a/app/views/PickerView.tsx +++ b/app/views/PickerView.tsx @@ -70,7 +70,7 @@ class PickerView extends React.PureComponent constructor(props: IPickerViewProps) { super(props); const data = props.route.params?.data ?? []; - const value = props.route.params?.value; + const value = props.route.params?.value ?? ''; const total = props.route.params?.total ?? 0; this.state = { data, value, total, searchText: '' }; this.onSearch = props.route.params?.onChangeText; From 857bce359043c2af996d173976efbfc0d75be657 Mon Sep 17 00:00:00 2001 From: Reinaldo Neto Date: Tue, 25 Jan 2022 23:57:44 -0300 Subject: [PATCH 10/12] refactor render search --- app/views/PickerView.tsx | 50 ++++++++++++++++++++++------------------ 1 file changed, 27 insertions(+), 23 deletions(-) diff --git a/app/views/PickerView.tsx b/app/views/PickerView.tsx index 7f439b12d2a..81b2b73a28f 100644 --- a/app/views/PickerView.tsx +++ b/app/views/PickerView.tsx @@ -38,6 +38,11 @@ interface IItem { theme: string; } +interface IRenderSearch { + hasSearch: boolean; + onChangeText: (text: string) => void; +} + interface IPickerViewState { data: IOptionsField[]; value: string; @@ -60,6 +65,20 @@ const Item = React.memo(({ item, selected, onItemPress, theme }: IItem) => ( /> )); +const RenderSearch = ({ hasSearch, onChangeText }: IRenderSearch) => { + if (!hasSearch) { + return ; + } + return ( + <> + + + + + + ); +}; + class PickerView extends React.PureComponent { private onSearch?: (text?: string) => Promise<{ data: IOptionsField[] } | undefined>; @@ -86,18 +105,14 @@ class PickerView extends React.PureComponent } }; - onChangeText = debounce( - async (searchText: string) => { - if (this.onSearch) { - const data = await this.onSearch(searchText); - if (data?.data) { - this.setState({ ...data, searchText }); - } + onChangeText = debounce(async (searchText: string) => { + if (this.onSearch) { + const data = await this.onSearch(searchText); + if (data?.data) { + this.setState({ ...data, searchText }); } - }, - 300, - true - ); + } + }, 500); onEndReached = async () => { const { route } = this.props; @@ -131,18 +146,7 @@ class PickerView extends React.PureComponent onEndReached={() => this.onEndReached()} onEndReachedThreshold={0.5} ItemSeparatorComponent={List.Separator} - ListHeaderComponent={ - !this.onSearch ? ( - - ) : ( - <> - - - - - - ) - } + ListHeaderComponent={} ListFooterComponent={List.Separator} ListEmptyComponent={() => ( {I18n.t('No_results_found')} From 0f328f93c983a026264b3baac2fc94fa42845d07 Mon Sep 17 00:00:00 2001 From: Reinaldo Neto Date: Fri, 11 Feb 2022 17:41:55 -0300 Subject: [PATCH 11/12] refactor layout --- app/stacks/types.ts | 2 +- app/views/ForwardLivechatView.tsx | 4 ++-- app/views/PickerView.tsx | 7 +++---- 3 files changed, 6 insertions(+), 7 deletions(-) diff --git a/app/stacks/types.ts b/app/stacks/types.ts index 7c74e38b301..bc2d45f460c 100644 --- a/app/stacks/types.ts +++ b/app/stacks/types.ts @@ -98,7 +98,7 @@ export type ChatsStackParamList = { title: string; data: IOptionsField[]; value?: string; - onChangeText?: (text?: string) => Promise; + onSearch?: (text?: string) => Promise; onEndReached?: (text: string, offset?: number) => Promise; total?: number; goBack?: boolean; diff --git a/app/views/ForwardLivechatView.tsx b/app/views/ForwardLivechatView.tsx index 646d5859a26..c990f4365c6 100644 --- a/app/views/ForwardLivechatView.tsx +++ b/app/views/ForwardLivechatView.tsx @@ -146,7 +146,7 @@ const ForwardLivechatView = ({ forwardRoom, navigation, route, theme }: IForward value: room?.departmentId, data: departments, onChangeValue: setDepartment, - onChangeText: getDepartments, + onSearch: getDepartments, onEndReached: getDepartments, total: departmentTotal, goBack: false @@ -158,7 +158,7 @@ const ForwardLivechatView = ({ forwardRoom, navigation, route, theme }: IForward title: I18n.t('Forward_to_user'), data: users, onChangeValue: setUser, - onChangeText: getUsers, + onSearch: getUsers, goBack: false }); }; diff --git a/app/views/PickerView.tsx b/app/views/PickerView.tsx index 81b2b73a28f..c00d00c83f0 100644 --- a/app/views/PickerView.tsx +++ b/app/views/PickerView.tsx @@ -17,8 +17,7 @@ import { IOptionsField } from './NotificationPreferencesView/options'; const styles = StyleSheet.create({ search: { width: '100%', - height: 56, - marginBottom: 32 + height: 56 }, noResult: { fontSize: 16, @@ -80,7 +79,7 @@ const RenderSearch = ({ hasSearch, onChangeText }: IRenderSearch) => { }; class PickerView extends React.PureComponent { - private onSearch?: (text?: string) => Promise<{ data: IOptionsField[] } | undefined>; + private onSearch?: (text?: string) => Promise; static navigationOptions = ({ route }: IPickerViewProps) => ({ title: route.params?.title ?? I18n.t('Select_an_option') @@ -92,7 +91,7 @@ class PickerView extends React.PureComponent const value = props.route.params?.value ?? ''; const total = props.route.params?.total ?? 0; this.state = { data, value, total, searchText: '' }; - this.onSearch = props.route.params?.onChangeText; + this.onSearch = props.route.params?.onSearch; } onChangeValue = (value: string) => { From 684e5ce6691fcaf438e960037ca5186ff1312f63 Mon Sep 17 00:00:00 2001 From: Reinaldo Neto Date: Thu, 17 Feb 2022 11:29:38 -0300 Subject: [PATCH 12/12] make ts happy --- app/lib/rocketchat/services/restApi.ts | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/app/lib/rocketchat/services/restApi.ts b/app/lib/rocketchat/services/restApi.ts index d763ab9eff2..3fc518123f0 100644 --- a/app/lib/rocketchat/services/restApi.ts +++ b/app/lib/rocketchat/services/restApi.ts @@ -421,12 +421,15 @@ export const getDepartmentInfo = (departmentId: string): any => // RC 2.2.0 sdk.get(`livechat/department/${departmentId}?includeAgents=false`); -export const getDepartments = ({ count, offset, text }: { count: number; offset: number; text: string }) => { - const params = { - text, - count, - offset - }; +export const getDepartments = (args?: { count: number; offset: number; text: string }) => { + let params; + if (args) { + params = { + text: args.text, + count: args.count, + offset: args.offset + }; + } // RC 2.2.0 return sdk.get('livechat/department', params); };