Chore: Migrate Redux to Typescript PoC

__mocks__/mockedStore.ts

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

__tests__/redux/activeUsers.test.ts

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

__tests__/redux/selectedUsers.test.ts

@@ -0,0 +1,40 @@
+import { addUser, reset, setLoading, removeUser } from '../../app/actions/selectedUsers';
+import { mockedStore } from '../../__mocks__/mockedStore';
+
+describe('test selectedUsers reducer', () => {
+	const initialState = {
+		users: [],
+		loading: false
+	};
+
+	it('should return initial state', async () => {
+		const state = mockedStore.getState().selectedUsers;
+		expect(state).toEqual(initialState);
+	});
+
+	it('should return modified store after addUser', async () => {
+		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', async () => {
+		const user = { _id: 'xxx', name: 'xxx', fname: 'xxx' };
+		mockedStore.dispatch(removeUser(user));
+		const state = mockedStore.getState().selectedUsers.users;
+		expect(state).toEqual([]);
+	});
+
+	it('should return initialState after reset', async () => {
+		mockedStore.dispatch(reset());
+		const state = mockedStore.getState().selectedUsers;
+		expect(state).toEqual(initialState);
+	});
+
+	it('should return loading after call action', async () => {
+		mockedStore.dispatch(setLoading(true));
+		const state = mockedStore.getState().selectedUsers.loading;
+		expect(state).toEqual(true);
+	});
+});

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 { IUser } from '../definitions';
+import * as types from './actionsTypes';
+
+type User = {
+	user: IUser;
+};
+
+type IAction = Action & User;
+
+interface SetLoading extends Action {
+	loading: boolean;
+}
+
+export type IActionSelectedUsers = IAction & SetLoading;
+
+export function addUser(user: IUser): IAction {
+	return {
+		type: types.SELECTED_USERS.ADD_USER,
+		user
+	};
+}
+
+export function removeUser(user: IUser): 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,25 @@
+import { StackNavigationProp } from '@react-navigation/stack';
+import { Dispatch } from 'redux';
+
+export interface BaseScreen {
+	navigation: StackNavigationProp<any>;
+	dispatch: Dispatch;
+	theme: string;
+}
+
+export interface IUser {
+	_id: string;
+	name: string;
+	fname: string;
+	search?: boolean;
+	// username is used when is from searching
+	username?: string;
+}
+
+type UserStatus = 'online' | 'offline';
+export interface ActiveUser {
+	status: UserStatus;
+	statusText?: 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.js → app/reducers/activeUsers.ts

@@ -1,8 +1,13 @@
+import { ActiveUser, ApplicationActions } from '../definitions';
 import { SET_ACTIVE_USERS } from '../actions/actionsTypes';
 
-const initialState = {};
+export interface IActiveUsers {
+	[key: string]: ActiveUser;
+}
+
+const initialState: IActiveUsers = {};
 
-export default function activeUsers(state = initialState, action) {
+export default function activeUsers(state = initialState, action: ApplicationActions): IActiveUsers {
 	switch (action.type) {
 		case SET_ACTIVE_USERS:
 			return {

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

@@ -1,11 +1,17 @@
+import { IUser, ApplicationActions } from '../definitions';
 import { SELECTED_USERS } from '../actions/actionsTypes';
 
-const initialState = {
+export interface ISelectedUsers {
+	users: IUser[];
+	loading: boolean;
+}
+
+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 {