[IMPROVEMENT] Use reselect (#1696)

app/containers/MessageBox/EmojiKeyboard.js

@@ -17,7 +17,7 @@ export default class EmojiKeyboard extends React.PureComponent {
 	constructor(props) {
 		super(props);
 		const state = store.getState();
-		this.baseUrl = state.settings.Site_Url || state.server ? state.server.server : '';
+		this.baseUrl = state.server.server;
 	}
 
 	onEmojiSelected = (emoji) => {

app/containers/MessageBox/ReplyPreview.js

@@ -92,7 +92,7 @@ ReplyPreview.propTypes = {
 const mapStateToProps = state => ({
 	useMarkdown: state.markdown.useMarkdown,
 	Message_TimeFormat: state.settings.Message_TimeFormat,
-	baseUrl: state.settings.Site_Url || state.server ? state.server.server : ''
+	baseUrl: state.server.server
 });
 
 export default connect(mapStateToProps)(ReplyPreview);

app/containers/MessageBox/index.js

@@ -44,6 +44,7 @@ import {
 } from './constants';
 import CommandsPreview from './CommandsPreview';
 import { Review } from '../../utils/review';
+import { getUserSelector } from '../../selectors/login';
 
 const imagePickerConfig = {
 	cropping: true,
@@ -881,13 +882,9 @@ class MessageBox extends Component {
 }
 
 const mapStateToProps = state => ({
-	baseUrl: state.settings.Site_Url || state.server ? state.server.server : '',
+	baseUrl: state.server.server,
 	threadsEnabled: state.settings.Threads_enabled,
-	user: {
-		id: state.login.user && state.login.user.id,
-		username: state.login.user && state.login.user.username,
-		token: state.login.user && state.login.user.token
-	},
+	user: getUserSelector(state),
 	FileUpload_MediaTypeWhiteList: state.settings.FileUpload_MediaTypeWhiteList,
 	FileUpload_MaxFileSize: state.settings.FileUpload_MaxFileSize
 });

app/lib/methods/sendFileMessage.js

@@ -28,13 +28,9 @@ export async function cancelUpload(item) {
 export function sendFileMessage(rid, fileInfo, tmid, server, user) {
 	return new Promise(async(resolve, reject) => {
 		try {
-			const serversDB = database.servers;
-			const serversCollection = serversDB.collections.get('servers');
-			const serverInfo = await serversCollection.find(server);
-			const { id: Site_Url } = serverInfo;
 			const { id, token } = user;
 
-			const uploadUrl = `${ Site_Url }/api/v1/rooms.upload/${ rid }`;
+			const uploadUrl = `${ server }/api/v1/rooms.upload/${ rid }`;
 
 			const xhr = new XMLHttpRequest();
 			const formData = new FormData();

app/notifications/inApp/index.js

@@ -16,6 +16,7 @@ import { removeNotification as removeNotificationAction } from '../../actions/no
 import sharedStyles from '../../views/Styles';
 import { ROW_HEIGHT } from '../../presentation/RoomItem';
 import { withTheme } from '../../theme';
+import { getUserSelector } from '../../selectors/login';
 
 const AVATAR_SIZE = 48;
 const ANIMATION_DURATION = 300;
@@ -72,8 +73,7 @@ class NotificationBadge extends React.Component {
 	static propTypes = {
 		navigation: PropTypes.object,
 		baseUrl: PropTypes.string,
-		token: PropTypes.string,
-		userId: PropTypes.string,
+		user: PropTypes.object,
 		notification: PropTypes.object,
 		window: PropTypes.object,
 		removeNotification: PropTypes.func,
@@ -173,7 +173,7 @@ class NotificationBadge extends React.Component {
 
 	render() {
 		const {
-			baseUrl, token, userId, notification, window, theme
+			baseUrl, user: { id: userId, token }, notification, window, theme
 		} = this.props;
 		const { message, payload } = notification;
 		const { type } = payload;
@@ -227,9 +227,8 @@ class NotificationBadge extends React.Component {
 }
 
 const mapStateToProps = state => ({
-	userId: state.login.user && state.login.user.id,
-	baseUrl: state.settings.Site_Url || state.server ? state.server.server : '',
-	token: state.login.user && state.login.user.token,
+	user: getUserSelector(state),
+	baseUrl: state.server.server,
 	notification: state.notification
 });
 

app/selectors/login.js

+import { createSelector } from 'reselect';
+
+const getUser = state => state.login.user || {};
+
+export const getUserSelector = createSelector(
+	[getUser],
+	user => user
+);

app/views/AdminPanelView/index.js

@@ -11,6 +11,7 @@ import styles from '../Styles';
 import { themedHeader } from '../../utils/navigation';
 import { withTheme } from '../../theme';
 import { themes } from '../../constants/colors';
+import { getUserSelector } from '../../selectors/login';
 
 class AdminPanelView extends React.Component {
 	static navigationOptions = ({ navigation, screenProps }) => ({
@@ -21,12 +22,12 @@ class AdminPanelView extends React.Component {
 
 	static propTypes = {
 		baseUrl: PropTypes.string,
-		authToken: PropTypes.string,
+		token: PropTypes.string,
 		theme: PropTypes.string
 	}
 
 	render() {
-		const { baseUrl, authToken, theme } = this.props;
+		const { baseUrl, token, theme } = this.props;
 		if (!baseUrl) {
 			return null;
 		}
@@ -35,7 +36,7 @@ class AdminPanelView extends React.Component {
 				<StatusBar theme={theme} />
 				<WebView
 					source={{ uri: `${ baseUrl }/admin/info?layout=embedded` }}
-					injectedJavaScript={`Meteor.loginWithToken('${ authToken }', function() { })`}
+					injectedJavaScript={`Meteor.loginWithToken('${ token }', function() { })`}
 				/>
 			</SafeAreaView>
 		);
@@ -43,8 +44,8 @@ class AdminPanelView extends React.Component {
 }
 
 const mapStateToProps = state => ({
-	baseUrl: state.settings.Site_Url || state.server ? state.server.server : '',
-	authToken: state.login.user && state.login.user.token
+	baseUrl: state.server.server,
+	token: getUserSelector(state).token
 });
 
 export default connect(mapStateToProps)(withTheme(AdminPanelView));

app/views/AttachmentView.js

@@ -19,6 +19,7 @@ import { formatAttachmentUrl } from '../lib/utils';
 import RCActivityIndicator from '../containers/ActivityIndicator';
 import { SaveButton, CloseModalButton } from '../containers/HeaderButton';
 import { isAndroid } from '../utils/deviceInfo';
+import { getUserSelector } from '../selectors/login';
 
 const styles = StyleSheet.create({
 	container: {
@@ -142,11 +143,8 @@ class AttachmentView extends React.Component {
 }
 
 const mapStateToProps = state => ({
-	baseUrl: state.settings.Site_Url || state.server ? state.server.server : '',
-	user: {
-		id: state.login.user && state.login.user.id,
-		token: state.login.user && state.login.user.token
-	}
+	baseUrl: state.server.server,
+	user: getUserSelector(state)
 });
 
 export default connect(mapStateToProps)(withTheme(AttachmentView));

app/views/CreateChannelView.js

@@ -23,6 +23,7 @@ import { SWITCH_TRACK_COLOR, themes } from '../constants/colors';
 import { withTheme } from '../theme';
 import { themedHeader } from '../utils/navigation';
 import { Review } from '../utils/review';
+import { getUserSelector } from '../selectors/login';
 
 const styles = StyleSheet.create({
 	container: {
@@ -365,16 +366,13 @@ class CreateChannelView extends React.Component {
 }
 
 const mapStateToProps = state => ({
-	baseUrl: state.settings.Site_Url || state.server ? state.server.server : '',
+	baseUrl: state.server.server,
 	error: state.createChannel.error,
 	failure: state.createChannel.failure,
 	isFetching: state.createChannel.isFetching,
 	result: state.createChannel.result,
 	users: state.selectedUsers.users,
-	user: {
-		id: state.login.user && state.login.user.id,
-		token: state.login.user && state.login.user.token
-	}
+	user: getUserSelector(state)
 });
 
 const mapDispatchToProps = dispatch => ({

app/views/DirectoryView/index.js

@@ -23,6 +23,7 @@ import { withTheme } from '../../theme';
 import { themes } from '../../constants/colors';
 import styles from './styles';
 import { themedHeader } from '../../utils/navigation';
+import { getUserSelector } from '../../selectors/login';
 
 class DirectoryView extends React.Component {
 	static navigationOptions = ({ navigation, screenProps }) => {
@@ -253,11 +254,8 @@ class DirectoryView extends React.Component {
 }
 
 const mapStateToProps = state => ({
-	baseUrl: state.settings.Site_Url || state.server ? state.server.server : '',
-	user: {
-		id: state.login.user && state.login.user.id,
-		token: state.login.user && state.login.user.token
-	},
+	baseUrl: state.server.server,
+	user: getUserSelector(state),
 	isFederationEnabled: state.settings.FEDERATION_Enabled
 });
 

app/views/LanguageView/index.js

@@ -18,6 +18,7 @@ import Separator from '../../containers/Separator';
 import { themes } from '../../constants/colors';
 import { withTheme } from '../../theme';
 import { themedHeader } from '../../utils/navigation';
+import { getUserSelector } from '../../selectors/login';
 
 const LANGUAGES = [
 	{
@@ -185,7 +186,7 @@ class LanguageView extends React.Component {
 }
 
 const mapStateToProps = state => ({
-	userLanguage: state.login.user && state.login.user.language
+	userLanguage: getUserSelector(state).language
 });
 
 const mapDispatchToProps = dispatch => ({

app/views/MessagesView/index.js

@@ -17,6 +17,7 @@ import { themes } from '../../constants/colors';
 import { withTheme } from '../../theme';
 import { withSplit } from '../../split';
 import { themedHeader } from '../../utils/navigation';
+import { getUserSelector } from '../../selectors/login';
 
 const ACTION_INDEX = 0;
 const CANCEL_INDEX = 1;
@@ -306,12 +307,8 @@ class MessagesView extends React.Component {
 }
 
 const mapStateToProps = state => ({
-	baseUrl: state.settings.Site_Url || state.server ? state.server.server : '',
-	user: {
-		id: state.login.user && state.login.user.id,
-		username: state.login.user && state.login.user.username,
-		token: state.login.user && state.login.user.token
-	},
+	baseUrl: state.server.server,
+	user: getUserSelector(state),
 	customEmojis: state.customEmojis
 });
 

app/views/NewMessageView.js

@@ -23,6 +23,7 @@ import StatusBar from '../containers/StatusBar';
 import { themes } from '../constants/colors';
 import { withTheme } from '../theme';
 import { themedHeader } from '../utils/navigation';
+import { getUserSelector } from '../selectors/login';
 
 const styles = StyleSheet.create({
 	safeAreaView: {
@@ -227,11 +228,8 @@ class NewMessageView extends React.Component {
 }
 
 const mapStateToProps = state => ({
-	baseUrl: state.settings.Site_Url || state.server ? state.server.server : '',
-	user: {
-		id: state.login.user && state.login.user.id,
-		token: state.login.user && state.login.user.token
-	}
+	baseUrl: state.server.server,
+	user: getUserSelector(state)
 });
 
 export default connect(mapStateToProps)(withTheme(NewMessageView));

app/views/ProfileView/index.js

@@ -31,6 +31,7 @@ import StatusBar from '../../containers/StatusBar';
 import { themes } from '../../constants/colors';
 import { withTheme } from '../../theme';
 import { themedHeader } from '../../utils/navigation';
+import { getUserSelector } from '../../selectors/login';
 
 class ProfileView extends React.Component {
 	static navigationOptions = ({ navigation, screenProps }) => ({
@@ -497,16 +498,9 @@ class ProfileView extends React.Component {
 }
 
 const mapStateToProps = state => ({
-	user: {
-		id: state.login.user && state.login.user.id,
-		name: state.login.user && state.login.user.name,
-		username: state.login.user && state.login.user.username,
-		customFields: state.login.user && state.login.user.customFields,
-		emails: state.login.user && state.login.user.emails,
-		token: state.login.user && state.login.user.token
-	},
+	user: getUserSelector(state),
 	Accounts_CustomFields: state.settings.Accounts_CustomFields,
-	baseUrl: state.settings.Site_Url || state.server ? state.server.server : ''
+	baseUrl: state.server.server
 });
 
 const mapDispatchToProps = dispatch => ({

app/views/ReadReceiptView/index.js

@@ -15,6 +15,7 @@ import StatusBar from '../../containers/StatusBar';
 import { withTheme } from '../../theme';
 import { themedHeader } from '../../utils/navigation';
 import { themes } from '../../constants/colors';
+import { getUserSelector } from '../../selectors/login';
 
 class ReadReceiptView extends React.Component {
 	static navigationOptions = ({ screenProps }) => ({
@@ -26,8 +27,7 @@ class ReadReceiptView extends React.Component {
 		navigation: PropTypes.object,
 		Message_TimeFormat: PropTypes.string,
 		baseUrl: PropTypes.string,
-		userId: PropTypes.string,
-		token: PropTypes.string,
+		user: PropTypes.object,
 		theme: PropTypes.string
 	}
 
@@ -92,7 +92,7 @@ class ReadReceiptView extends React.Component {
 
 	renderItem = ({ item }) => {
 		const {
-			Message_TimeFormat, userId, baseUrl, token, theme
+			Message_TimeFormat, user: { id: userId, token }, baseUrl, theme
 		} = this.props;
 		const time = moment(item.ts).format(Message_TimeFormat);
 		return (
@@ -167,9 +167,8 @@ class ReadReceiptView extends React.Component {
 
 const mapStateToProps = state => ({
 	Message_TimeFormat: state.settings.Message_TimeFormat,
-	baseUrl: state.settings.Site_Url || state.server ? state.server.server : '',
-	userId: state.login.user && state.login.user.id,
-	token: state.login.user && state.login.user.token
+	baseUrl: state.server.server,
+	user: getUserSelector(state)
 });
 
 export default connect(mapStateToProps)(withTheme(ReadReceiptView));

app/views/RoomActionsView/index.js

@@ -24,6 +24,7 @@ import { themes } from '../../constants/colors';
 import { withTheme } from '../../theme';
 import { themedHeader } from '../../utils/navigation';
 import { CloseModalButton } from '../../containers/HeaderButton';
+import { getUserSelector } from '../../selectors/login';
 
 class RoomActionsView extends React.Component {
 	static navigationOptions = ({ navigation, screenProps }) => {
@@ -523,11 +524,8 @@ class RoomActionsView extends React.Component {
 }
 
 const mapStateToProps = state => ({
-	user: {
-		id: state.login.user && state.login.user.id,
-		token: state.login.user && state.login.user.token
-	},
-	baseUrl: state.settings.Site_Url || state.server ? state.server.server : '',
+	user: getUserSelector(state),
+	baseUrl: state.server.server,
 	jitsiEnabled: state.settings.Jitsi_Enabled || false
 });
 

app/views/RoomInfoView/index.js

@@ -19,6 +19,7 @@ import log from '../../utils/log';
 import { themes } from '../../constants/colors';
 import { withTheme } from '../../theme';
 import { themedHeader } from '../../utils/navigation';
+import { getUserSelector } from '../../selectors/login';
 
 const PERMISSION_EDIT_ROOM = 'edit-room';
 
@@ -309,11 +310,8 @@ class RoomInfoView extends React.Component {
 }
 
 const mapStateToProps = state => ({
-	baseUrl: state.settings.Site_Url || state.server ? state.server.server : '',
-	user: {
-		id: state.login.user && state.login.user.id,
-		token: state.login.user && state.login.user.token
-	},
+	baseUrl: state.server.server,
+	user: getUserSelector(state),
 	Message_TimeFormat: state.settings.Message_TimeFormat
 });
 

app/views/RoomMembersView/index.js

@@ -24,6 +24,7 @@ import ActivityIndicator from '../../containers/ActivityIndicator';
 import { withTheme } from '../../theme';
 import { themedHeader } from '../../utils/navigation';
 import { themes } from '../../constants/colors';
+import { getUserSelector } from '../../selectors/login';
 
 const PAGE_SIZE = 25;
 
@@ -287,11 +288,8 @@ class RoomMembersView extends React.Component {
 }
 
 const mapStateToProps = state => ({
-	baseUrl: state.settings.Site_Url || state.server ? state.server.server : '',
-	user: {
-		id: state.login.user && state.login.user.id,
-		token: state.login.user && state.login.user.token
-	}
+	baseUrl: state.server.server,
+	user: getUserSelector(state)
 });
 
 export default connect(mapStateToProps)(withTheme(RoomMembersView));

app/views/RoomView/Header/RightButtons.js

@@ -4,6 +4,7 @@ import { connect } from 'react-redux';
 
 import { CustomHeaderButtons, Item } from '../../../containers/HeaderButton';
 import database from '../../../lib/database';
+import { getUserSelector } from '../../../selectors/login';
 
 class RightButtonsContainer extends React.PureComponent {
 	static propTypes = {
@@ -102,7 +103,7 @@ class RightButtonsContainer extends React.PureComponent {
 }
 
 const mapStateToProps = state => ({
-	userId: state.login.user && state.login.user.id,
+	userId: getUserSelector(state).id,
 	threadsEnabled: state.settings.Threads_enabled
 });
 

app/views/RoomView/Header/index.js

@@ -8,6 +8,7 @@ import Header from './Header';
 import RightButtons from './RightButtons';
 import { withTheme } from '../../../theme';
 import RoomHeaderLeft from './RoomHeaderLeft';
+import { getUserSelector } from '../../../selectors/login';
 
 class RoomHeaderView extends Component {
 	static propTypes = {
@@ -86,9 +87,9 @@ const mapStateToProps = (state, ownProps) => {
 	let status;
 	const { rid, type } = ownProps;
 	if (type === 'd') {
-		if (state.login.user && state.login.user.id) {
-			const { id: loggedUserId } = state.login.user;
-			const userId = rid.replace(loggedUserId, '').trim();
+		const user = getUserSelector(state);
+		if (user.id) {
+			const userId = rid.replace(user.id, '').trim();
 			status = state.activeUsers[userId];
 		}
 	}