nav improvements

register screens lazily remove usage of deprecated registerComponentWithRedux lint
jhipster · Oct 22, 2020 · 5a44e3a · 5a44e3a
1 parent c275d9f
commit 5a44e3a
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 21 deletions.
diff --git a/boilerplate/app/modules/login/login.sagas.js.ejs b/boilerplate/app/modules/login/login.sagas.js.ejs
@@ -1,6 +1,6 @@
 import { call, put<% if (props.authType === 'oauth2' || props.authType === 'jwt') { %>, select<% } %> } from 'redux-saga/effects'
 <%_ if (props.authType === 'oauth2') { _%>
-import { Platform } from 'react-native'
+import { Alert, Platform } from 'react-native'
 import { authorize } from 'react-native-app-auth'
 <%_ } _%>
 <%_ if (props.authType === 'oauth2') { _%>
@@ -52,7 +52,7 @@ export function * login (api) {
   } else {
     yield put(LoginActions.loginFailure((authInfo.data && authInfo.data.detail) || 'Could not connect to OAuth2 Provider'))
     if (!authInfo.data) {
-      alert('Failed to fetch Auth Provider information from the backend API.')
+      Alert.alert('Failed to fetch Auth Provider information from the backend API.')
     }
   }
 }

diff --git a/boilerplate/app/navigation/layouts.js.ejs b/boilerplate/app/navigation/layouts.js.ejs
@@ -1,6 +1,7 @@
 import { AppState, Linking } from 'react-native'
 import { Navigation } from 'react-native-navigation'
 import { Provider } from 'react-redux'
+import React from 'react'
 import { Images } from '../shared/themes'
 
 import createStore from '../shared/reducers'
@@ -109,20 +110,63 @@ function handleOpenURL (event) {
   }
 }
 
+function registerComponentWithRedux(SCREEN_NAME, Component) {
+  Navigation.registerComponent(
+    SCREEN_NAME,
+    () => (props) => (
+      <Provider store={store}>
+        <Component {...props} />
+      </Provider>
+    ),
+    () => Component,
+  )
+}
+
+// registers screens (except the launch screen) as lazily loaded
+function registerScreensLazily() {
+  Navigation.setLazyComponentRegistrator((componentName) => {
+    switch (componentName) {
+      case LAUNCH_SCREEN:
+        registerComponentWithRedux(LAUNCH_SCREEN, LaunchScreen)
+        break
+      case STORYBOOK_SCREEN:
+        Navigation.registerComponent(STORYBOOK_SCREEN, () => StorybookScreen)
+        break
+      case LOGIN_SCREEN:
+        registerComponentWithRedux(LOGIN_SCREEN, LoginScreen)
+        break
+      case REGISTER_SCREEN:
+        registerComponentWithRedux(REGISTER_SCREEN, RegisterScreen)
+        break
+      case FORGOT_PASSWORD_SCREEN:
+        registerComponentWithRedux(FORGOT_PASSWORD_SCREEN, ForgotPasswordScreen)
+        break
+      case CHANGE_PASSWORD_SCREEN:
+        registerComponentWithRedux(CHANGE_PASSWORD_SCREEN, ChangePasswordScreen)
+        break
+      case SETTINGS_SCREEN:
+        registerComponentWithRedux(SETTINGS_SCREEN, SettingsScreen)
+        break
+      case DRAWER_CONTENT:
+        registerComponentWithRedux(DRAWER_CONTENT, DrawerContent)
+        break
+      case ENTITIES_SCREEN:
+        registerComponentWithRedux(ENTITIES_SCREEN, EntitiesScreen)
+        break
+<%_ if (props.websockets) { _%>
+      case CHAT_SCREEN:
+        registerComponentWithRedux(CHAT_SCREEN, ChatScreen)
+        break
+<%_ } _%>
+      // ignite-jhipster-navigation-registration-needle
+      default:
+        break
+    }
+  })
+}
+
 export function registerScreensAndStartApp () {
-  Navigation.registerComponentWithRedux(LOGIN_SCREEN, () => LoginScreen, Provider, store)
-  Navigation.registerComponentWithRedux(REGISTER_SCREEN, () => RegisterScreen, Provider, store)
-  Navigation.registerComponentWithRedux(FORGOT_PASSWORD_SCREEN, () => ForgotPasswordScreen, Provider, store)
-  Navigation.registerComponentWithRedux(CHANGE_PASSWORD_SCREEN, () => ChangePasswordScreen, Provider, store)
-  Navigation.registerComponentWithRedux(SETTINGS_SCREEN, () => SettingsScreen, Provider, store)
-  Navigation.registerComponentWithRedux(DRAWER_CONTENT, () => DrawerContent, Provider, store)
-  Navigation.registerComponentWithRedux(LAUNCH_SCREEN, () => LaunchScreen, Provider, store)
-  Navigation.registerComponentWithRedux(ENTITIES_SCREEN, () => EntitiesScreen, Provider, store)
-  Navigation.registerComponent(STORYBOOK_SCREEN, () => StorybookScreen)
-  <%_ if (props.websockets) { _%>
-  Navigation.registerComponentWithRedux(CHAT_SCREEN, () => ChatScreen, Provider, store)
-  <%_ } _%>
-  // ignite-jhipster-navigation-registration-needle
+  registerScreensLazily()
 
   Navigation.events().registerAppLaunchedListener(() => {
     Navigation.setDefaultOptions({

diff --git a/src/entity/files.js b/src/entity/files.js
@@ -313,21 +313,21 @@ module.exports = async function (generator, igniteContext) {
     insert: navigationDeclarationEdit,
   })
 
+  const getNavCase = (SCREEN_NAME, component) => `      case ${SCREEN_NAME}:
+        registerComponentWithRedux(${SCREEN_NAME}, ${component})
+        break`
   // add entity screens to navigation
-  const navigationScreen = `  Navigation.registerComponentWithRedux(${upperSnakeCaseName}, () => ${props.name}EntityScreen, Provider, store)`
   await patchInFile(igniteContext, navigationRouterFilePath, {
     before: 'ignite-jhipster-navigation-registration-needle',
-    insert: navigationScreen,
+    insert: getNavCase(upperSnakeCaseName, `${props.name}EntityScreen`),
   })
-  const navigationScreenDetail = `  Navigation.registerComponentWithRedux(${upperSnakeCaseNameDetail}, () => ${props.name}EntityDetailScreen, Provider, store)`
   await patchInFile(igniteContext, navigationRouterFilePath, {
     before: 'ignite-jhipster-navigation-registration-needle',
-    insert: navigationScreenDetail,
+    insert: getNavCase(upperSnakeCaseNameDetail, `${props.name}EntityDetailScreen`),
   })
-  const navigationScreenEdit = `  Navigation.registerComponentWithRedux(${upperSnakeCaseNameEdit}, () => ${props.name}EntityEditScreen, Provider, store)`
   await patchInFile(igniteContext, navigationRouterFilePath, {
     before: 'ignite-jhipster-navigation-registration-needle',
-    insert: navigationScreenEdit,
+    insert: getNavCase(upperSnakeCaseNameEdit, `${props.name}EntityEditScreen`),
   })
 
   const navigationMethodMain = `