[IMPROVEMENT] Use reselect (#1696)

app/views/RoomView/ReactionPicker.js

@@ -83,7 +83,7 @@ class ReactionPicker extends React.Component {
 }
 
 const mapStateToProps = state => ({
-	baseUrl: state.settings.Site_Url || state.server ? state.server.server : ''
+	baseUrl: state.server.server
 });
 
 export default responsive(connect(mapStateToProps)(withSplit(ReactionPicker)));

app/views/RoomView/index.js

@@ -49,6 +49,7 @@ import {
 import ModalNavigation from '../../lib/ModalNavigation';
 import { Review } from '../../utils/review';
 import RoomClass from '../../lib/methods/subscriptions/room';
+import { getUserSelector } from '../../selectors/login';
 import { CONTAINER_TYPES } from '../../lib/methods/actions';
 
 const stateAttrsUpdate = [
@@ -940,11 +941,7 @@ class RoomView extends React.Component {
 }
 
 const mapStateToProps = state => ({
-	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),
 	appState: state.app.ready && state.app.foreground ? 'foreground' : 'background',
 	useRealName: state.settings.UI_Use_Real_Name,
 	isAuthenticated: state.login.isAuthenticated,
@@ -952,7 +949,7 @@ const mapStateToProps = state => ({
 	Message_TimeFormat: state.settings.Message_TimeFormat,
 	useMarkdown: state.markdown.useMarkdown,
 	customEmojis: state.customEmojis,
-	baseUrl: state.settings.baseUrl || state.server ? state.server.server : '',
+	baseUrl: state.server.server,
 	Message_Read_Receipt_Enabled: state.settings.Message_Read_Receipt_Enabled
 });
 

app/views/RoomsListView/index.js

@@ -59,6 +59,7 @@ import {
 } from '../../commands';
 import { MAX_SIDEBAR_WIDTH } from '../../constants/tablet';
 import { withSplit } from '../../split';
+import { getUserSelector } from '../../selectors/login';
 
 const SCROLL_OFFSET = 56;
 const INITIAL_NUM_TO_RENDER = isTablet ? 20 : 12;
@@ -148,10 +149,11 @@ class RoomsListView extends React.Component {
 
 	static propTypes = {
 		navigation: PropTypes.object,
-		userId: PropTypes.string,
-		username: PropTypes.string,
-		token: PropTypes.string,
-		baseUrl: PropTypes.string,
+		user: PropTypes.shape({
+			id: PropTypes.string,
+			username: PropTypes.string,
+			token: PropTypes.string
+		}),
 		server: PropTypes.string,
 		searchText: PropTypes.string,
 		loadingServer: PropTypes.bool,
@@ -700,10 +702,12 @@ class RoomsListView extends React.Component {
 
 		const { width } = this.state;
 		const {
-			userId,
-			username,
-			token,
-			baseUrl,
+			user: {
+				id: userId,
+				username,
+				token
+			},
+			server,
 			StoreLastMessage,
 			theme,
 			split
@@ -730,7 +734,7 @@ class RoomsListView extends React.Component {
 				token={token}
 				rid={item.rid}
 				type={item.t}
-				baseUrl={baseUrl}
+				baseUrl={server}
 				prid={item.prid}
 				showLastMessage={StoreLastMessage}
 				onPress={() => this._onPressItem(item)}
@@ -815,11 +819,8 @@ class RoomsListView extends React.Component {
 }
 
 const mapStateToProps = state => ({
-	userId: 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),
 	server: state.server.server,
-	baseUrl: state.settings.baseUrl || state.server ? state.server.server : '',
 	searchText: state.rooms.searchText,
 	loadingServer: state.server.loading,
 	showServerDropdown: state.rooms.showServerDropdown,

app/views/SearchMessagesView/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';
 
 class SearchMessagesView extends React.Component {
 	static navigationOptions = ({ screenProps }) => ({
@@ -167,12 +168,8 @@ class SearchMessagesView 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/SelectedUsersView.js

@@ -25,6 +25,7 @@ import { themes } from '../constants/colors';
 import { animateNextTransition } from '../utils/layoutAnimation';
 import { withTheme } from '../theme';
 import { themedHeader } from '../utils/navigation';
+import { getUserSelector } from '../selectors/login';
 
 const styles = StyleSheet.create({
 	safeAreaView: {
@@ -305,13 +306,10 @@ class SelectedUsersView extends React.Component {
 }
 
 const mapStateToProps = state => ({
-	baseUrl: state.settings.Site_Url || state.server ? state.server.server : '',
+	baseUrl: state.server.server,
 	users: state.selectedUsers.users,
 	loading: state.selectedUsers.loading,
-	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/SetUsernameView.js

@@ -21,6 +21,7 @@ import { themedHeader } from '../utils/navigation';
 import { withTheme } from '../theme';
 import { themes } from '../constants/colors';
 import { isTablet } from '../utils/deviceInfo';
+import { getUserSelector } from '../selectors/login';
 
 const styles = StyleSheet.create({
 	loginTitle: {
@@ -161,7 +162,7 @@ class SetUsernameView extends React.Component {
 
 const mapStateToProps = state => ({
 	server: state.server.server,
-	token: state.login.user && state.login.user.token
+	token: getUserSelector(state).token
 });
 
 const mapDispatchToProps = dispatch => ({

app/views/SettingsView/index.js

@@ -36,6 +36,7 @@ import { LISTENER } from '../../containers/Toast';
 import EventEmitter from '../../utils/events';
 import { appStart as appStartAction } from '../../actions';
 import { onReviewPress } from '../../utils/review';
+import { getUserSelector } from '../../selectors/login';
 
 const SectionSeparator = React.memo(({ theme }) => (
 	<View
@@ -364,7 +365,7 @@ class SettingsView extends React.Component {
 
 const mapStateToProps = state => ({
 	server: state.server,
-	token: state.login.user && state.login.user.token,
+	token: getUserSelector(state).token,
 	useMarkdown: state.markdown.useMarkdown,
 	allowCrashReport: state.crashReport.allowCrashReport
 });

app/views/ShareListView/index.js

@@ -87,7 +87,6 @@ class ShareListView extends React.Component {
 	static propTypes = {
 		navigation: PropTypes.object,
 		server: PropTypes.string,
-		baseUrl: PropTypes.string,
 		token: PropTypes.string,
 		userId: PropTypes.string,
 		theme: PropTypes.string
@@ -301,7 +300,7 @@ class ShareListView extends React.Component {
 
 	renderItem = ({ item }) => {
 		const {
-			userId, token, baseUrl, theme
+			userId, token, server, theme
 		} = this.props;
 		return (
 			<DirectoryItem
@@ -310,7 +309,7 @@ class ShareListView extends React.Component {
 					token
 				}}
 				title={this.getRoomTitle(item)}
-				baseUrl={baseUrl}
+				baseUrl={server}
 				avatar={this.getRoomTitle(item)}
 				description={
 					item.t === 'c'
@@ -464,8 +463,7 @@ class ShareListView extends React.Component {
 const mapStateToProps = (({ share }) => ({
 	userId: share.user && share.user.id,
 	token: share.user && share.user.token,
-	server: share.server,
-	baseUrl: share ? share.server : ''
+	server: share.server
 }));
 
 export default connect(mapStateToProps)(withTheme(ShareListView));

app/views/ShareView/index.js

@@ -48,7 +48,7 @@ class ShareView extends React.Component {
 			username: PropTypes.string.isRequired,
 			token: PropTypes.string.isRequired
 		}),
-		baseUrl: PropTypes.string.isRequired
+		server: PropTypes.string
 	};
 
 	constructor(props) {
@@ -104,7 +104,7 @@ class ShareView extends React.Component {
 
 	sendMediaMessage = async() => {
 		const { rid, fileInfo, file } = this.state;
-		const { baseUrl: server, user } = this.props;
+		const { server, user } = this.props;
 		const { name, description } = file;
 		const fileMessage = {
 			name,
@@ -293,7 +293,7 @@ const mapStateToProps = (({ share }) => ({
 		username: share.user && share.user.username,
 		token: share.user && share.user.token
 	},
-	baseUrl: share ? share.server : ''
+	server: share.server
 }));
 
 export default connect(mapStateToProps)(withTheme(ShareView));

app/views/SidebarView/index.js

@@ -22,6 +22,7 @@ import database from '../../lib/database';
 import { animateNextTransition } from '../../utils/layoutAnimation';
 import { withTheme } from '../../theme';
 import { withSplit } from '../../split';
+import { getUserSelector } from '../../selectors/login';
 
 const keyExtractor = item => item.id;
 
@@ -297,15 +298,8 @@ class Sidebar extends Component {
 
 const mapStateToProps = state => ({
 	Site_Name: state.settings.Site_Name,
-	user: {
-		id: state.login.user && state.login.user.id,
-		language: state.login.user && state.login.user.language,
-		status: state.login.user && state.login.user.status,
-		username: state.login.user && state.login.user.username,
-		token: state.login.user && state.login.user.token,
-		roles: state.login.user && state.login.user.roles
-	},
-	baseUrl: state.settings.Site_Url || state.server ? state.server.server : '',
+	user: getUserSelector(state),
+	baseUrl: state.server.server,
 	loadingServer: state.server.loading
 });
 

app/views/ThreadMessagesView/index.js

@@ -25,6 +25,7 @@ import { themes } from '../../constants/colors';
 import { withTheme } from '../../theme';
 import { themedHeader } from '../../utils/navigation';
 import ModalNavigation from '../../lib/ModalNavigation';
+import { getUserSelector } from '../../selectors/login';
 
 const Separator = React.memo(({ theme }) => <View style={[styles.separator, { backgroundColor: themes[theme].separatorColor }]} />);
 Separator.propTypes = {
@@ -348,12 +349,8 @@ class ThreadMessagesView 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),
 	useRealName: state.settings.UI_Use_Real_Name,
 	customEmojis: state.customEmojis
 });

package.json

@@ -100,6 +100,7 @@
     "redux-immutable-state-invariant": "^2.1.0",
     "redux-saga": "1.1.3",
     "remove-markdown": "^0.3.0",
+    "reselect": "^4.0.0",
     "rn-extensions-share": "^2.3.10",
     "rn-fetch-blob": "0.11.2",
     "rn-root-view": "^1.0.3",

yarn.lock

@@ -10147,6 +10147,11 @@ requires-port@^1.0.0:
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
   integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=
 
+reselect@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/reselect/-/reselect-4.0.0.tgz#f2529830e5d3d0e021408b246a206ef4ea4437f7"
+  integrity sha512-qUgANli03jjAyGlnbYVAV5vvnOmJnODyABz51RdBN7M4WaVu8mecZWgyQNkG8Yqe3KRGRt0l4K4B3XVEULC4CA==
+
 resize-observer-polyfill@^1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"