diff --git a/app/stacks/InsideStack.tsx b/app/stacks/InsideStack.tsx
index 844f26f35..79698c0c4 100644
--- a/app/stacks/InsideStack.tsx
+++ b/app/stacks/InsideStack.tsx
@@ -113,8 +113,7 @@ const ChatsStackNavigator = () => {
- {/* @ts-ignore */}
-
+
{/* @ts-ignore */}
diff --git a/app/stacks/MasterDetailStack/index.tsx b/app/stacks/MasterDetailStack/index.tsx
index 2d0151649..1ad9df60e 100644
--- a/app/stacks/MasterDetailStack/index.tsx
+++ b/app/stacks/MasterDetailStack/index.tsx
@@ -138,8 +138,7 @@ const ModalStackNavigator = React.memo(({ navigation }: INavigation) => {
/>
- {/* @ts-ignore */}
-
+
;
+const AutoTranslateView = (): React.ReactElement => {
+ const navigation = useNavigation();
+ const {
+ params: { rid, room }
+ } = useRoute>();
+ const { colors } = useTheme();
-class AutoTranslateView extends React.Component {
- static navigationOptions = () => ({
- title: I18n.t('Auto_Translate')
- });
+ const [languages, setLanguages] = useState<{ language: string; name: string }[]>([]);
+ const [selectedLanguage, setSelectedLanguage] = useState(room?.autoTranslateLanguage);
+ const [enableAutoTranslate, setEnableAutoTranslate] = useState(room?.autoTranslate);
+ const subscription = useRef(null);
- private mounted: boolean;
- private rid: string;
- private roomObservable?: Observable;
- private subscription?: Subscription;
+ useLayoutEffect(() => {
+ navigation.setOptions({
+ title: I18n.t('Auto_Translate')
+ });
+ }, [navigation]);
- constructor(props: TAutoTranslateViewProps) {
- super(props);
- this.mounted = false;
- this.rid = props.route.params?.rid ?? '';
- const room = props.route.params?.room;
+ useEffect(() => {
+ (async () => {
+ try {
+ const languages = await Services.getSupportedLanguagesAutoTranslate();
+ setLanguages(languages);
+ } catch (error) {
+ console.log(error);
+ }
+ })();
+ }, []);
- 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
- };
- }
+ 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();
+ }, []);
- async componentDidMount() {
- 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 () => {
+ 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 ;
- };
+ const LanguageItem = React.memo(({ language, name }: { language: string; name?: string }) => (
+ saveAutoTranslateLanguage(language)}
+ testID={`auto-translate-view-${language}`}
+ right={() => (selectedLanguage === language ? : null)}
+ translateTitle={false}
+ />
+ ));
- renderSwitch = () => {
- const { enableAutoTranslate } = this.state;
- return ;
- };
-
- renderItem = ({ item }: { item: { language: string; name: string } }) => {
- const { selectedLanguage } = this.state;
- const { language, name } = item;
- const isSelected = selectedLanguage === language;
-
- return (
- this.saveAutoTranslateLanguage(language)}
- testID={`auto-translate-view-${language}`}
- right={() => (isSelected ? this.renderIcon() : null)}
- translateTitle={false}
+ return (
+
+
+ item.name || item.language}
+ renderItem={({ item: { language, name } }) => }
+ ListHeaderComponent={
+ <>
+
+ (
+
+ )}
+ />
+
+
+ }
+ ItemSeparatorComponent={List.Separator}
+ ListFooterComponent={List.Separator}
+ contentContainerStyle={[List.styles.contentContainerStyleFlatList, styles.list]}
/>
- );
- };
+
+ );
+};
- render() {
- const { languages } = this.state;
- return (
-
-
-
-
-
- this.renderSwitch()} />
-
-
- item.language}
- renderItem={this.renderItem}
- ItemSeparatorComponent={List.Separator}
- ListFooterComponent={List.Separator}
- ListHeaderComponent={List.Separator}
- contentContainerStyle={[List.styles.contentContainerStyleFlatList, styles.list]}
- />
-
-
- );
- }
-}
-
-export default withTheme(AutoTranslateView);
+export default AutoTranslateView;