[FIX] App always sends auth for Avatar requests (#2517)

* [FIX] Sending auth for Avatar requests when not necessary

* fix storybook

* Fix ShareListView not updating avatars

Co-authored-by: Diego Mello <diegolmello@gmail.com>

app/actions/actionsTypes.js

@@ -18,6 +18,7 @@ export const LOGIN = createRequestTypes('LOGIN', [
 export const SHARE = createRequestTypes('SHARE', [
 	'SELECT_SERVER',
 	'SET_USER',
+	'SET_SETTINGS',
 	'SET_SERVER_INFO'
 ]);
 export const USER = createRequestTypes('USER', ['SET']);

app/actions/share.js

@@ -7,6 +7,13 @@ export function shareSelectServer(server) {
 	};
 }
 
+export function shareSetSettings(settings) {
+	return {
+		type: SHARE.SET_SETTINGS,
+		settings
+	};
+}
+
 export function shareSetUser(user) {
 	return {
 		type: SHARE.SET_USER,

app/constants/settings.js

@@ -20,6 +20,9 @@ export default {
 	Accounts_AllowUsernameChange: {
 		type: 'valueAsBoolean'
 	},
+	Accounts_AvatarBlockUnauthenticatedAccess: {
+		type: 'valueAsBoolean'
+	},
 	Accounts_CustomFields: {
 		type: 'valueAsString'
 	},

app/containers/Avatar/Avatar.js

@@ -24,7 +24,8 @@ const Avatar = React.memo(({
 	getCustomEmoji,
 	avatarETag,
 	isStatic,
-	rid
+	rid,
+	blockUnauthenticatedAccess
 }) => {
 	if ((!text && !avatar && !emoji && !rid) || !server) {
 		return null;
@@ -59,7 +60,8 @@ const Avatar = React.memo(({
 				avatar,
 				server,
 				avatarETag,
-				rid
+				rid,
+				blockUnauthenticatedAccess
 			});
 		}
 
@@ -111,7 +113,8 @@ Avatar.propTypes = {
 	getCustomEmoji: PropTypes.func,
 	avatarETag: PropTypes.string,
 	isStatic: PropTypes.bool,
-	rid: PropTypes.string
+	rid: PropTypes.string,
+	blockUnauthenticatedAccess: PropTypes.bool
 };
 
 Avatar.defaultProps = {

app/containers/Avatar/index.js

@@ -12,7 +12,8 @@ class AvatarContainer extends React.Component {
 	static propTypes = {
 		rid: PropTypes.string,
 		text: PropTypes.string,
-		type: PropTypes.string
+		type: PropTypes.string,
+		blockUnauthenticatedAccess: PropTypes.bool
 	};
 
 	static defaultProps = {
@@ -93,6 +94,10 @@ class AvatarContainer extends React.Component {
 
 const mapStateToProps = state => ({
 	user: getUserSelector(state),
-	server: state.share.server || state.server.server
+	server: state.share.server || state.server.server,
+	blockUnauthenticatedAccess:
+		state.share.settings?.Accounts_AvatarBlockUnauthenticatedAccess
+		?? state.settings.Accounts_AvatarBlockUnauthenticatedAccess
+		?? true
 });
 export default connect(mapStateToProps)(AvatarContainer);

app/lib/database/index.js

@@ -116,6 +116,7 @@ class DB {
 				Permission,
 				CustomEmoji,
 				FrequentlyUsedEmoji,
+				Setting,
 				User
 			],
 			actionsEnabled: true

app/lib/rocketchat.js

@@ -19,9 +19,7 @@ import fetch from '../utils/fetch';
 import { encryptionInit } from '../actions/encryption';
 import { setUser, setLoginServices, loginRequest } from '../actions/login';
 import { disconnect, connectSuccess, connectRequest } from '../actions/connect';
-import {
-	shareSelectServer, shareSetUser
-} from '../actions/share';
+import { shareSelectServer, shareSetUser, shareSetSettings } from '../actions/share';
 
 import subscribeRooms from './methods/subscriptions/rooms';
 import getUsersPresence, { getUserPresence, subscribeUsersPresence } from './methods/getUsersPresence';
@@ -324,8 +322,23 @@ const RocketChat = {
 
 		RocketChat.setCustomEmojis();
 
-		// set User info
 		try {
+			// set Settings
+			const settings = ['Accounts_AvatarBlockUnauthenticatedAccess'];
+			const db = database.active;
+			const settingsCollection = db.collections.get('settings');
+			const settingsRecords = await settingsCollection.query(Q.where('id', Q.oneOf(settings))).fetch();
+			const parsed = Object.values(settingsRecords).map(item => ({
+				_id: item.id,
+				valueAsString: item.valueAsString,
+				valueAsBoolean: item.valueAsBoolean,
+				valueAsNumber: item.valueAsNumber,
+				valueAsArray: item.valueAsArray,
+				_updatedAt: item._updatedAt
+			}));
+			reduxStore.dispatch(shareSetSettings(this.parseSettings(parsed)));
+
+			// set User info
 			const userId = await UserPreferences.getStringAsync(`${ RocketChat.TOKEN_KEY }-${ server }`);
 			const userCollections = serversDB.collections.get('users');
 			let user = null;
@@ -353,6 +366,7 @@ const RocketChat = {
 		database.share = null;
 
 		reduxStore.dispatch(shareSetUser({}));
+		reduxStore.dispatch(shareSetSettings({}));
 	},
 
 	async e2eFetchMyKeys() {

app/reducers/share.js

@@ -2,7 +2,8 @@ import { SHARE } from '../actions/actionsTypes';
 
 const initialState = {
 	user: {},
-	server: ''
+	server: '',
+	settings: {}
 };
 
 export default function share(state = initialState, action) {
@@ -17,6 +18,11 @@ export default function share(state = initialState, action) {
 				...state,
 				user: action.user
 			};
+		case SHARE.SET_SETTINGS:
+			return {
+				...state,
+				settings: action.settings
+			};
 		default:
 			return state;
 	}

app/utils/avatar.js

@@ -1,7 +1,7 @@
 const formatUrl = (url, size, query) => `${ url }?format=png&size=${ size }${ query }`;
 
 export const avatarURL = ({
-	type, text, size, user = {}, avatar, server, avatarETag, rid
+	type, text, size, user = {}, avatar, server, avatarETag, rid, blockUnauthenticatedAccess
 }) => {
 	let room;
 	if (type === 'd') {
@@ -16,7 +16,7 @@ export const avatarURL = ({
 
 	const { id, token } = user;
 	let query = '';
-	if (id && token) {
+	if (id && token && blockUnauthenticatedAccess) {
 		query += `&rc_token=${ token }&rc_uid=${ id }`;
 	}
 	if (avatarETag) {

app/views/CreateDiscussionView/SelectChannel.js

@@ -12,7 +12,7 @@ import { themes } from '../../constants/colors';
 import styles from './styles';
 
 const SelectChannel = ({
-	server, token, userId, onChannelSelect, initial, theme
+	server, token, userId, onChannelSelect, initial, blockUnauthenticatedAccess, theme
 }) => {
 	const [channels, setChannels] = useState([]);
 
@@ -31,7 +31,8 @@ const SelectChannel = ({
 		user: { id: userId, token },
 		server,
 		avatarETag: item.avatarETag,
-		rid: item.rid
+		rid: item.rid,
+		blockUnauthenticatedAccess
 	});
 
 	return (
@@ -61,6 +62,7 @@ SelectChannel.propTypes = {
 	userId: PropTypes.string,
 	initial: PropTypes.object,
 	onChannelSelect: PropTypes.func,
+	blockUnauthenticatedAccess: PropTypes.bool,
 	theme: PropTypes.string
 };
 

app/views/CreateDiscussionView/SelectUsers.js

@@ -15,7 +15,7 @@ import styles from './styles';
 import { themes } from '../../constants/colors';
 
 const SelectUsers = ({
-	server, token, userId, selected, onUserSelect, theme
+	server, token, userId, selected, onUserSelect, blockUnauthenticatedAccess, theme
 }) => {
 	const [users, setUsers] = useState([]);
 
@@ -48,7 +48,12 @@ const SelectUsers = ({
 	}, 300);
 
 	const getAvatar = item => avatarURL({
-		text: RocketChat.getRoomAvatar(item), type: 'd', user: { id: userId, token }, server, avatarETag: item.avatarETag
+		text: RocketChat.getRoomAvatar(item),
+		type: 'd',
+		user: { id: userId, token },
+		server,
+		avatarETag: item.avatarETag,
+		blockUnauthenticatedAccess
 	});
 
 	return (
@@ -78,6 +83,7 @@ SelectUsers.propTypes = {
 	userId: PropTypes.string,
 	selected: PropTypes.array,
 	onUserSelect: PropTypes.func,
+	blockUnauthenticatedAccess: PropTypes.bool,
 	theme: PropTypes.string
 };
 

app/views/CreateDiscussionView/index.js

@@ -39,7 +39,8 @@ class CreateChannelView extends React.Component {
 		failure: PropTypes.bool,
 		error: PropTypes.object,
 		theme: PropTypes.string,
-		isMasterDetail: PropTypes.bool
+		isMasterDetail: PropTypes.bool,
+		blockUnauthenticatedAccess: PropTypes.bool
 	}
 
 	constructor(props) {
@@ -143,7 +144,7 @@ class CreateChannelView extends React.Component {
 	render() {
 		const { name, users } = this.state;
 		const {
-			server, user, loading, theme
+			server, user, loading, blockUnauthenticatedAccess, theme
 		} = this.props;
 		return (
 			<KeyboardView
@@ -161,6 +162,7 @@ class CreateChannelView extends React.Component {
 							token={user.token}
 							initial={this.channel && { text: RocketChat.getRoomTitle(this.channel) }}
 							onChannelSelect={this.selectChannel}
+							blockUnauthenticatedAccess={blockUnauthenticatedAccess}
 							theme={theme}
 						/>
 						<TextInput
@@ -177,6 +179,7 @@ class CreateChannelView extends React.Component {
 							token={user.token}
 							selected={users}
 							onUserSelect={this.selectUsers}
+							blockUnauthenticatedAccess={blockUnauthenticatedAccess}
 							theme={theme}
 						/>
 						<TextInput
@@ -203,6 +206,7 @@ const mapStateToProps = state => ({
 	failure: state.createDiscussion.failure,
 	loading: state.createDiscussion.isFetching,
 	result: state.createDiscussion.result,
+	blockUnauthenticatedAccess: state.settings.Accounts_AvatarBlockUnauthenticatedAccess ?? true,
 	isMasterDetail: state.app.isMasterDetail
 });
 

app/views/ShareListView/index.js

@@ -108,10 +108,13 @@ class ShareListView extends React.Component {
 			return true;
 		}
 
-		const { server, theme } = this.props;
+		const { server, theme, userId } = this.props;
 		if (server !== nextProps.server) {
 			return true;
 		}
+		if (userId !== nextProps.userId) {
+			return true;
+		}
 		if (theme !== nextProps.theme) {
 			return true;
 		}

storybook/stories/index.js

@@ -33,6 +33,7 @@ const reducers = combineReducers({
 			username: 'diego.mello'
 		}
 	}),
+	share: () => ({ settings: {} }),
 	meteor: () => ({ connected: true }),
 	activeUsers: () => ({ abc: { status: 'online', statusText: 'dog' } })
 });
@@ -61,6 +62,7 @@ storiesOf('RoomItem', module)
 	.addDecorator(story => <Provider store={store}>{story()}</Provider>)
 	.add('list roomitem', () => <RoomItem theme={theme} />);
 storiesOf('Message', module)
+	.addDecorator(story => <Provider store={store}>{story()}</Provider>)
 	.addDecorator(messageDecorator)
 	.add('list message', () => <Message theme={theme} />);