verdnatura-mirror/Rocket.Chat.ReactNative
verdnatura-mirror
/
Rocket.Chat.ReactNative
mirror of https://github.com/RocketChat/Rocket.Chat.ReactNative
2
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

chore: migrate AutoTranslateView to hooks (#4677) 

Co-authored-by: Reinaldo Neto <47038980+reinaldonetof@users.noreply.github.com>
This commit is contained in:
Gleidson Daniel Silva 2023-06-29 19:01:34 -03:00 committed by GitHub
parent 47fbde566d
commit d30d4645a5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 95 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/stacks/InsideStack.tsx
View File

@ -113,8 +113,7 @@ const ChatsStackNavigator = () => {
<ChatsStack.Screen name='InviteUsersView' component={InviteUsersView} /> <ChatsStack.Screen name='InviteUsersView' component={InviteUsersView} />
<ChatsStack.Screen name='InviteUsersEditView' component={InviteUsersEditView} /> <ChatsStack.Screen name='InviteUsersEditView' component={InviteUsersEditView} />
<ChatsStack.Screen name='MessagesView' component={MessagesView} /> <ChatsStack.Screen name='MessagesView' component={MessagesView} />
{/* @ts-ignore */} <ChatsStack.Screen name='AutoTranslateView' component={AutoTranslateView} />
<ChatsStack.Screen name='AutoTranslateView' component={AutoTranslateView} options={AutoTranslateView.navigationOptions} />
<ChatsStack.Screen name='DirectoryView' component={DirectoryView} options={DirectoryView.navigationOptions} /> <ChatsStack.Screen name='DirectoryView' component={DirectoryView} options={DirectoryView.navigationOptions} />
<ChatsStack.Screen name='NotificationPrefView' component={NotificationPrefView} /> <ChatsStack.Screen name='NotificationPrefView' component={NotificationPrefView} />
{/* @ts-ignore */} {/* @ts-ignore */}

3
app/stacks/MasterDetailStack/index.tsx
View File

@ -138,8 +138,7 @@ const ModalStackNavigator = React.memo(({ navigation }: INavigation) => {
/> />
<ModalStack.Screen name='InviteUsersEditView' component={InviteUsersEditView} /> <ModalStack.Screen name='InviteUsersEditView' component={InviteUsersEditView} />
<ModalStack.Screen name='MessagesView' component={MessagesView} /> <ModalStack.Screen name='MessagesView' component={MessagesView} />
{/* @ts-ignore */} <ModalStack.Screen name='AutoTranslateView' component={AutoTranslateView} />
<ModalStack.Screen name='AutoTranslateView' component={AutoTranslateView} options={AutoTranslateView.navigationOptions} />
<ModalStack.Screen <ModalStack.Screen
name='DirectoryView' name='DirectoryView'
component={DirectoryView} component={DirectoryView}

212
app/views/AutoTranslateView/index.tsx
View File

@ -1,17 +1,18 @@
import React from 'react'; import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
import { FlatList, StyleSheet, Switch } from 'react-native'; import { FlatList, StyleSheet, Switch } from 'react-native';
import { Observable, Subscription } from 'rxjs'; import { Subscription } from 'rxjs';
import { RouteProp, useNavigation, useRoute } from '@react-navigation/native';
import { ChatsStackParamList } from '../../stacks/types';
import I18n from '../../i18n';
import StatusBar from '../../containers/StatusBar';
import * as List from '../../containers/List'; import * as List from '../../containers/List';
import { SWITCH_TRACK_COLOR, themes } from '../../lib/constants';
import { withTheme } from '../../theme';
import SafeAreaView from '../../containers/SafeAreaView'; import SafeAreaView from '../../containers/SafeAreaView';
import StatusBar from '../../containers/StatusBar';
import { ISubscription } from '../../definitions';
import I18n from '../../i18n';
import { SWITCH_TRACK_COLOR } from '../../lib/constants';
import { events, logEvent } from '../../lib/methods/helpers/log'; import { events, logEvent } from '../../lib/methods/helpers/log';
import { IBaseScreen, ISubscription } from '../../definitions';
import { Services } from '../../lib/services'; import { Services } from '../../lib/services';
import { ChatsStackParamList } from '../../stacks/types';
import { useTheme } from '../../theme';
const styles = StyleSheet.create({ const styles = StyleSheet.create({
list: { list: {
@ -19,144 +20,117 @@ const styles = StyleSheet.create({
} }
}); });
type TAutoTranslateViewProps = IBaseScreen<ChatsStackParamList, 'AutoTranslateView'>; const AutoTranslateView = (): React.ReactElement => {
const navigation = useNavigation();
const {
params: { rid, room }
} = useRoute<RouteProp<ChatsStackParamList, 'AutoTranslateView'>>();
const { colors } = useTheme();
class AutoTranslateView extends React.Component<TAutoTranslateViewProps, any> { const [languages, setLanguages] = useState<{ language: string; name: string }[]>([]);
static navigationOptions = () => ({ const [selectedLanguage, setSelectedLanguage] = useState<string | undefined>(room?.autoTranslateLanguage);
title: I18n.t('Auto_Translate') const [enableAutoTranslate, setEnableAutoTranslate] = useState<boolean | undefined>(room?.autoTranslate);
}); const subscription = useRef<Subscription | null>(null);
private mounted: boolean; useLayoutEffect(() => {
private rid: string; navigation.setOptions({
private roomObservable?: Observable<ISubscription>; title: I18n.t('Auto_Translate')
private subscription?: Subscription; });
}, [navigation]);
constructor(props: TAutoTranslateViewProps) { useEffect(() => {
super(props); (async () => {
this.mounted = false; try {
this.rid = props.route.params?.rid ?? ''; const languages = await Services.getSupportedLanguagesAutoTranslate();
const room = props.route.params?.room; setLanguages(languages);
} catch (error) {
console.log(error);
}
})();
}, []);
if (room && room.observe) { useEffect(() => {
this.roomObservable = room.observe(); let letSelectedLanguage = selectedLanguage;
this.subscription = this.roomObservable.subscribe((changes: ISubscription) => { let letAutoTranslate = enableAutoTranslate;
if (this.mounted) { subscription.current = room.observe().subscribe((changes: ISubscription) => {
const { selectedLanguage, enableAutoTranslate } = this.state; if (letSelectedLanguage !== changes.autoTranslateLanguage) {
if (selectedLanguage !== changes.autoTranslateLanguage) { setSelectedLanguage(changes.autoTranslateLanguage);
this.setState({ selectedLanguage: changes.autoTranslateLanguage }); letSelectedLanguage = changes.autoTranslateLanguage;
} }
if (enableAutoTranslate !== changes.autoTranslate) { if (letAutoTranslate !== changes.autoTranslate) {
this.setState({ enableAutoTranslate: changes.autoTranslate }); setEnableAutoTranslate(changes.autoTranslate);
} letAutoTranslate = changes.autoTranslate;
} }
}); });
} return () => subscription.current?.unsubscribe && subscription.current.unsubscribe();
this.state = { }, []);
languages: [],
selectedLanguage: room?.autoTranslateLanguage,
enableAutoTranslate: room?.autoTranslate
};
}
async componentDidMount() { const toggleAutoTranslate = async () => {
this.mounted = true;
try {
const languages = await Services.getSupportedLanguagesAutoTranslate();
this.setState({ languages });
} catch (error) {
console.log(error);
}
}
componentWillUnmount() {
if (this.subscription && this.subscription.unsubscribe) {
this.subscription.unsubscribe();
}
}
toggleAutoTranslate = async () => {
logEvent(events.AT_TOGGLE_TRANSLATE); logEvent(events.AT_TOGGLE_TRANSLATE);
const { enableAutoTranslate } = this.state;
try { try {
setEnableAutoTranslate(!enableAutoTranslate);
await Services.saveAutoTranslate({ await Services.saveAutoTranslate({
rid: this.rid, rid,
field: 'autoTranslate', field: 'autoTranslate',
value: enableAutoTranslate ? '0' : '1', value: enableAutoTranslate ? '0' : '1',
options: { defaultLanguage: 'en' } options: { defaultLanguage: 'en' }
}); });
this.setState({ enableAutoTranslate: !enableAutoTranslate });
} catch (error) { } catch (error) {
setEnableAutoTranslate(!enableAutoTranslate);
logEvent(events.AT_TOGGLE_TRANSLATE_F); logEvent(events.AT_TOGGLE_TRANSLATE_F);
console.log(error);
} }
}; };
saveAutoTranslateLanguage = async (language: string) => { const saveAutoTranslateLanguage = async (selectedLanguage: string) => {
logEvent(events.AT_SET_LANG); logEvent(events.AT_SET_LANG);
try { try {
await Services.saveAutoTranslate({ await Services.saveAutoTranslate({
rid: this.rid, rid,
field: 'autoTranslateLanguage', field: 'autoTranslateLanguage',
value: language value: selectedLanguage
}); });
this.setState({ selectedLanguage: language }); setSelectedLanguage(selectedLanguage);
} catch (error) { } catch (error) {
logEvent(events.AT_SET_LANG_F); logEvent(events.AT_SET_LANG_F);
console.log(error);
} }
}; };
renderIcon = () => { const LanguageItem = React.memo(({ language, name }: { language: string; name?: string }) => (
const { theme } = this.props; <List.Item
return <List.Icon name='check' color={themes[theme!].tintColor} />; title={name || language}
}; onPress={() => saveAutoTranslateLanguage(language)}
testID={`auto-translate-view-${language}`}
right={() => (selectedLanguage === language ? <List.Icon name='check' color={colors.tintColor} /> : null)}
translateTitle={false}
/>
));
renderSwitch = () => { return (
const { enableAutoTranslate } = this.state; <SafeAreaView testID='auto-translate-view'>
return <Switch value={enableAutoTranslate} trackColor={SWITCH_TRACK_COLOR} onValueChange={this.toggleAutoTranslate} />; <StatusBar />
}; <FlatList
data={languages}
renderItem = ({ item }: { item: { language: string; name: string } }) => { keyExtractor={item => item.name || item.language}
const { selectedLanguage } = this.state; renderItem={({ item: { language, name } }) => <LanguageItem language={language} name={name} />}
const { language, name } = item; ListHeaderComponent={
const isSelected = selectedLanguage === language; <>
<List.Separator />
return ( <List.Item
<List.Item title='Enable_Auto_Translate'
title={name || language} testID='auto-translate-view-switch'
onPress={() => this.saveAutoTranslateLanguage(language)} right={() => (
testID={`auto-translate-view-${language}`} <Switch value={enableAutoTranslate} trackColor={SWITCH_TRACK_COLOR} onValueChange={toggleAutoTranslate} />
right={() => (isSelected ? this.renderIcon() : null)} )}
translateTitle={false} />
<List.Separator />
</>
}
ItemSeparatorComponent={List.Separator}
ListFooterComponent={List.Separator}
contentContainerStyle={[List.styles.contentContainerStyleFlatList, styles.list]}
/> />
); </SafeAreaView>
}; );
};
render() { export default AutoTranslateView;
const { languages } = this.state;
return (
<SafeAreaView testID='auto-translate-view'>
<StatusBar />
<List.Container testID='auto-translate-view-list'>
<List.Section>
<List.Separator />
<List.Item title='Enable_Auto_Translate' testID='auto-translate-view-switch' right={() => this.renderSwitch()} />
<List.Separator />
</List.Section>
<FlatList
data={languages}
extraData={this.state}
keyExtractor={item => item.language}
renderItem={this.renderItem}
ItemSeparatorComponent={List.Separator}
ListFooterComponent={List.Separator}
ListHeaderComponent={List.Separator}
contentContainerStyle={[List.styles.contentContainerStyleFlatList, styles.list]}
/>
</List.Container>
</SafeAreaView>
);
}
}
export default withTheme(AutoTranslateView);