Skip to content

Commit d30d464

Browse files
dnlsilvareinaldonetof
dnlsilva
and
reinaldonetof
authored
chore: migrate AutoTranslateView to hooks (#4677)
Co-authored-by: Reinaldo Neto <[email protected]>
1 parent 47fbde5 commit d30d464

File tree

3 files changed

+100
-128
lines changed

3 files changed

+100
-128
lines changed

‎app/stacks/InsideStack.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -113,8 +113,7 @@ const ChatsStackNavigator = () => {
113113
<ChatsStack.Screen name='InviteUsersView' component={InviteUsersView} />
114114
<ChatsStack.Screen name='InviteUsersEditView' component={InviteUsersEditView} />
115115
<ChatsStack.Screen name='MessagesView' component={MessagesView} />
116-
{/* @ts-ignore */}
117-
<ChatsStack.Screen name='AutoTranslateView' component={AutoTranslateView} options={AutoTranslateView.navigationOptions} />
116+
<ChatsStack.Screen name='AutoTranslateView' component={AutoTranslateView} />
118117
<ChatsStack.Screen name='DirectoryView' component={DirectoryView} options={DirectoryView.navigationOptions} />
119118
<ChatsStack.Screen name='NotificationPrefView' component={NotificationPrefView} />
120119
{/* @ts-ignore */}

‎app/stacks/MasterDetailStack/index.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -138,8 +138,7 @@ const ModalStackNavigator = React.memo(({ navigation }: INavigation) => {
138138
/>
139139
<ModalStack.Screen name='InviteUsersEditView' component={InviteUsersEditView} />
140140
<ModalStack.Screen name='MessagesView' component={MessagesView} />
141-
{/* @ts-ignore */}
142-
<ModalStack.Screen name='AutoTranslateView' component={AutoTranslateView} options={AutoTranslateView.navigationOptions} />
141+
<ModalStack.Screen name='AutoTranslateView' component={AutoTranslateView} />
143142
<ModalStack.Screen
144143
name='DirectoryView'
145144
component={DirectoryView}

‎app/views/AutoTranslateView/index.tsx

Lines changed: 98 additions & 124 deletions
Original file line numberDiff line numberDiff line change
@@ -1,162 +1,136 @@
1-
import React from 'react';
1+
import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
22
import { FlatList, StyleSheet, Switch } from 'react-native';
3-
import { Observable, Subscription } from 'rxjs';
3+
import { Subscription } from 'rxjs';
4+
import { RouteProp, useNavigation, useRoute } from '@react-navigation/native';
45

5-
import { ChatsStackParamList } from '../../stacks/types';
6-
import I18n from '../../i18n';
7-
import StatusBar from '../../containers/StatusBar';
86
import * as List from '../../containers/List';
9-
import { SWITCH_TRACK_COLOR, themes } from '../../lib/constants';
10-
import { withTheme } from '../../theme';
117
import SafeAreaView from '../../containers/SafeAreaView';
8+
import StatusBar from '../../containers/StatusBar';
9+
import { ISubscription } from '../../definitions';
10+
import I18n from '../../i18n';
11+
import { SWITCH_TRACK_COLOR } from '../../lib/constants';
1212
import { events, logEvent } from '../../lib/methods/helpers/log';
13-
import { IBaseScreen, ISubscription } from '../../definitions';
1413
import { Services } from '../../lib/services';
14+
import { ChatsStackParamList } from '../../stacks/types';
15+
import { useTheme } from '../../theme';
1516

1617
const styles = StyleSheet.create({
1718
list: {
1819
paddingTop: 16
1920
}
2021
});
2122

22-
type TAutoTranslateViewProps = IBaseScreen<ChatsStackParamList, 'AutoTranslateView'>;
23-
24-
class AutoTranslateView extends React.Component<TAutoTranslateViewProps, any> {
25-
static navigationOptions = () => ({
26-
title: I18n.t('Auto_Translate')
27-
});
28-
29-
private mounted: boolean;
30-
private rid: string;
31-
private roomObservable?: Observable<ISubscription>;
32-
private subscription?: Subscription;
33-
34-
constructor(props: TAutoTranslateViewProps) {
35-
super(props);
36-
this.mounted = false;
37-
this.rid = props.route.params?.rid ?? '';
38-
const room = props.route.params?.room;
39-
40-
if (room && room.observe) {
41-
this.roomObservable = room.observe();
42-
this.subscription = this.roomObservable.subscribe((changes: ISubscription) => {
43-
if (this.mounted) {
44-
const { selectedLanguage, enableAutoTranslate } = this.state;
45-
if (selectedLanguage !== changes.autoTranslateLanguage) {
46-
this.setState({ selectedLanguage: changes.autoTranslateLanguage });
47-
}
48-
if (enableAutoTranslate !== changes.autoTranslate) {
49-
this.setState({ enableAutoTranslate: changes.autoTranslate });
50-
}
51-
}
52-
});
53-
}
54-
this.state = {
55-
languages: [],
56-
selectedLanguage: room?.autoTranslateLanguage,
57-
enableAutoTranslate: room?.autoTranslate
58-
};
59-
}
60-
61-
async componentDidMount() {
62-
this.mounted = true;
63-
try {
64-
const languages = await Services.getSupportedLanguagesAutoTranslate();
65-
this.setState({ languages });
66-
} catch (error) {
67-
console.log(error);
68-
}
69-
}
70-
71-
componentWillUnmount() {
72-
if (this.subscription && this.subscription.unsubscribe) {
73-
this.subscription.unsubscribe();
74-
}
75-
}
76-
77-
toggleAutoTranslate = async () => {
23+
const AutoTranslateView = (): React.ReactElement => {
24+
const navigation = useNavigation();
25+
const {
26+
params: { rid, room }
27+
} = useRoute<RouteProp<ChatsStackParamList, 'AutoTranslateView'>>();
28+
const { colors } = useTheme();
29+
30+
const [languages, setLanguages] = useState<{ language: string; name: string }[]>([]);
31+
const [selectedLanguage, setSelectedLanguage] = useState<string | undefined>(room?.autoTranslateLanguage);
32+
const [enableAutoTranslate, setEnableAutoTranslate] = useState<boolean | undefined>(room?.autoTranslate);
33+
const subscription = useRef<Subscription | null>(null);
34+
35+
useLayoutEffect(() => {
36+
navigation.setOptions({
37+
title: I18n.t('Auto_Translate')
38+
});
39+
}, [navigation]);
40+
41+
useEffect(() => {
42+
(async () => {
43+
try {
44+
const languages = await Services.getSupportedLanguagesAutoTranslate();
45+
setLanguages(languages);
46+
} catch (error) {
47+
console.log(error);
48+
}
49+
})();
50+
}, []);
51+
52+
useEffect(() => {
53+
let letSelectedLanguage = selectedLanguage;
54+
let letAutoTranslate = enableAutoTranslate;
55+
subscription.current = room.observe().subscribe((changes: ISubscription) => {
56+
if (letSelectedLanguage !== changes.autoTranslateLanguage) {
57+
setSelectedLanguage(changes.autoTranslateLanguage);
58+
letSelectedLanguage = changes.autoTranslateLanguage;
59+
}
60+
if (letAutoTranslate !== changes.autoTranslate) {
61+
setEnableAutoTranslate(changes.autoTranslate);
62+
letAutoTranslate = changes.autoTranslate;
63+
}
64+
});
65+
return () => subscription.current?.unsubscribe && subscription.current.unsubscribe();
66+
}, []);
67+
68+
const toggleAutoTranslate = async () => {
7869
logEvent(events.AT_TOGGLE_TRANSLATE);
79-
const { enableAutoTranslate } = this.state;
8070
try {
71+
setEnableAutoTranslate(!enableAutoTranslate);
8172
await Services.saveAutoTranslate({
82-
rid: this.rid,
73+
rid,
8374
field: 'autoTranslate',
8475
value: enableAutoTranslate ? '0' : '1',
8576
options: { defaultLanguage: 'en' }
8677
});
87-
this.setState({ enableAutoTranslate: !enableAutoTranslate });
8878
} catch (error) {
79+
setEnableAutoTranslate(!enableAutoTranslate);
8980
logEvent(events.AT_TOGGLE_TRANSLATE_F);
90-
console.log(error);
9181
}
9282
};
9383

94-
saveAutoTranslateLanguage = async (language: string) => {
84+
const saveAutoTranslateLanguage = async (selectedLanguage: string) => {
9585
logEvent(events.AT_SET_LANG);
9686
try {
9787
await Services.saveAutoTranslate({
98-
rid: this.rid,
88+
rid,
9989
field: 'autoTranslateLanguage',
100-
value: language
90+
value: selectedLanguage
10191
});
102-
this.setState({ selectedLanguage: language });
92+
setSelectedLanguage(selectedLanguage);
10393
} catch (error) {
10494
logEvent(events.AT_SET_LANG_F);
105-
console.log(error);
10695
}
10796
};
10897

109-
renderIcon = () => {
110-
const { theme } = this.props;
111-
return <List.Icon name='check' color={themes[theme!].tintColor} />;
112-
};
113-
114-
renderSwitch = () => {
115-
const { enableAutoTranslate } = this.state;
116-
return <Switch value={enableAutoTranslate} trackColor={SWITCH_TRACK_COLOR} onValueChange={this.toggleAutoTranslate} />;
117-
};
118-
119-
renderItem = ({ item }: { item: { language: string; name: string } }) => {
120-
const { selectedLanguage } = this.state;
121-
const { language, name } = item;
122-
const isSelected = selectedLanguage === language;
123-
124-
return (
125-
<List.Item
126-
title={name || language}
127-
onPress={() => this.saveAutoTranslateLanguage(language)}
128-
testID={`auto-translate-view-${language}`}
129-
right={() => (isSelected ? this.renderIcon() : null)}
130-
translateTitle={false}
131-
/>
132-
);
133-
};
134-
135-
render() {
136-
const { languages } = this.state;
137-
return (
138-
<SafeAreaView testID='auto-translate-view'>
139-
<StatusBar />
140-
<List.Container testID='auto-translate-view-list'>
141-
<List.Section>
98+
const LanguageItem = React.memo(({ language, name }: { language: string; name?: string }) => (
99+
<List.Item
100+
title={name || language}
101+
onPress={() => saveAutoTranslateLanguage(language)}
102+
testID={`auto-translate-view-${language}`}
103+
right={() => (selectedLanguage === language ? <List.Icon name='check' color={colors.tintColor} /> : null)}
104+
translateTitle={false}
105+
/>
106+
));
107+
108+
return (
109+
<SafeAreaView testID='auto-translate-view'>
110+
<StatusBar />
111+
<FlatList
112+
data={languages}
113+
keyExtractor={item => item.name || item.language}
114+
renderItem={({ item: { language, name } }) => <LanguageItem language={language} name={name} />}
115+
ListHeaderComponent={
116+
<>
142117
<List.Separator />
143-
<List.Item title='Enable_Auto_Translate' testID='auto-translate-view-switch' right={() => this.renderSwitch()} />
118+
<List.Item
119+
title='Enable_Auto_Translate'
120+
testID='auto-translate-view-switch'
121+
right={() => (
122+
<Switch value={enableAutoTranslate} trackColor={SWITCH_TRACK_COLOR} onValueChange={toggleAutoTranslate} />
123+
)}
124+
/>
144125
<List.Separator />
145-
</List.Section>
146-
<FlatList
147-
data={languages}
148-
extraData={this.state}
149-
keyExtractor={item => item.language}
150-
renderItem={this.renderItem}
151-
ItemSeparatorComponent={List.Separator}
152-
ListFooterComponent={List.Separator}
153-
ListHeaderComponent={List.Separator}
154-
contentContainerStyle={[List.styles.contentContainerStyleFlatList, styles.list]}
155-
/>
156-
</List.Container>
157-
</SafeAreaView>
158-
);
159-
}
160-
}
126+
</>
127+
}
128+
ItemSeparatorComponent={List.Separator}
129+
ListFooterComponent={List.Separator}
130+
contentContainerStyle={[List.styles.contentContainerStyleFlatList, styles.list]}
131+
/>
132+
</SafeAreaView>
133+
);
134+
};
161135

162-
export default withTheme(AutoTranslateView);
136+
export default AutoTranslateView;

0 commit comments

Comments
 (0)