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='InviteUsersEditView' component={InviteUsersEditView} />
<ChatsStack.Screen name='MessagesView' component={MessagesView} />
{/* @ts-ignore */}
<ChatsStack.Screen name='AutoTranslateView' component={AutoTranslateView} options={AutoTranslateView.navigationOptions} />
<ChatsStack.Screen name='AutoTranslateView' component={AutoTranslateView} />
<ChatsStack.Screen name='DirectoryView' component={DirectoryView} options={DirectoryView.navigationOptions} />
<ChatsStack.Screen name='NotificationPrefView' component={NotificationPrefView} />
{/* @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='MessagesView' component={MessagesView} />
{/* @ts-ignore */}
<ModalStack.Screen name='AutoTranslateView' component={AutoTranslateView} options={AutoTranslateView.navigationOptions} />
<ModalStack.Screen name='AutoTranslateView' component={AutoTranslateView} />
<ModalStack.Screen
name='DirectoryView'
component={DirectoryView}

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