Create class to manage navigation (#594)

* Add Navigation class

* Place Drawer.js logic inside of Navigation

* Load less views at startup

app/index.js

@@ -1,26 +1,30 @@
 import { Component } from 'react';
 import { Linking } from 'react-native';
-import { Navigation } from 'react-native-navigation';
-import { Provider } from 'react-redux';
-import { gestureHandlerRootHOC } from 'react-native-gesture-handler';
 
 import store from './lib/createStore';
 import { appInit } from './actions';
 import { iconsLoaded } from './Icons';
-import { registerScreens } from './views';
+import Navigation from './lib/Navigation';
 import { deepLinkingOpen } from './actions/deepLinking';
 import parseQuery from './lib/methods/helpers/parseQuery';
 import { initializePushNotifications } from './push';
 import { DEFAULT_HEADER } from './constants/headerOptions';
 
 const startLogged = () => {
+	Navigation.loadView('ProfileView');
+	Navigation.loadView('RoomsListHeaderView');
+	Navigation.loadView('RoomsListView');
+	Navigation.loadView('RoomView');
+	Navigation.loadView('RoomHeaderView');
+	Navigation.loadView('SettingsView');
+	Navigation.loadView('SidebarView');
 	Navigation.setRoot({
 		root: {
 			sideMenu: {
 				left: {
 					component: {
-						id: 'Sidebar',
-						name: 'Sidebar'
+						id: 'SidebarView',
+						name: 'SidebarView'
 					}
 				},
 				center: {
@@ -40,6 +44,7 @@ const startLogged = () => {
 };
 
 const startNotLogged = () => {
+	Navigation.loadView('OnboardingView');
 	Navigation.setRoot({
 		root: {
 			stack: {
@@ -58,12 +63,8 @@ const startNotLogged = () => {
 	});
 };
 
-let SetUsernameView = null;
 const startSetUsername = () => {
-	if (SetUsernameView == null) {
-		SetUsernameView = require('./views/SetUsernameView').default;
-		Navigation.registerComponentWithRedux('SetUsernameView', () => gestureHandlerRootHOC(SetUsernameView), Provider, store);
-	}
+	Navigation.loadView('SetUsernameView');
 	Navigation.setRoot({
 		root: {
 			stack: {
@@ -94,7 +95,6 @@ const handleOpenURL = ({ url }) => {
 	}
 };
 
-registerScreens(store);
 iconsLoaded();
 
 export default class App extends Component {

app/lib/Navigation.js

@@ -0,0 +1,259 @@
+import { Navigation } from 'react-native-navigation';
+import { Provider } from 'react-redux';
+import { gestureHandlerRootHOC } from 'react-native-gesture-handler';
+
+import store from './createStore';
+
+const DRAWER_ID = 'SidebarView';
+
+class NavigationManager {
+	constructor() {
+		this.views = {
+			OnboardingView: {
+				name: 'OnboardingView',
+				loaded: false,
+				require: () => require('../views/OnboardingView').default
+			},
+			ProfileView: {
+				name: 'ProfileView',
+				loaded: false,
+				require: () => require('../views/ProfileView').default
+			},
+			RoomsListHeaderView: {
+				name: 'RoomsListHeaderView',
+				loaded: false,
+				require: () => require('../views/RoomsListView/Header').default
+			},
+			RoomsListView: {
+				name: 'RoomsListView',
+				loaded: false,
+				require: () => require('../views/RoomsListView').default
+			},
+			RoomView: {
+				name: 'RoomView',
+				loaded: false,
+				require: () => require('../views/RoomView').default
+			},
+			RoomHeaderView: {
+				name: 'RoomHeaderView',
+				loaded: false,
+				require: () => require('../views/RoomView/Header').default
+			},
+			SettingsView: {
+				name: 'SettingsView',
+				loaded: false,
+				require: () => require('../views/SettingsView').default
+			},
+			SidebarView: {
+				name: 'SidebarView',
+				loaded: false,
+				require: () => require('../views/SidebarView').default
+			},
+			NewServerView: {
+				name: 'NewServerView',
+				loaded: false,
+				require: () => require('../views/NewServerView').default
+			},
+			CreateChannelView: {
+				name: 'CreateChannelView',
+				loaded: false,
+				require: () => require('../views/CreateChannelView').default
+			},
+			ForgotPasswordView: {
+				name: 'ForgotPasswordView',
+				loaded: false,
+				require: () => require('../views/ForgotPasswordView').default
+			},
+			LegalView: {
+				name: 'LegalView',
+				loaded: false,
+				require: () => require('../views/LegalView').default
+			},
+			LoginSignupView: {
+				name: 'LoginSignupView',
+				loaded: false,
+				require: () => require('../views/LoginSignupView').default
+			},
+			LoginView: {
+				name: 'LoginView',
+				loaded: false,
+				require: () => require('../views/LoginView').default
+			},
+			NewMessageView: {
+				name: 'NewMessageView',
+				loaded: false,
+				require: () => require('../views/NewMessageView').default
+			},
+			OAuthView: {
+				name: 'OAuthView',
+				loaded: false,
+				require: () => require('../views/OAuthView').default
+			},
+			PrivacyPolicyView: {
+				name: 'PrivacyPolicyView',
+				loaded: false,
+				require: () => require('../views/PrivacyPolicyView').default
+			},
+			RegisterView: {
+				name: 'RegisterView',
+				loaded: false,
+				require: () => require('../views/RegisterView').default
+			},
+			SelectedUsersView: {
+				name: 'SelectedUsersView',
+				loaded: false,
+				require: () => require('../views/SelectedUsersView').default
+			},
+			SetUsernameView: {
+				name: 'SetUsernameView',
+				loaded: false,
+				require: () => require('../views/SetUsernameView').default
+			},
+			TermsServiceView: {
+				name: 'TermsServiceView',
+				loaded: false,
+				require: () => require('../views/TermsServiceView').default
+			},
+			MentionedMessagesView: {
+				name: 'MentionedMessagesView',
+				loaded: false,
+				require: () => require('../views/MentionedMessagesView').default
+			},
+			PinnedMessagesView: {
+				name: 'PinnedMessagesView',
+				loaded: false,
+				require: () => require('../views/PinnedMessagesView').default
+			},
+			RoomActionsView: {
+				name: 'RoomActionsView',
+				loaded: false,
+				require: () => require('../views/RoomActionsView').default
+			},
+			RoomFilesView: {
+				name: 'RoomFilesView',
+				loaded: false,
+				require: () => require('../views/RoomFilesView').default
+			},
+			RoomInfoEditView: {
+				name: 'RoomInfoEditView',
+				loaded: false,
+				require: () => require('../views/RoomInfoEditView').default
+			},
+			RoomInfoView: {
+				name: 'RoomInfoView',
+				loaded: false,
+				require: () => require('../views/RoomInfoView').default
+			},
+			RoomMembersView: {
+				name: 'RoomMembersView',
+				loaded: false,
+				require: () => require('../views/RoomMembersView').default
+			},
+			SearchMessagesView: {
+				name: 'SearchMessagesView',
+				loaded: false,
+				require: () => require('../views/SearchMessagesView').default
+			},
+			SnippetedMessagesView: {
+				name: 'SnippetedMessagesView',
+				loaded: false,
+				require: () => require('../views/SnippetedMessagesView').default
+			},
+			StarredMessagesView: {
+				name: 'StarredMessagesView',
+				loaded: false,
+				require: () => require('../views/StarredMessagesView').default
+			}
+		};
+		this.isDrawerVisible = false;
+
+		Navigation.events().registerComponentDidAppearListener(({ componentId }) => {
+			if (componentId === DRAWER_ID) {
+				this.isDrawerVisible = true;
+			}
+		});
+
+		Navigation.events().registerComponentDidDisappearListener(({ componentId }) => {
+			if (componentId === DRAWER_ID) {
+				this.isDrawerVisible = false;
+			}
+		});
+	}
+
+	handleComponentName = (componentName) => {
+		if (!componentName) {
+			return console.error('componentName not found');
+		}
+	}
+
+	loadView = (componentName) => {
+		const view = this.views[componentName];
+		if (!view) {
+			return console.error('view not found');
+		}
+		if (!view.loaded) {
+			Navigation.registerComponentWithRedux(view.name, () => gestureHandlerRootHOC(view.require()), Provider, store);
+			view.loaded = true;
+		}
+	}
+
+	push = (...args) => {
+		let componentName;
+		try {
+			componentName = args[1].component.name;
+		} catch (error) {
+			return console.error(error);
+		}
+		this.handleComponentName(componentName);
+		this.loadView(componentName);
+		Navigation.push(...args);
+	}
+
+	showModal = (...args) => {
+		let componentName;
+		try {
+			componentName = args[0].stack.children[0].component.name;
+		} catch (error) {
+			return console.error(error);
+		}
+		this.handleComponentName(componentName);
+		this.loadView(componentName);
+		Navigation.showModal(...args);
+	}
+
+	pop = (...args) => Navigation.pop(...args);
+
+	popToRoot = (...args) => Navigation.popToRoot(...args);
+
+	dismissModal = (...args) => Navigation.dismissModal(...args);
+
+	dismissAllModals = (...args) => Navigation.dismissAllModals(...args);
+
+	events = (...args) => Navigation.events(...args);
+
+	mergeOptions = (...args) => Navigation.mergeOptions(...args);
+
+	setDefaultOptions = (...args) => Navigation.setDefaultOptions(...args);
+
+	setRoot = (...args) => Navigation.setRoot(...args);
+
+	setStackRoot = (...args) => Navigation.setStackRoot(...args);
+
+	toggleDrawer = () => {
+		try {
+			const visibility = !this.isDrawerVisible;
+			Navigation.mergeOptions(DRAWER_ID, {
+				sideMenu: {
+					left: {
+						visible: visibility
+					}
+				}
+			});
+			this.isDrawerVisible = visibility;
+		} catch (error) {
+			console.warn(error);
+		}
+	}
+}
+
+export default new NavigationManager();

app/sagas/deepLinking.js

@@ -3,8 +3,8 @@ import { delay } from 'redux-saga';
 import {
 	takeLatest, take, select, put, all, race
 } from 'redux-saga/effects';
-import { Navigation } from 'react-native-navigation';
 
+import Navigation from '../lib/Navigation';
 import * as types from '../actions/actionsTypes';
 import { appStart, setStackRoot } from '../actions';
 import { selectServerRequest } from '../actions/server';

app/sagas/login.js

@@ -2,8 +2,8 @@ import { AsyncStorage } from 'react-native';
 import {
 	put, call, takeLatest, select
 } from 'redux-saga/effects';
-import { Navigation } from 'react-native-navigation';
 
+import Navigation from '../lib/Navigation';
 import * as types from '../actions/actionsTypes';
 import { appStart } from '../actions';
 import { serverFinishAdd } from '../actions/server';

app/sagas/messages.js

@@ -1,7 +1,7 @@
 import { delay } from 'redux-saga';
 import { takeLatest, put, call } from 'redux-saga/effects';
-import { Navigation } from 'react-native-navigation';
 
+import Navigation from '../lib/Navigation';
 import { MESSAGES } from '../actions/actionsTypes';
 import {
 	messagesSuccess,