From 7d15e2d30995f6a87ac3d381568f99ed0e2f513e Mon Sep 17 00:00:00 2001 From: Alex Junior Date: Wed, 10 Nov 2021 11:55:37 -0300 Subject: [PATCH] Chore: Migrate NotificationPreferencesView to Typescript * chore: migrate the view NotificationPreferencesView to ts * chore: change the type of `room` to use Observable and Subscription --- .../{index.js => index.tsx} | 70 ++++++++++++------- .../{options.js => options.ts} | 16 ++++- 2 files changed, 60 insertions(+), 26 deletions(-) rename app/views/NotificationPreferencesView/{index.js => index.tsx} (72%) rename app/views/NotificationPreferencesView/{options.js => options.ts} (80%) diff --git a/app/views/NotificationPreferencesView/index.js b/app/views/NotificationPreferencesView/index.tsx similarity index 72% rename from app/views/NotificationPreferencesView/index.js rename to app/views/NotificationPreferencesView/index.tsx index f0d7437a6..a020c1631 100644 --- a/app/views/NotificationPreferencesView/index.js +++ b/app/views/NotificationPreferencesView/index.tsx @@ -1,6 +1,9 @@ import React from 'react'; import { StyleSheet, Switch, Text } from 'react-native'; -import PropTypes from 'prop-types'; +import { RouteProp } from '@react-navigation/core'; +import { StackNavigationProp } from '@react-navigation/stack'; +import Model from '@nozbe/watermelondb/Model'; +import { Observable, Subscription } from 'rxjs'; import database from '../../lib/database'; import { SWITCH_TRACK_COLOR, themes } from '../../constants/colors'; @@ -22,18 +25,31 @@ const styles = StyleSheet.create({ } }); -class NotificationPreferencesView extends React.Component { +interface INotificationPreferencesView { + navigation: StackNavigationProp; + route: RouteProp< + { + NotificationPreferencesView: { + rid: string; + room: Model; + }; + }, + 'NotificationPreferencesView' + >; + theme: string; +} + +class NotificationPreferencesView extends React.Component { static navigationOptions = () => ({ title: I18n.t('Notification_Preferences') }); - static propTypes = { - navigation: PropTypes.object, - route: PropTypes.object, - theme: PropTypes.string - }; + private mounted: boolean; + private rid: string | undefined; + private roomObservable?: Observable; + private subscription?: Subscription; - constructor(props) { + constructor(props: INotificationPreferencesView) { super(props); this.mounted = false; this.rid = props.route.params?.rid; @@ -43,10 +59,11 @@ class NotificationPreferencesView extends React.Component { }; if (room && room.observe) { this.roomObservable = room.observe(); - this.subscription = this.roomObservable.subscribe(changes => { + this.subscription = this.roomObservable.subscribe((changes: any) => { if (this.mounted) { this.setState({ room: changes }); } else { + // @ts-ignore this.state.room = changes; } }); @@ -63,7 +80,8 @@ class NotificationPreferencesView extends React.Component { } } - saveNotificationSettings = async (key, value, params) => { + saveNotificationSettings = async (key: string, value: string | boolean, params: any) => { + // @ts-ignore logEvent(events[`NP_${key.toUpperCase()}`]); const { room } = this.state; const db = database.active; @@ -71,7 +89,7 @@ class NotificationPreferencesView extends React.Component { try { await db.action(async () => { await room.update( - protectedFunction(r => { + protectedFunction((r: any) => { r[key] = value; }) ); @@ -88,36 +106,38 @@ class NotificationPreferencesView extends React.Component { await db.action(async () => { await room.update( - protectedFunction(r => { + protectedFunction((r: any) => { r[key] = room[key]; }) ); }); } catch (e) { + // @ts-ignore logEvent(events[`NP_${key.toUpperCase()}_F`]); log(e); } }; - onValueChangeSwitch = (key, value) => this.saveNotificationSettings(key, value, { [key]: value ? '1' : '0' }); + onValueChangeSwitch = (key: string, value: string | boolean) => + this.saveNotificationSettings(key, value, { [key]: value ? '1' : '0' }); - onValueChangePicker = (key, value) => this.saveNotificationSettings(key, value, { [key]: value.toString() }); + onValueChangePicker = (key: string, value: string) => this.saveNotificationSettings(key, value, { [key]: value.toString() }); - pickerSelection = (title, key) => { + pickerSelection = (title: string, key: string) => { const { room } = this.state; const { navigation } = this.props; navigation.navigate('PickerView', { title, data: OPTIONS[key], value: room[key], - onChangeValue: value => this.onValueChangePicker(key, value) + onChangeValue: (value: string) => this.onValueChangePicker(key, value) }); }; - renderPickerOption = key => { + renderPickerOption = (key: string) => { const { room } = this.state; const { theme } = this.props; - const text = room[key] ? OPTIONS[key].find(option => option.value === room[key]) : OPTIONS[key][0]; + const text = room[key] ? OPTIONS[key].find((option: any) => option.value === room[key]) : OPTIONS[key][0]; return ( {I18n.t(text?.label, { defaultValue: text?.label, second: text?.second })} @@ -125,7 +145,7 @@ class NotificationPreferencesView extends React.Component { ); }; - renderSwitch = key => { + renderSwitch = (key: string) => { const { room } = this.state; return ( this.pickerSelection(title, 'desktopNotifications')} + onPress={(title: string) => this.pickerSelection(title, 'desktopNotifications')} right={() => this.renderPickerOption('desktopNotifications')} /> @@ -193,7 +213,7 @@ class NotificationPreferencesView extends React.Component { this.pickerSelection(title, 'mobilePushNotifications')} + onPress={(title: string) => this.pickerSelection(title, 'mobilePushNotifications')} right={() => this.renderPickerOption('mobilePushNotifications')} /> @@ -205,21 +225,21 @@ class NotificationPreferencesView extends React.Component { this.pickerSelection(title, 'audioNotifications')} + onPress={(title: string) => this.pickerSelection(title, 'audioNotifications')} right={() => this.renderPickerOption('audioNotifications')} /> this.pickerSelection(title, 'audioNotificationValue')} + onPress={(title: string) => this.pickerSelection(title, 'audioNotificationValue')} right={() => this.renderPickerOption('audioNotificationValue')} /> this.pickerSelection(title, 'desktopNotificationDuration')} + onPress={(title: string) => this.pickerSelection(title, 'desktopNotificationDuration')} right={() => this.renderPickerOption('desktopNotificationDuration')} /> @@ -230,7 +250,7 @@ class NotificationPreferencesView extends React.Component { this.pickerSelection(title, 'emailNotifications')} + onPress={(title: string) => this.pickerSelection(title, 'emailNotifications')} right={() => this.renderPickerOption('emailNotifications')} /> diff --git a/app/views/NotificationPreferencesView/options.js b/app/views/NotificationPreferencesView/options.ts similarity index 80% rename from app/views/NotificationPreferencesView/options.js rename to app/views/NotificationPreferencesView/options.ts index 660ff6df0..4035c0380 100644 --- a/app/views/NotificationPreferencesView/options.js +++ b/app/views/NotificationPreferencesView/options.ts @@ -1,4 +1,18 @@ -export const OPTIONS = { +interface IOptionsField { + label: string; + value: string | number; + second?: number; +} +export interface INotificationOptions { + [desktopNotifications: string]: IOptionsField[]; + audioNotifications: IOptionsField[]; + mobilePushNotifications: IOptionsField[]; + emailNotifications: IOptionsField[]; + desktopNotificationDuration: IOptionsField[]; + audioNotificationValue: IOptionsField[]; +} + +export const OPTIONS: INotificationOptions = { desktopNotifications: [ { label: 'Default',