[NEW] Reload room on return from background (#117)

* update screen when returns to foreground

app/containers/Routes.js

@@ -12,7 +12,8 @@ import * as NavigationService from './routes/NavigationService';
 @connect(
 	state => ({
 		login: state.login,
-		app: state.app
+		app: state.app,
+		background: state.app.background
 	}),
 	dispatch => bindActionCreators({
 		appInit
@@ -26,7 +27,7 @@ export default class Routes extends React.Component {
 	}
 
 	componentWillMount() {
-		this.props.appInit();
+		return !this.props.app.ready && this.props.appInit();
 	}
 
 	componentDidUpdate() {
@@ -40,7 +41,7 @@ export default class Routes extends React.Component {
 			return (<Loading />);
 		}
 
-		if ((login.token && !login.failure && !login.isRegistering) || app.ready) {
+		if (login.token && !login.failure && !login.isRegistering) {
 			return (<AuthRoutes ref={nav => this.navigator = nav} />);
 		}
 

app/containers/routes/NavigationService.js

@@ -1,4 +1,5 @@
 import { NavigationActions } from 'react-navigation';
+import reduxStore from '../../lib/createStore';
 
 const config = {};
 
@@ -31,6 +32,7 @@ export function goRoom({ rid, name }, counter = 0) {
 	if (!config.navigator) {
 		return setTimeout(() => goRoom({ rid, name }, counter + 1), 200);
 	}
+
 	const action = NavigationActions.reset({
 		index: 1,
 		actions: [
@@ -39,5 +41,5 @@ export function goRoom({ rid, name }, counter = 0) {
 		]
 	});
 
-	return config.navigator.dispatch(action);
+	requestAnimationFrame(() => config.navigator.dispatch(action), reduxStore.getState().app.starting);
 }

app/reducers/app.js

@@ -1,19 +1,46 @@
+import { FOREGROUND, BACKGROUND, INACTIVE } from 'redux-enhancer-react-native-appstate';
 import { APP } from '../actions/actionsTypes';
 
 const initialState = {
-	starting: true
+	starting: true,
+	ready: false,
+	inactive: false,
+	background: false
 };
 
 export default function app(state = initialState, action) {
 	switch (action.type) {
+		case FOREGROUND:
+			return {
+				...state,
+				inactive: false,
+				foreground: true,
+				background: false
+			};
+		case BACKGROUND:
+			return {
+				...state,
+				inactive: false,
+				foreground: false,
+				background: true
+			};
+		case INACTIVE:
+			return {
+				...state,
+				inactive: true,
+				foreground: false,
+				background: false
+			};
 		case APP.INIT:
 			return {
 				...state,
+				ready: false,
 				starting: true
 			};
 		case APP.READY:
 			return {
 				...state,
+				ready: true,
 				starting: false
 			};
 		default:

app/reducers/login.js

@@ -11,6 +11,8 @@ const initialState = {
 
 export default function login(state = initialState, action) {
 	switch (action.type) {
+		case types.APP.INIT:
+			return initialState;
 		case types.LOGIN.REQUEST:
 			return {
 				...state,

app/sagas/login.js

@@ -130,7 +130,9 @@ const handleSetUsernameRequest = function* handleSetUsernameRequest({ credential
 
 const handleLogout = function* handleLogout() {
 	const server = yield select(getServer);
-	yield call(logoutCall, { server });
+	if (server) {
+		yield call(logoutCall, { server });
+	}
 };
 
 const handleRegisterIncomplete = function* handleRegisterIncomplete() {

app/sagas/rooms.js

@@ -1,5 +1,6 @@
 import { put, call, takeLatest, take, select, race, fork, cancel } from 'redux-saga/effects';
 import { delay } from 'redux-saga';
+import { FOREGROUND } from 'redux-enhancer-react-native-appstate';
 import * as types from '../actions/actionsTypes';
 import { roomsSuccess, roomsFailure } from '../actions/rooms';
 import { addUserTyping, removeUserTyping } from '../actions/room';
@@ -60,7 +61,6 @@ const watchRoomOpen = function* watchRoomOpen({ room }) {
 	if (open) {
 		return;
 	}
-
 	RocketChat.readMessages(room.rid);
 	subscriptions.push(RocketChat.subscribe('stream-room-messages', room.rid, false));
 	subscriptions.push(RocketChat.subscribe('stream-notify-room', `${ room.rid }/typing`, false));
@@ -89,9 +89,18 @@ const watchuserTyping = function* watchuserTyping({ status }) {
 	}
 };
 
+const updateRoom = function* updateRoom() {
+	const room = yield select(state => state.room);
+	if (!room || !room.rid) {
+		return;
+	}
+	yield put(messagesRequest({ rid: room.rid }));
+};
 const root = function* root() {
 	yield takeLatest(types.ROOM.USER_TYPING, watchuserTyping);
 	yield takeLatest(types.LOGIN.SUCCESS, watchRoomsRequest);
 	yield takeLatest(types.ROOM.OPEN, watchRoomOpen);
+	yield takeLatest(FOREGROUND, updateRoom);
+	yield takeLatest(FOREGROUND, watchRoomsRequest);
 };
 export default root;

app/views/RoomView.js

@@ -81,6 +81,9 @@ export default class RoomView extends React.Component {
 		this.rid =
 			props.rid ||
 			props.navigation.state.params.room.rid;
+		this.name = this.props.name ||
+		this.props.navigation.state.params.name ||
+		this.props.navigation.state.params.room.name;
 
 		this.data = realm
 			.objects('messages')
@@ -96,12 +99,9 @@ export default class RoomView extends React.Component {
 
 	componentWillMount() {
 		this.props.navigation.setParams({
-			title:
-				this.props.name ||
-				this.props.navigation.state.params.name ||
-				this.props.navigation.state.params.room.name
+			title: this.name
 		});
-		this.props.openRoom({ rid: this.rid });
+		this.props.openRoom({ rid: this.rid, name: this.name });
 		this.data.addListener(this.updateState);
 	}
 	componentDidMount() {