Chore: Migrate Redux to Typescript PoC

.eslintrc.js

@@ -17,14 +17,15 @@ module.exports = {
 			legacyDecorators: true
 		}
 	},
-	plugins: ['react', 'jsx-a11y', 'import', 'react-native', '@babel'],
+	plugins: ['react', 'jsx-a11y', 'import', 'react-native', '@babel', 'jest'],
 	env: {
 		browser: true,
 		commonjs: true,
 		es6: true,
 		node: true,
 		jquery: true,
-		mocha: true
+		mocha: true,
+		'jest/globals': true
 	},
 	rules: {
 		'import/extensions': [

app/actions/actionsTypes.js → app/actions/actionsTypes.ts

@@ -2,8 +2,8 @@ const REQUEST = 'REQUEST';
 const SUCCESS = 'SUCCESS';
 const FAILURE = 'FAILURE';
 const defaultTypes = [REQUEST, SUCCESS, FAILURE];
-function createRequestTypes(base, types = defaultTypes) {
-	const res = {};
+function createRequestTypes(base = {}, types = defaultTypes): Record<any, any> {
+	const res: Record<any, any> = {};
 	types.forEach(type => (res[type] = `${base}_${type}`));
 	return res;
 }

app/actions/activeUsers.ts

@@ -0,0 +1,15 @@
+import { Action } from 'redux';
+
+import { IActiveUsers } from '../reducers/activeUsers';
+import { SET_ACTIVE_USERS } from './actionsTypes';
+
+export interface SetActiveUsers extends Action {
+	activeUsers: IActiveUsers;
+}
+
+export type IActionActiveUsers = SetActiveUsers;
+
+export const setActiveUsers = (activeUsers: IActiveUsers): SetActiveUsers => ({
+	type: SET_ACTIVE_USERS,
+	activeUsers
+});

app/actions/selectedUsers.ts

@@ -0,0 +1,43 @@
+import { Action } from 'redux';
+
+import { ISelectedUser } from '../reducers/selectedUsers';
+import * as types from './actionsTypes';
+
+type User = {
+	user: ISelectedUser;
+};
+
+type IAction = Action & User;
+
+interface SetLoading extends Action {
+	loading: boolean;
+}
+
+export type IActionSelectedUsers = IAction & SetLoading;
+
+export function addUser(user: ISelectedUser): IAction {
+	return {
+		type: types.SELECTED_USERS.ADD_USER,
+		user
+	};
+}
+
+export function removeUser(user: ISelectedUser): IAction {
+	return {
+		type: types.SELECTED_USERS.REMOVE_USER,
+		user
+	};
+}
+
+export function reset(): Action {
+	return {
+		type: types.SELECTED_USERS.RESET
+	};
+}
+
+export function setLoading(loading: boolean): SetLoading {
+	return {
+		type: types.SELECTED_USERS.SET_LOADING,
+		loading
+	};
+}

app/definitions/index.ts

@@ -0,0 +1,10 @@
+import { StackNavigationProp } from '@react-navigation/stack';
+import { Dispatch } from 'redux';
+
+export interface BaseScreen {
+	navigation: StackNavigationProp<any>;
+	dispatch: Dispatch;
+	theme: string;
+}
+
+export * from './redux';

app/definitions/redux/index.ts

@@ -0,0 +1,31 @@
+import { IActionSelectedUsers } from '../../actions/selectedUsers';
+import { IActionActiveUsers } from '../../actions/activeUsers';
+// REDUCERS
+import { IActiveUsers } from '../../reducers/activeUsers';
+import { ISelectedUsers } from '../../reducers/selectedUsers';
+
+export interface ApplicationState {
+	settings: any;
+	login: any;
+	meteor: any;
+	server: any;
+	selectedUsers: ISelectedUsers;
+	createChannel: any;
+	app: any;
+	room: any;
+	rooms: any;
+	sortPreferences: any;
+	share: any;
+	customEmojis: any;
+	activeUsers: IActiveUsers;
+	usersTyping: any;
+	inviteLinks: any;
+	createDiscussion: any;
+	inquiry: any;
+	enterpriseModules: any;
+	encryption: any;
+	permissions: any;
+	roles: any;
+}
+
+export type ApplicationActions = IActionActiveUsers & IActionSelectedUsers;

app/reducers/activeUsers.test.ts

@@ -0,0 +1,16 @@
+import { setActiveUsers } from '../actions/activeUsers';
+import { IActiveUsers, initialState } from './activeUsers';
+import { mockedStore } from './mockedStore';
+
+describe('test reducer', () => {
+	it('should return initial state', () => {
+		const state = mockedStore.getState().activeUsers;
+		expect(state).toEqual(initialState);
+	});
+	it('should return modified store after action', () => {
+		const activeUsers: IActiveUsers = { any: { status: 'online', statusText: 'any' } };
+		mockedStore.dispatch(setActiveUsers(activeUsers));
+		const state = mockedStore.getState().activeUsers;
+		expect(state).toEqual({ ...activeUsers });
+	});
+});

app/reducers/activeUsers.ts

@@ -0,0 +1,26 @@
+import { ApplicationActions } from '../definitions';
+import { SET_ACTIVE_USERS } from '../actions/actionsTypes';
+
+type UserStatus = 'online' | 'offline';
+export interface ActiveUser {
+	status: UserStatus;
+	statusText?: string;
+}
+
+export interface IActiveUsers {
+	[key: string]: ActiveUser;
+}
+
+export const initialState: IActiveUsers = {};
+
+export default function activeUsers(state = initialState, action: ApplicationActions): IActiveUsers {
+	switch (action.type) {
+		case SET_ACTIVE_USERS:
+			return {
+				...state,
+				...action.activeUsers
+			};
+		default:
+			return state;
+	}
+}

app/reducers/mockedStore.ts

@@ -0,0 +1,7 @@
+import { applyMiddleware, compose, createStore } from 'redux';
+import createSagaMiddleware from 'redux-saga';
+
+import reducers from '.';
+
+const enhancers = compose(applyMiddleware(createSagaMiddleware()));
+export const mockedStore = createStore(reducers, enhancers);

app/reducers/selectedUsers.test.ts

@@ -0,0 +1,36 @@
+import { addUser, reset, setLoading, removeUser } from '../actions/selectedUsers';
+import { mockedStore } from './mockedStore';
+import { initialState } from './selectedUsers';
+
+describe('test selectedUsers reducer', () => {
+	it('should return initial state', () => {
+		const state = mockedStore.getState().selectedUsers;
+		expect(state).toEqual(initialState);
+	});
+
+	it('should return modified store after addUser', () => {
+		const user = { _id: 'xxx', name: 'xxx', fname: 'xxx' };
+		mockedStore.dispatch(addUser(user));
+		const state = mockedStore.getState().selectedUsers.users;
+		expect(state).toEqual([user]);
+	});
+
+	it('should return empty store after remove user', () => {
+		const user = { _id: 'xxx', name: 'xxx', fname: 'xxx' };
+		mockedStore.dispatch(removeUser(user));
+		const state = mockedStore.getState().selectedUsers.users;
+		expect(state).toEqual([]);
+	});
+
+	it('should return initial state after reset', () => {
+		mockedStore.dispatch(reset());
+		const state = mockedStore.getState().selectedUsers;
+		expect(state).toEqual(initialState);
+	});
+
+	it('should return loading after call action', () => {
+		mockedStore.dispatch(setLoading(true));
+		const state = mockedStore.getState().selectedUsers.loading;
+		expect(state).toEqual(true);
+	});
+});

app/reducers/selectedUsers.js → app/reducers/selectedUsers.ts

@@ -1,11 +1,26 @@
+import { ApplicationActions } from '../definitions';
 import { SELECTED_USERS } from '../actions/actionsTypes';
 
-const initialState = {
+export interface ISelectedUser {
+	_id: string;
+	name: string;
+	fname: string;
+	search?: boolean;
+	// username is used when is from searching
+	username?: string;
+}
+
+export interface ISelectedUsers {
+	users: ISelectedUser[];
+	loading: boolean;
+}
+
+export const initialState: ISelectedUsers = {
 	users: [],
 	loading: false
 };
 
-export default function (state = initialState, action) {
+export default function (state = initialState, action: ApplicationActions): ISelectedUsers {
 	switch (action.type) {
 		case SELECTED_USERS.ADD_USER:
 			return {