Merge pull request #3609 from RocketChat/chore/migration-ts-redux-sortPreferences

Chore: Migrate redux module sortPreferences to Typescript

app/actions/sortPreferences.js

@@ -1,15 +0,0 @@
-import * as types from './actionsTypes';
-
-export function setAllPreferences(preferences) {
-	return {
-		type: types.SORT_PREFERENCES.SET_ALL,
-		preferences
-	};
-}
-
-export function setPreference(preference) {
-	return {
-		type: types.SORT_PREFERENCES.SET,
-		preference
-	};
-}

app/actions/sortPreferences.ts

@@ -0,0 +1,28 @@
+import { Action } from 'redux';
+
+import { IPreferences } from '../definitions';
+import { SORT_PREFERENCES } from './actionsTypes';
+
+interface ISetAllPreferences extends Action {
+	preferences: IPreferences;
+}
+
+interface ISetPreference extends Action {
+	preference: Partial<IPreferences>;
+}
+
+export type TActionSortPreferences = ISetAllPreferences & ISetPreference;
+
+export function setAllPreferences(preferences: IPreferences): ISetAllPreferences {
+	return {
+		type: SORT_PREFERENCES.SET_ALL,
+		preferences
+	};
+}
+
+export function setPreference(preference: Partial<IPreferences>): ISetPreference {
+	return {
+		type: SORT_PREFERENCES.SET,
+		preference
+	};
+}

app/definitions/IPreferences.ts

@@ -0,0 +1,10 @@
+import { SortBy, DisplayMode } from '../constants/constantDisplayMode';
+
+export interface IPreferences {
+	sortBy: SortBy;
+	groupByType: boolean;
+	showFavorites: boolean;
+	showUnread: boolean;
+	showAvatar: boolean;
+	displayMode: DisplayMode;
+}

app/definitions/index.ts

@@ -8,6 +8,7 @@ export * from './INotification';
 export * from './IRoom';
 export * from './IServer';
 export * from './ISubscription';
+export * from './IPreferences';
 export * from './IServerHistory';
 
 export interface IBaseScreen<T extends Record<string, object | undefined>, S extends string> {

app/definitions/redux/index.ts

@@ -5,6 +5,7 @@ import { TActionInviteLinks } from '../../actions/inviteLinks';
 import { IActionRoles } from '../../actions/roles';
 import { TActionSelectedUsers } from '../../actions/selectedUsers';
 import { IActionSettings } from '../../actions/settings';
+import { TActionSortPreferences } from '../../actions/sortPreferences';
 // REDUCERS
 import { IActiveUsers } from '../../reducers/activeUsers';
 import { IEncryption } from '../../reducers/encryption';
@@ -43,4 +44,5 @@ export type TApplicationActions = TActionActiveUsers &
 	TActionInviteLinks &
 	IActionRoles &
 	IActionSettings &
-	TActionEncryption;
+	TActionEncryption &
+	TActionSortPreferences;

app/reducers/sortPreferences.test.ts

@@ -0,0 +1,35 @@
+import { IPreferences } from '../definitions';
+import { setAllPreferences, setPreference } from '../actions/sortPreferences';
+import { mockedStore } from './mockedStore';
+import { initialState } from './sortPreferences';
+import { DisplayMode, SortBy } from '../constants/constantDisplayMode';
+
+describe('test sortPreferences reducer', () => {
+	it('should return initial state', () => {
+		const state = mockedStore.getState().sortPreferences;
+		expect(state).toEqual(initialState);
+	});
+
+	it('should return correctly value after call setPreference action', () => {
+		const preferences: IPreferences = {
+			displayMode: DisplayMode.Condensed,
+			groupByType: true,
+			showAvatar: true,
+			showFavorites: true,
+			showUnread: true,
+			sortBy: SortBy.Activity
+		};
+		mockedStore.dispatch(setAllPreferences(preferences));
+		const state = mockedStore.getState().sortPreferences;
+		expect(state).toEqual(preferences);
+	});
+
+	it('should return correctly value after call setPreference action', () => {
+		const preference: Partial<IPreferences> = {
+			displayMode: DisplayMode.Expanded
+		};
+		mockedStore.dispatch(setPreference(preference));
+		const { displayMode } = mockedStore.getState().sortPreferences;
+		expect(displayMode).toEqual(DisplayMode.Expanded);
+	});
+});

app/reducers/sortPreferences.ts

@@ -1,7 +1,8 @@
 import { SORT_PREFERENCES } from '../actions/actionsTypes';
 import { DisplayMode, SortBy } from '../constants/constantDisplayMode';
+import { IPreferences, TApplicationActions } from '../definitions';
 
-const initialState = {
+export const initialState: IPreferences = {
 	sortBy: SortBy.Activity,
 	groupByType: false,
 	showFavorites: false,
@@ -10,7 +11,7 @@ const initialState = {
 	displayMode: DisplayMode.Expanded
 };
 
-export default (state = initialState, action) => {
+export default (state = initialState, action: TApplicationActions): IPreferences => {
 	switch (action.type) {
 		case SORT_PREFERENCES.SET_ALL:
 			return {

app/views/DisplayPrefsView.tsx

@@ -1,31 +1,23 @@
+import { StackNavigationProp } from '@react-navigation/stack';
 import React, { useEffect } from 'react';
 import { Switch } from 'react-native';
 import { RadioButton } from 'react-native-ui-lib';
-import { StackNavigationProp } from '@react-navigation/stack';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { setPreference } from '../actions/sortPreferences';
-import RocketChat from '../lib/rocketchat';
-import StatusBar from '../containers/StatusBar';
-import I18n from '../i18n';
-import * as List from '../containers/List';
-import { useTheme } from '../theme';
 import { themes } from '../constants/colors';
-import * as HeaderButton from '../containers/HeaderButton';
-import SafeAreaView from '../containers/SafeAreaView';
-import { ICON_SIZE } from '../containers/List/constants';
-import log, { events, logEvent } from '../utils/log';
 import { DisplayMode, SortBy } from '../constants/constantDisplayMode';
+import * as HeaderButton from '../containers/HeaderButton';
+import * as List from '../containers/List';
+import { ICON_SIZE } from '../containers/List/constants';
+import SafeAreaView from '../containers/SafeAreaView';
+import StatusBar from '../containers/StatusBar';
+import { IApplicationState, IPreferences } from '../definitions';
+import I18n from '../i18n';
+import RocketChat from '../lib/rocketchat';
 import { SettingsStackParamList } from '../stacks/types';
-
+import { useTheme } from '../theme';
-interface IParam {
+import log, { events, logEvent } from '../utils/log';
-	sortBy: SortBy;
-	groupByType: boolean;
-	showFavorites: boolean;
-	showUnread: boolean;
-	showAvatar: boolean;
-	displayMode: DisplayMode;
-}
 
 interface IDisplayPrefsView {
 	navigation: StackNavigationProp<SettingsStackParamList, 'DisplayPrefsView'>;
@@ -36,7 +28,7 @@ const DisplayPrefsView = (props: IDisplayPrefsView): JSX.Element => {
 	const { theme } = useTheme();
 
 	const { sortBy, groupByType, showFavorites, showUnread, showAvatar, displayMode } = useSelector(
-		(state: any) => state.sortPreferences
+		(state: IApplicationState) => state.sortPreferences
 	);
 	const { isMasterDetail } = useSelector((state: any) => state.app);
 	const dispatch = useDispatch();
@@ -53,7 +45,7 @@ const DisplayPrefsView = (props: IDisplayPrefsView): JSX.Element => {
 		}
 	}, []);
 
-	const setSortPreference = async (param: Partial<IParam>) => {
+	const setSortPreference = async (param: Partial<IPreferences>) => {
 		try {
 			dispatch(setPreference(param));
 			await RocketChat.saveSortPreference(param);

app/views/TeamChannelsView.tsx

@@ -1,36 +1,36 @@
+import { Q } from '@nozbe/watermelondb';
+import { HeaderBackButton, StackNavigationOptions, StackNavigationProp } from '@react-navigation/stack';
 import React from 'react';
 import { Alert, FlatList, Keyboard } from 'react-native';
-import { RouteProp } from '@react-navigation/native';
-import { Dispatch } from 'redux';
-import { Q } from '@nozbe/watermelondb';
 import { EdgeInsets, withSafeAreaInsets } from 'react-native-safe-area-context';
 import { connect } from 'react-redux';
-import { HeaderBackButton, StackNavigationOptions, StackNavigationProp } from '@react-navigation/stack';
 
-import StatusBar from '../containers/StatusBar';
+import { deleteRoom } from '../actions/room';
-import RoomHeader from '../containers/RoomHeader';
+import { themes } from '../constants/colors';
-import { withTheme } from '../theme';
+import { withActionSheet } from '../containers/ActionSheet';
-import log, { events, logEvent } from '../utils/log';
+import ActivityIndicator from '../containers/ActivityIndicator';
-import database from '../lib/database';
+import BackgroundContainer from '../containers/BackgroundContainer';
-import { getUserSelector } from '../selectors/login';
 import { getHeaderTitlePosition } from '../containers/Header';
 import * as HeaderButton from '../containers/HeaderButton';
-import BackgroundContainer from '../containers/BackgroundContainer';
+import RoomHeader from '../containers/RoomHeader';
 import SafeAreaView from '../containers/SafeAreaView';
-import ActivityIndicator from '../containers/ActivityIndicator';
 import SearchHeader from '../containers/SearchHeader';
-import RoomItem, { ROW_HEIGHT } from '../presentation/RoomItem';
+import StatusBar from '../containers/StatusBar';
-import RocketChat from '../lib/rocketchat';
+import { IApplicationState, IBaseScreen } from '../definitions';
 import { withDimensions } from '../dimensions';
-import { isIOS } from '../utils/deviceInfo';
-import debounce from '../utils/debounce';
-import { showErrorAlert } from '../utils/info';
-import { goRoom } from '../utils/goRoom';
 import I18n from '../i18n';
-import { withActionSheet } from '../containers/ActionSheet';
+import database from '../lib/database';
-import { deleteRoom as deleteRoomAction } from '../actions/room';
 import { CustomIcon } from '../lib/Icons';
-import { themes } from '../constants/colors';
+import RocketChat from '../lib/rocketchat';
+import RoomItem, { ROW_HEIGHT } from '../presentation/RoomItem';
+import { getUserSelector } from '../selectors/login';
+import { ChatsStackParamList } from '../stacks/types';
+import { withTheme } from '../theme';
+import debounce from '../utils/debounce';
+import { isIOS } from '../utils/deviceInfo';
+import { goRoom } from '../utils/goRoom';
+import { showErrorAlert } from '../utils/info';
+import log, { events, logEvent } from '../utils/log';
 
 const API_FETCH_COUNT = 25;
 const PERMISSION_DELETE_C = 'delete-c';
@@ -78,9 +78,11 @@ interface ITeamChannelsViewState {
 	showCreate: boolean;
 }
 
-interface ITeamChannelsViewProps {
+type IProps = Omit<IBaseScreen<ChatsStackParamList, 'TeamChannelsView'>, 'navigation'> & {
-	route: RouteProp<{ TeamChannelsView: { teamId: string } }, 'TeamChannelsView'>;
 	navigation: StackNavigationProp<any, 'TeamChannelsView'>;
+};
+
+interface ITeamChannelsViewProps extends IProps {
 	isMasterDetail: boolean;
 	insets: EdgeInsets;
 	theme: string;
@@ -93,7 +95,6 @@ interface ITeamChannelsViewProps {
 	deleteCPermission: string[];
 	deletePPermission: string[];
 	showActionSheet: (options: any) => void;
-	deleteRoom: (rid: string, t: string) => void;
 	showAvatar: boolean;
 	displayMode: string;
 }
@@ -422,7 +423,7 @@ class TeamChannelsView extends React.Component<ITeamChannelsViewProps, ITeamChan
 
 	delete = (item: IItem) => {
 		logEvent(events.TC_DELETE_ROOM);
-		const { deleteRoom } = this.props;
+		const { dispatch } = this.props;
 
 		Alert.alert(
 			I18n.t('Are_you_sure_question_mark'),
@@ -435,7 +436,7 @@ class TeamChannelsView extends React.Component<ITeamChannelsViewProps, ITeamChan
 				{
 					text: I18n.t('Yes_action_it', { action: I18n.t('delete') }),
 					style: 'destructive',
-					onPress: () => deleteRoom(item._id, item.t)
+					onPress: () => dispatch(deleteRoom(item._id, item.t))
 				}
 			],
 			{ cancelable: false }
@@ -574,7 +575,7 @@ class TeamChannelsView extends React.Component<ITeamChannelsViewProps, ITeamChan
 	}
 }
 
-const mapStateToProps = (state: any) => ({
+const mapStateToProps = (state: IApplicationState) => ({
 	baseUrl: state.server.server,
 	user: getUserSelector(state),
 	useRealName: state.settings.UI_Use_Real_Name,
@@ -589,11 +590,4 @@ const mapStateToProps = (state: any) => ({
 	displayMode: state.sortPreferences.displayMode
 });
 
-const mapDispatchToProps = (dispatch: Dispatch) => ({
+export default connect(mapStateToProps)(withDimensions(withSafeAreaInsets(withTheme(withActionSheet(TeamChannelsView)))));
-	deleteRoom: (rid: string, t: string) => dispatch(deleteRoomAction(rid, t))
-});
-
-export default connect(
-	mapStateToProps,
-	mapDispatchToProps
-)(withDimensions(withSafeAreaInsets(withTheme(withActionSheet(TeamChannelsView)))));