Skip to content

Commit fea4f16

Browse files
dnlsilvadnlsilva
authored
chore: migrate PickerView to hooks (#5002)
* migrate ForwardLivechatView to hooks and fix some types * fix types * fix types * remove useless memo * change to useDebounce * fix types
1 parent d30d464 commit fea4f16

File tree

11 files changed

+163
-241
lines changed

11 files changed

+163
-241
lines changed

‎app/definitions/index.ts

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -2,44 +2,44 @@ import { RouteProp } from '@react-navigation/native';
22
import { StackNavigationProp } from '@react-navigation/stack';
33
import { Dispatch } from 'redux';
44

5+
import { TNavigation } from '../stacks/stackType';
56
import { TColors, TSupportedThemes } from '../theme';
67

8+
export * from './ERoomType';
79
export * from './IAttachment';
10+
export * from './ICertificate';
11+
export * from './ICredentials';
12+
export * from './IEmoji';
13+
export * from './ILoggedUser';
14+
export * from './IMessage';
815
export * from './INotification';
16+
export * from './IPermission';
917
export * from './IPreferences';
10-
export * from './ISubscription';
18+
export * from './IProfile';
19+
export * from './IReaction';
20+
export * from './IRole';
1121
export * from './IRoom';
12-
export * from './IMessage';
22+
export * from './ISearch';
23+
export * from './IServer';
24+
export * from './IServerHistory';
25+
export * from './ISettings';
26+
export * from './ISlashCommand';
27+
export * from './ISubscription';
1328
export * from './IThread';
1429
export * from './IThreadMessage';
15-
export * from './IEmoji';
1630
export * from './IUpload';
17-
export * from './ISettings';
18-
export * from './IRole';
19-
export * from './IPermission';
20-
export * from './ISlashCommand';
21-
export * from './IUser';
22-
export * from './IServer';
23-
export * from './ILoggedUser';
24-
export * from './IServerHistory';
25-
export * from './ICertificate';
2631
export * from './IUrl';
27-
export * from './ICredentials';
28-
export * from './ISearch';
32+
export * from './IUser';
33+
export * from './redux';
34+
export * from './redux/TRootEnum';
2935
export * from './TUserStatus';
30-
export * from './IProfile';
31-
export * from './IReaction';
32-
export * from './ERoomType';
3336

3437
export interface IBaseScreen<T extends Record<string, object | undefined>, S extends string> {
35-
navigation: StackNavigationProp<T, S>;
38+
navigation: StackNavigationProp<T & TNavigation, S>;
3639
route: RouteProp<T, S>;
3740
dispatch: Dispatch;
3841
isMasterDetail: boolean;
3942
// TODO: remove after migrating all Class components
4043
theme?: TSupportedThemes;
4144
colors: TColors;
4245
}
43-
44-
export * from './redux';
45-
export * from './redux/TRootEnum';

‎app/stacks/InsideStack.tsx

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@ import { isIOS } from '../lib/methods/helpers';
8585
import { TNavigation } from './stackType';
8686

8787
// ChatsStackNavigator
88-
const ChatsStack = createStackNavigator<ChatsStackParamList>();
88+
const ChatsStack = createStackNavigator<ChatsStackParamList & TNavigation>();
8989
const ChatsStackNavigator = () => {
9090
const { theme } = React.useContext(ThemeContext);
9191
return (
@@ -122,14 +122,9 @@ const ChatsStackNavigator = () => {
122122
<ChatsStack.Screen name='CloseLivechatView' component={CloseLivechatView} />
123123
{/* @ts-ignore */}
124124
<ChatsStack.Screen name='LivechatEditView' component={LivechatEditView} options={LivechatEditView.navigationOptions} />
125+
<ChatsStack.Screen name='PickerView' component={PickerView} />
125126
{/* @ts-ignore */}
126-
<ChatsStack.Screen name='PickerView' component={PickerView} options={PickerView.navigationOptions} />
127-
<ChatsStack.Screen
128-
name='ThreadMessagesView'
129-
// @ts-ignore
130-
component={ThreadMessagesView}
131-
options={ThreadMessagesView.navigationOptions}
132-
/>
127+
<ChatsStack.Screen name='ThreadMessagesView' component={ThreadMessagesView} />
133128
<ChatsStack.Screen name='TeamChannelsView' component={TeamChannelsView} />
134129
<ChatsStack.Screen name='CreateChannelView' component={CreateChannelView} />
135130
<ChatsStack.Screen name='AddChannelTeamView' component={AddChannelTeamView} />
@@ -156,7 +151,7 @@ const ChatsStackNavigator = () => {
156151
};
157152

158153
// ProfileStackNavigator
159-
const ProfileStack = createStackNavigator<ProfileStackParamList>();
154+
const ProfileStack = createStackNavigator<ProfileStackParamList & TNavigation>();
160155
const ProfileStackNavigator = () => {
161156
const { theme } = React.useContext(ThemeContext);
162157
return (
@@ -167,8 +162,7 @@ const ProfileStackNavigator = () => {
167162
<ProfileStack.Screen name='UserPreferencesView' component={UserPreferencesView} />
168163
<ProfileStack.Screen name='ChangeAvatarView' component={ChangeAvatarView} />
169164
<ProfileStack.Screen name='UserNotificationPrefView' component={UserNotificationPrefView} />
170-
{/* @ts-ignore */}
171-
<ProfileStack.Screen name='PickerView' component={PickerView} options={PickerView.navigationOptions} />
165+
<ProfileStack.Screen name='PickerView' component={PickerView} />
172166
</ProfileStack.Navigator>
173167
);
174168
};

‎app/stacks/MasterDetailStack/index.tsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,7 @@ export interface INavigation {
104104
navigation: StackNavigationProp<ModalStackParamList>;
105105
}
106106

107-
const ModalStack = createStackNavigator<ModalStackParamList>();
107+
const ModalStack = createStackNavigator<ModalStackParamList & TNavigation>();
108108
const ModalStackNavigator = React.memo(({ navigation }: INavigation) => {
109109
const { theme } = React.useContext(ThemeContext);
110110
return (
@@ -155,8 +155,7 @@ const ModalStackNavigator = React.memo(({ navigation }: INavigation) => {
155155
<ModalStack.Screen name='CannedResponseDetail' component={CannedResponseDetail} />
156156
{/* @ts-ignore */}
157157
<ModalStack.Screen name='LivechatEditView' component={LivechatEditView} options={LivechatEditView.navigationOptions} />
158-
{/* @ts-ignore */}
159-
<ModalStack.Screen name='PickerView' component={PickerView} options={PickerView.navigationOptions} />
158+
<ModalStack.Screen name='PickerView' component={PickerView} />
160159
{/* @ts-ignore */}
161160
<ModalStack.Screen name='ThreadMessagesView' component={ThreadMessagesView} />
162161
{/* @ts-ignore */}

‎app/stacks/MasterDetailStack/types.ts

Lines changed: 3 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
1-
import { TextInputProps } from 'react-native';
21
import { NavigatorScreenParams } from '@react-navigation/core';
32

3+
import { TServerModel, TThreadModel } from '../../definitions';
44
import { IAttachment } from '../../definitions/IAttachment';
5-
import { IMessage } from '../../definitions/IMessage';
6-
import { ISubscription, SubscriptionType, TSubscriptionModel } from '../../definitions/ISubscription';
75
import { ILivechatDepartment } from '../../definitions/ILivechatDepartment';
86
import { ILivechatTag } from '../../definitions/ILivechatTag';
9-
import { TServerModel, TThreadModel } from '../../definitions';
7+
import { IMessage } from '../../definitions/IMessage';
8+
import { ISubscription, SubscriptionType, TSubscriptionModel } from '../../definitions/ISubscription';
109
import { TChangeAvatarViewContext } from '../../definitions/TChangeAvatarViewContext';
1110

1211
export type MasterDetailChatsStackParamList = {
@@ -119,9 +118,6 @@ export type ModalStackParamList = {
119118
rid: string;
120119
room: ISubscription;
121120
};
122-
ForwardLivechatView: {
123-
rid: string;
124-
};
125121
CloseLivechatView: {
126122
rid: string;
127123
departmentId?: string;
@@ -144,14 +140,6 @@ export type ModalStackParamList = {
144140
room: ISubscription;
145141
roomUser: any; // TODO: Change
146142
};
147-
PickerView: {
148-
title: string;
149-
data: []; // TODO: Change
150-
value: any; // TODO: Change
151-
onChangeText: TextInputProps['onChangeText'];
152-
goBack: Function;
153-
onChangeValue: Function;
154-
};
155143
ThreadMessagesView: {
156144
rid: string;
157145
t: SubscriptionType;

‎app/stacks/types.ts

Lines changed: 8 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,18 @@
11
import { NavigatorScreenParams } from '@react-navigation/core';
2-
import { TextInputProps } from 'react-native';
32

4-
import { IItem } from '../views/TeamChannelsView';
5-
import { IOptionsField } from '../views/NotificationPreferencesView/options';
6-
import { TServerModel } from '../definitions/IServer';
3+
import { TThreadModel } from '../definitions';
74
import { IAttachment } from '../definitions/IAttachment';
8-
import { IMessage, TAnyMessageModel, TMessageModel } from '../definitions/IMessage';
9-
import { ISubscription, SubscriptionType, TSubscriptionModel } from '../definitions/ISubscription';
105
import { ICannedResponse } from '../definitions/ICannedResponse';
116
import { TDataSelect } from '../definitions/IDataSelect';
12-
import { MasterDetailInsideStackParamList, ModalStackParamList } from './MasterDetailStack/types';
13-
import { TThreadModel } from '../definitions';
147
import { ILivechatDepartment } from '../definitions/ILivechatDepartment';
158
import { ILivechatTag } from '../definitions/ILivechatTag';
9+
import { IMessage, TAnyMessageModel, TMessageModel } from '../definitions/IMessage';
10+
import { TServerModel } from '../definitions/IServer';
11+
import { ISubscription, SubscriptionType, TSubscriptionModel } from '../definitions/ISubscription';
1612
import { TChangeAvatarViewContext } from '../definitions/TChangeAvatarViewContext';
13+
import { IItem } from '../views/TeamChannelsView';
14+
import { MasterDetailInsideStackParamList, ModalStackParamList } from './MasterDetailStack/types';
15+
import { TNavigation } from './stackType';
1716

1817
export type SetUsernameStackParamList = {
1918
SetUsernameView: {
@@ -30,7 +29,7 @@ export type StackParamList = {
3029
};
3130

3231
export type ChatsStackParamList = {
33-
ModalStackNavigator: NavigatorScreenParams<ModalStackParamList>;
32+
ModalStackNavigator: NavigatorScreenParams<ModalStackParamList & TNavigation>;
3433
E2ESaveYourPasswordStackNavigator: NavigatorScreenParams<E2ESaveYourPasswordStackParamList>;
3534
E2EEnterYourPasswordStackNavigator: NavigatorScreenParams<E2EEnterYourPasswordStackParamList>;
3635
SettingsView: any;
@@ -132,9 +131,6 @@ export type ChatsStackParamList = {
132131
rid: string;
133132
room: TSubscriptionModel;
134133
};
135-
ForwardLivechatView: {
136-
rid: string;
137-
};
138134
CloseLivechatView: {
139135
rid: string;
140136
departmentId?: string;
@@ -145,16 +141,6 @@ export type ChatsStackParamList = {
145141
room: ISubscription;
146142
roomUser?: any; // TODO: Change
147143
};
148-
PickerView: {
149-
title: string;
150-
data: IOptionsField[];
151-
value?: string;
152-
onSearch?: (text?: string) => Promise<any>;
153-
onEndReached?: (text: string, offset?: number) => Promise<any>;
154-
total?: number;
155-
goBack?: boolean;
156-
onChangeValue: Function;
157-
};
158144
ThreadMessagesView: {
159145
rid: string;
160146
t: SubscriptionType;
@@ -208,14 +194,6 @@ export type ProfileStackParamList = {
208194
ProfileView: undefined;
209195
UserPreferencesView: undefined;
210196
UserNotificationPrefView: undefined;
211-
PickerView: {
212-
title: string;
213-
data: IOptionsField[];
214-
value: any; // TODO: Change
215-
onChangeText?: TextInputProps['onChangeText'];
216-
goBack?: Function;
217-
onChangeValue: Function;
218-
};
219197
ChangeAvatarView: {
220198
context: TChangeAvatarViewContext;
221199
titleHeader?: string;

‎app/views/ForwardLivechatView.tsx

Lines changed: 15 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,13 @@ import { useDispatch } from 'react-redux';
66
import { forwardRoom, ITransferData } from '../actions/room';
77
import OrSeparator from '../containers/OrSeparator';
88
import Input from '../containers/UIKit/MultiSelect/Input';
9-
import { IBaseScreen, IServerRoom } from '../definitions';
9+
import { IServerRoom } from '../definitions';
1010
import I18n from '../i18n';
11-
import { ChatsStackParamList } from '../stacks/types';
11+
import { useAppNavigation, useAppRoute } from '../lib/hooks/navigation';
12+
import { Services } from '../lib/services';
13+
import { TNavigation } from '../stacks/stackType';
1214
import { useTheme } from '../theme';
1315
import { IOptionsField } from './NotificationPreferencesView/options';
14-
import { Services } from '../lib/services';
1516

1617
const styles = StyleSheet.create({
1718
container: {
@@ -20,15 +21,14 @@ const styles = StyleSheet.create({
2021
}
2122
});
2223

23-
interface IParsedData {
24-
label: string;
25-
value: string;
26-
}
27-
2824
const COUNT_DEPARTMENT = 50;
2925

30-
const ForwardLivechatView = ({ navigation, route }: IBaseScreen<ChatsStackParamList, 'ForwardLivechatView'>) => {
31-
const [departments, setDepartments] = useState<IParsedData[]>([]);
26+
const ForwardLivechatView = (): React.ReactElement => {
27+
const { navigate, setOptions } = useAppNavigation<TNavigation, 'PickerView'>();
28+
const {
29+
params: { rid }
30+
} = useAppRoute<TNavigation, 'ForwardLivechatView'>();
31+
const [departments, setDepartments] = useState<IOptionsField[]>([]);
3232
const [departmentId, setDepartment] = useState('');
3333
const [departmentTotal, setDepartmentTotal] = useState(0);
3434
const [users, setUsers] = useState<IOptionsField[]>([]);
@@ -37,8 +37,6 @@ const ForwardLivechatView = ({ navigation, route }: IBaseScreen<ChatsStackParamL
3737
const dispatch = useDispatch();
3838
const { theme, colors } = useTheme();
3939

40-
const rid = route.params?.rid;
41-
4240
const getDepartments = async (text = '', offset = 0) => {
4341
try {
4442
const result = await Services.getDepartments({ count: COUNT_DEPARTMENT, text, offset });
@@ -106,7 +104,7 @@ const ForwardLivechatView = ({ navigation, route }: IBaseScreen<ChatsStackParamL
106104
};
107105

108106
useEffect(() => {
109-
navigation.setOptions({
107+
setOptions({
110108
title: I18n.t('Forward_Chat')
111109
});
112110
getRoom();
@@ -126,25 +124,23 @@ const ForwardLivechatView = ({ navigation, route }: IBaseScreen<ChatsStackParamL
126124
}, [departmentId, userId]);
127125

128126
const onPressDepartment = () => {
129-
navigation.navigate('PickerView', {
127+
navigate('PickerView', {
130128
title: I18n.t('Forward_to_department'),
131129
value: room?.departmentId,
132130
data: departments,
133131
onChangeValue: setDepartment,
134132
onSearch: getDepartments,
135133
onEndReached: getDepartments,
136-
total: departmentTotal,
137-
goBack: false
134+
total: departmentTotal
138135
});
139136
};
140137

141138
const onPressUser = () => {
142-
navigation.navigate('PickerView', {
139+
navigate('PickerView', {
143140
title: I18n.t('Forward_to_user'),
144141
data: users,
145142
onChangeValue: setUser,
146-
onSearch: getUsers,
147-
goBack: false
143+
onSearch: getUsers
148144
});
149145
};
150146

0 commit comments

Comments
 (0)