Merge pull request #3615 from RocketChat/chore/migration-ts-redux-rooms

Chore: migrate redux module room to typescript

app/actions/rooms.js

@@ -1,58 +0,0 @@
-import * as types from './actionsTypes';
-
-export function roomsRequest(params = { allData: false }) {
-	return {
-		type: types.ROOMS.REQUEST,
-		params
-	};
-}
-
-export function roomsSuccess() {
-	return {
-		type: types.ROOMS.SUCCESS
-	};
-}
-
-export function roomsFailure(err) {
-	return {
-		type: types.ROOMS.FAILURE,
-		err
-	};
-}
-
-export function roomsRefresh() {
-	return {
-		type: types.ROOMS.REFRESH
-	};
-}
-
-export function setSearch(searchText) {
-	return {
-		type: types.ROOMS.SET_SEARCH,
-		searchText
-	};
-}
-
-export function closeServerDropdown() {
-	return {
-		type: types.ROOMS.CLOSE_SERVER_DROPDOWN
-	};
-}
-
-export function toggleServerDropdown() {
-	return {
-		type: types.ROOMS.TOGGLE_SERVER_DROPDOWN
-	};
-}
-
-export function openSearchHeader() {
-	return {
-		type: types.ROOMS.OPEN_SEARCH_HEADER
-	};
-}
-
-export function closeSearchHeader() {
-	return {
-		type: types.ROOMS.CLOSE_SEARCH_HEADER
-	};
-}

app/actions/rooms.ts

@@ -0,0 +1,78 @@
+import { Action } from 'redux';
+
+import { ROOMS } from './actionsTypes';
+
+export interface IRoomsRequest extends Action {
+	params: any;
+}
+
+export interface ISetSearch extends Action {
+	searchText: string;
+}
+
+export interface IRoomsFailure extends Action {
+	err: Record<string, any> | string;
+}
+
+export type IRoomsAction = IRoomsRequest & ISetSearch & IRoomsFailure;
+
+export function roomsRequest(
+	params: {
+		allData: boolean;
+	} = { allData: false }
+): IRoomsRequest {
+	return {
+		type: ROOMS.REQUEST,
+		params
+	};
+}
+
+export function roomsSuccess(): Action {
+	return {
+		type: ROOMS.SUCCESS
+	};
+}
+
+export function roomsFailure(err: string): IRoomsFailure {
+	return {
+		type: ROOMS.FAILURE,
+		err
+	};
+}
+
+export function roomsRefresh(): Action {
+	return {
+		type: ROOMS.REFRESH
+	};
+}
+
+export function setSearch(searchText: string): ISetSearch {
+	return {
+		type: ROOMS.SET_SEARCH,
+		searchText
+	};
+}
+
+export function closeServerDropdown(): Action {
+	return {
+		type: ROOMS.CLOSE_SERVER_DROPDOWN
+	};
+}
+
+export function toggleServerDropdown(): Action {
+	return {
+		type: ROOMS.TOGGLE_SERVER_DROPDOWN
+	};
+}
+
+export function openSearchHeader(): Action {
+	return {
+		type: ROOMS.OPEN_SEARCH_HEADER
+	};
+}
+
+export function closeSearchHeader(): Action {
+	return {
+		type: ROOMS.CLOSE_SEARCH_HEADER
+	};
+}

app/reducers/rooms.test.ts

@@ -0,0 +1,77 @@
+import {
+	closeSearchHeader,
+	closeServerDropdown,
+	openSearchHeader,
+	roomsFailure,
+	roomsRefresh,
+	roomsRequest,
+	roomsSuccess,
+	setSearch,
+	toggleServerDropdown
+} from '../actions/rooms';
+import { mockedStore } from './mockedStore';
+import { initialState } from './rooms';
+
+describe('test selectedUsers reducer', () => {
+	it('should return initial state', () => {
+		const state = mockedStore.getState().rooms;
+		expect(state).toEqual(initialState);
+	});
+
+	it('should return modified store after call roomsRequest', () => {
+		mockedStore.dispatch(roomsRequest());
+		const state = mockedStore.getState().rooms;
+		const manipulated = { ...initialState, isFetching: true, failure: false, errorMessage: {} };
+		expect(state).toEqual(manipulated);
+	});
+
+	it('should return modified store after call roomsSuccess', () => {
+		mockedStore.dispatch(roomsSuccess());
+		const state = mockedStore.getState().rooms;
+		const manipulated = { ...initialState, isFetching: false, refreshing: false };
+		expect(state).toEqual(manipulated);
+	});
+
+	it('should return modified store after call roomsRefresh', () => {
+		mockedStore.dispatch(roomsRefresh());
+		const state = mockedStore.getState().rooms;
+		const manipulated = { ...initialState, isFetching: true, refreshing: true };
+		expect(state).toEqual(manipulated);
+	});
+
+	it('should return modified store after call setSearch', () => {
+		mockedStore.dispatch(setSearch('dog'));
+		const state = mockedStore.getState().rooms;
+		expect(state.searchText).toEqual('dog');
+	});
+
+	it('should return modified store after call closeServerDropdown', () => {
+		mockedStore.dispatch(closeServerDropdown());
+		const state = mockedStore.getState().rooms;
+		expect(state.closeServerDropdown).toEqual(!initialState.closeServerDropdown);
+	});
+
+	it('should return modified store after call toggleServerDropdown', () => {
+		mockedStore.dispatch(toggleServerDropdown());
+		const state = mockedStore.getState().rooms;
+		expect(state.showServerDropdown).toEqual(!initialState.showServerDropdown);
+	});
+
+	it('should return modified store after call openSearchHeader', () => {
+		mockedStore.dispatch(openSearchHeader());
+		const state = mockedStore.getState().rooms;
+		expect(state.showSearchHeader).toEqual(true);
+	});
+
+	it('should return modified store after call closeSearchHeader', () => {
+		mockedStore.dispatch(closeSearchHeader());
+		const state = mockedStore.getState().rooms;
+		expect(state.showSearchHeader).toEqual(false);
+	});
+
+	it('should return modified store after call roomsFailure', () => {
+		mockedStore.dispatch(roomsFailure('error'));
+		const state = mockedStore.getState().rooms;
+		expect(state.errorMessage).toEqual('error');
+	});
+});

app/reducers/rooms.ts

@@ -1,6 +1,18 @@
-import * as types from '../actions/actionsTypes';
+import { IRoomsAction } from '../actions/rooms';
+import { ROOMS } from '../actions/actionsTypes';
 
-const initialState = {
+export interface IRooms {
+	isFetching: boolean;
+	refreshing: boolean;
+	failure: boolean;
+	errorMessage: Record<string, any> | string;
+	searchText: string;
+	showServerDropdown: boolean;
+	closeServerDropdown: boolean;
+	showSearchHeader: boolean;
+}
+
+export const initialState: IRooms = {
 	isFetching: false,
 	refreshing: false,
 	failure: false,
@@ -11,22 +23,22 @@ const initialState = {
 	showSearchHeader: false
 };
 
-export default function login(state = initialState, action) {
+export default function rooms(state = initialState, action: IRoomsAction): IRooms {
 	switch (action.type) {
-		case types.ROOMS.REQUEST:
+		case ROOMS.REQUEST:
 			return {
 				...state,
 				isFetching: true,
 				failure: false,
 				errorMessage: {}
 			};
-		case types.ROOMS.SUCCESS:
+		case ROOMS.SUCCESS:
 			return {
 				...state,
 				isFetching: false,
 				refreshing: false
 			};
-		case types.ROOMS.FAILURE:
+		case ROOMS.FAILURE:
 			return {
 				...state,
 				isFetching: false,
@@ -34,33 +46,33 @@ export default function login(state = initialState, action) {
 				failure: true,
 				errorMessage: action.err
 			};
-		case types.ROOMS.REFRESH:
+		case ROOMS.REFRESH:
 			return {
 				...state,
 				isFetching: true,
 				refreshing: true
 			};
-		case types.ROOMS.SET_SEARCH:
+		case ROOMS.SET_SEARCH:
 			return {
 				...state,
 				searchText: action.searchText
 			};
-		case types.ROOMS.CLOSE_SERVER_DROPDOWN:
+		case ROOMS.CLOSE_SERVER_DROPDOWN:
 			return {
 				...state,
 				closeServerDropdown: !state.closeServerDropdown
 			};
-		case types.ROOMS.TOGGLE_SERVER_DROPDOWN:
+		case ROOMS.TOGGLE_SERVER_DROPDOWN:
 			return {
 				...state,
 				showServerDropdown: !state.showServerDropdown
 			};
-		case types.ROOMS.OPEN_SEARCH_HEADER:
+		case ROOMS.OPEN_SEARCH_HEADER:
 			return {
 				...state,
 				showSearchHeader: true
 			};
-		case types.ROOMS.CLOSE_SEARCH_HEADER:
+		case ROOMS.CLOSE_SEARCH_HEADER:
 			return {
 				...state,
 				showSearchHeader: false

app/views/RoomsListView/Header/index.js

@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 
-import { toggleServerDropdown, closeServerDropdown, setSearch as setSearchAction } from '../../../actions/rooms';
+import { toggleServerDropdown, closeServerDropdown, setSearch } from '../../../actions/rooms';
 import { withTheme } from '../../../theme';
 import EventEmitter from '../../../utils/events';
 import { KEY_COMMAND, handleCommandOpenServerDropdown } from '../../../commands';
@@ -19,10 +19,7 @@ class RoomsListHeaderView extends PureComponent {
 		connected: PropTypes.bool,
 		isFetching: PropTypes.bool,
 		theme: PropTypes.string,
-		server: PropTypes.string,
+		server: PropTypes.string
-		open: PropTypes.func,
-		close: PropTypes.func,
-		setSearch: PropTypes.func
 	};
 
 	componentDidMount() {
@@ -45,17 +42,17 @@ class RoomsListHeaderView extends PureComponent {
 	};
 
 	onSearchChangeText = text => {
-		const { setSearch } = this.props;
+		const { dispatch } = this.props;
-		setSearch(text.trim());
+		dispatch(setSearch(text.trim()));
 	};
 
 	onPress = () => {
 		logEvent(events.RL_TOGGLE_SERVER_DROPDOWN);
-		const { showServerDropdown, close, open } = this.props;
+		const { showServerDropdown, dispatch } = this.props;
 		if (showServerDropdown) {
-			close();
+			dispatch(closeServerDropdown());
 		} else {
-			open();
+			dispatch(toggleServerDropdown());
 		}
 	};
 
@@ -89,10 +86,4 @@ const mapStateToProps = state => ({
 	server: state.server.server
 });
 
-const mapDispatchtoProps = dispatch => ({
+export default connect(mapStateToProps)(withTheme(RoomsListHeaderView));
-	close: () => dispatch(closeServerDropdown()),
-	open: () => dispatch(toggleServerDropdown()),
-	setSearch: searchText => dispatch(setSearchAction(searchText))
-});
-
-export default connect(mapStateToProps, mapDispatchtoProps)(withTheme(RoomsListHeaderView));

app/views/RoomsListView/ServerDropdown.js

@@ -6,9 +6,9 @@ import { withSafeAreaInsets } from 'react-native-safe-area-context';
 
 import * as List from '../../containers/List';
 import Button from '../../containers/Button';
-import { toggleServerDropdown as toggleServerDropdownAction } from '../../actions/rooms';
+import { toggleServerDropdown } from '../../actions/rooms';
-import { selectServerRequest as selectServerRequestAction, serverInitAdd as serverInitAddAction } from '../../actions/server';
+import { selectServerRequest, serverInitAdd } from '../../actions/server';
-import { appStart as appStartAction, ROOT_OUTSIDE } from '../../actions/app';
+import { appStart, ROOT_OUTSIDE } from '../../actions/app';
 import RocketChat from '../../lib/rocketchat';
 import I18n from '../../i18n';
 import EventEmitter from '../../utils/events';
@@ -36,11 +36,7 @@ class ServerDropdown extends Component {
 		closeServerDropdown: PropTypes.bool,
 		server: PropTypes.string,
 		theme: PropTypes.string,
-		isMasterDetail: PropTypes.bool,
+		isMasterDetail: PropTypes.bool
-		appStart: PropTypes.func,
-		toggleServerDropdown: PropTypes.func,
-		selectServerRequest: PropTypes.func,
-		initAdd: PropTypes.func
 	};
 
 	constructor(props) {
@@ -89,13 +85,13 @@ class ServerDropdown extends Component {
 	}
 
 	close = () => {
-		const { toggleServerDropdown } = this.props;
+		const { dispatch } = this.props;
 		Animated.timing(this.animatedValue, {
 			toValue: 0,
 			duration: ANIMATION_DURATION,
 			easing: Easing.inOut(Easing.quad),
 			useNativeDriver: true
-		}).start(() => toggleServerDropdown());
+		}).start(() => dispatch(toggleServerDropdown()));
 	};
 
 	createWorkspace = async () => {
@@ -108,10 +104,10 @@ class ServerDropdown extends Component {
 	};
 
 	navToNewServer = previousServer => {
-		const { appStart, initAdd } = this.props;
+		const { dispatch } = this.props;
 		batch(() => {
-			appStart({ root: ROOT_OUTSIDE });
+			dispatch(appStart({ root: ROOT_OUTSIDE }));
-			initAdd(previousServer);
+			dispatch(serverInitAdd(previousServer));
 		});
 	};
 
@@ -125,7 +121,7 @@ class ServerDropdown extends Component {
 	};
 
 	select = async (server, version) => {
-		const { server: currentServer, selectServerRequest, isMasterDetail } = this.props;
+		const { server: currentServer, dispatch, isMasterDetail } = this.props;
 		this.close();
 		if (currentServer !== server) {
 			logEvent(events.RL_CHANGE_SERVER);
@@ -142,7 +138,7 @@ class ServerDropdown extends Component {
 				}, ANIMATION_DURATION);
 			} else {
 				await localAuthenticate(server);
-				selectServerRequest(server, version);
+				dispatch(selectServerRequest(server, version, true, true));
 			}
 		}
 	};
@@ -263,11 +259,4 @@ const mapStateToProps = state => ({
 	isMasterDetail: state.app.isMasterDetail
 });
 
-const mapDispatchToProps = dispatch => ({
+export default connect(mapStateToProps)(withSafeAreaInsets(withTheme(ServerDropdown)));
-	toggleServerDropdown: () => dispatch(toggleServerDropdownAction()),
-	selectServerRequest: (server, version) => dispatch(selectServerRequestAction(server, version, true, true)),
-	appStart: params => dispatch(appStartAction(params)),
-	initAdd: previousServer => dispatch(serverInitAddAction(previousServer))
-});
-
-export default connect(mapStateToProps, mapDispatchToProps)(withSafeAreaInsets(withTheme(ServerDropdown)));

app/views/RoomsListView/index.js

@@ -12,19 +12,13 @@ import RocketChat from '../../lib/rocketchat';
 import RoomItem, { ROW_HEIGHT, ROW_HEIGHT_CONDENSED } from '../../presentation/RoomItem';
 import log, { logEvent, events } from '../../utils/log';
 import I18n from '../../i18n';
-import {
+import { closeSearchHeader, closeServerDropdown, openSearchHeader, roomsRequest } from '../../actions/rooms';
-	closeSearchHeader as closeSearchHeaderAction,
+import { appStart, ROOT_OUTSIDE } from '../../actions/app';
-	closeServerDropdown as closeServerDropdownAction,
-	openSearchHeader as openSearchHeaderAction,
-	roomsRequest as roomsRequestAction
-} from '../../actions/rooms';
-import { appStart as appStartAction, ROOT_OUTSIDE } from '../../actions/app';
 import debounce from '../../utils/debounce';
 import { isIOS, isTablet } from '../../utils/deviceInfo';
 import * as HeaderButton from '../../containers/HeaderButton';
 import StatusBar from '../../containers/StatusBar';
 import ActivityIndicator from '../../containers/ActivityIndicator';
-import { selectServerRequest as selectServerRequestAction, serverInitAdd as serverInitAddAction } from '../../actions/server';
 import { animateNextTransition } from '../../utils/layoutAnimation';
 import { withTheme } from '../../theme';
 import { themes } from '../../constants/colors';
@@ -124,11 +118,6 @@ class RoomsListView extends React.Component {
 		refreshing: PropTypes.bool,
 		StoreLastMessage: PropTypes.bool,
 		theme: PropTypes.string,
-		openSearchHeader: PropTypes.func,
-		closeSearchHeader: PropTypes.func,
-		appStart: PropTypes.func,
-		roomsRequest: PropTypes.func,
-		closeServerDropdown: PropTypes.func,
 		useRealName: PropTypes.bool,
 		isMasterDetail: PropTypes.bool,
 		rooms: PropTypes.array,
@@ -169,7 +158,7 @@ class RoomsListView extends React.Component {
 	}
 
 	componentDidMount() {
-		const { navigation, closeServerDropdown } = this.props;
+		const { navigation, dispatch } = this.props;
 		this.handleHasPermission();
 		this.mounted = true;
 
@@ -193,7 +182,7 @@ class RoomsListView extends React.Component {
 		});
 		this.unsubscribeBlur = navigation.addListener('blur', () => {
 			this.animated = false;
-			closeServerDropdown();
+			dispatch(closeServerDropdown());
 			this.cancelSearch();
 			if (this.backHandler && this.backHandler.remove) {
 				this.backHandler.remove();
@@ -553,9 +542,9 @@ class RoomsListView extends React.Component {
 
 	initSearching = () => {
 		logEvent(events.RL_SEARCH);
-		const { openSearchHeader } = this.props;
+		const { dispatch } = this.props;
 		this.internalSetState({ searching: true }, () => {
-			openSearchHeader();
+			dispatch(openSearchHeader());
 			this.search('');
 			this.setHeader();
 		});
@@ -563,7 +552,7 @@ class RoomsListView extends React.Component {
 
 	cancelSearch = () => {
 		const { searching } = this.state;
-		const { closeSearchHeader } = this.props;
+		const { dispatch } = this.props;
 
 		if (!searching) {
 			return;
@@ -573,7 +562,7 @@ class RoomsListView extends React.Component {
 
 		this.setState({ searching: false, search: [] }, () => {
 			this.setHeader();
-			closeSearchHeader();
+			dispatch(closeSearchHeader());
 			setTimeout(() => {
 				this.scrollToTop();
 			}, 200);
@@ -842,7 +831,7 @@ class RoomsListView extends React.Component {
 	};
 
 	handleCommands = ({ event }) => {
-		const { navigation, server, isMasterDetail, appStart, initAdd } = this.props;
+		const { navigation, server, isMasterDetail, dispatch, initAdd } = this.props;
 		const { input } = event;
 		if (handleCommandShowPreferences(event)) {
 			navigation.navigate('SettingsView');
@@ -862,7 +851,7 @@ class RoomsListView extends React.Component {
 			}
 		} else if (handleCommandAddNewServer(event)) {
 			batch(() => {
-				appStart({ root: ROOT_OUTSIDE });
+				dispatch(appStart({ root: ROOT_OUTSIDE }));
 				initAdd(server);
 			});
 		}
@@ -870,11 +859,11 @@ class RoomsListView extends React.Component {
 
 	onRefresh = () => {
 		const { searching } = this.state;
-		const { roomsRequest } = this.props;
+		const { dispatch } = this.props;
 		if (searching) {
 			return;
 		}
-		roomsRequest({ allData: true });
+		dispatch(roomsRequest({ allData: true }));
 	};
 
 	onEndReached = () => {
@@ -1045,14 +1034,4 @@ const mapStateToProps = state => ({
 	createDiscussionPermission: state.permissions['start-discussion']
 });
 
-const mapDispatchToProps = dispatch => ({
+export default connect(mapStateToProps)(withDimensions(withTheme(withSafeAreaInsets(RoomsListView))));
-	openSearchHeader: () => dispatch(openSearchHeaderAction()),
-	closeSearchHeader: () => dispatch(closeSearchHeaderAction()),
-	roomsRequest: params => dispatch(roomsRequestAction(params)),
-	selectServerRequest: server => dispatch(selectServerRequestAction(server)),
-	closeServerDropdown: () => dispatch(closeServerDropdownAction()),
-	appStart: params => dispatch(appStartAction(params)),
-	initAdd: previousServer => dispatch(serverInitAddAction(previousServer))
-});
-
-export default connect(mapStateToProps, mapDispatchToProps)(withDimensions(withTheme(withSafeAreaInsets(RoomsListView))));