generator-wolmo-bootstrap-rn - npm Package Compare versions

Comparing version 0.3.6 to 0.3.7

generators/app/files.js

@@ -35,2 +35,6 @@ // BASE PATHS
 
+// SCREENS - INITIAL LOADING
+module.exports.INITIAL_LOADING_PATH = `${module.exports.SCREENS_PATH}/InitialLoading`;
+module.exports.INITIAL_LOADING = `${module.exports.INITIAL_LOADING_PATH}/index.js`;
+
 // COMPONENTS
@@ -37,0 +41,0 @@ module.exports.COMPONENTS_PATH = `${module.exports.APP_PATH}/components`;

generators/app/tasks/appSetup/loginFeatureFiles.js

@@ -6,10 +6,20 @@ const { copyFile, copyTemplateFile } = require('../../utils');
   AUTH_SERVICE,
+  HOME,
+  INITIAL_LOADING,
   LOGIN,
   LOGIN_LAYOUT,
   LOGIN_STYLE,
-  LOGIN_I18N,
-  HOME
+  LOGIN_I18N
 } = require('../../files');
 
-const FILES = [AUTH_REDUCER, AUTH_ACTIONS, AUTH_SERVICE, LOGIN, LOGIN_LAYOUT, LOGIN_STYLE, LOGIN_I18N];
+const FILES = [
+  AUTH_REDUCER,
+  AUTH_ACTIONS,
+  AUTH_SERVICE,
+  INITIAL_LOADING,
+  LOGIN,
+  LOGIN_LAYOUT,
+  LOGIN_STYLE,
+  LOGIN_I18N
+];
 const TEMPLATE_FILES = [HOME];
@@ -16,0 +26,0 @@

generators/app/tasks/installDependencies.js

@@ -88,2 +88,6 @@ const latestSemver = require('latest-semver');
 module.exports = function installDependencies() {
+  if (this.features.login) {
+    DEPENDENCIES.push('recompose');
+  }
+
   if (this.features.pushnotifications) {
@@ -90,0 +94,0 @@ DEPENDENCIES.push('react-native-push-notification');

generators/app/templates/src/app/components/AppNavigator/index.js

@@ -6,3 +6,3 @@ import React, { Component } from 'react';
 import { NavigationActions } from 'react-navigation';
-import { reduxifyNavigator } from 'react-navigation-redux-helpers';
+import { createReduxContainer } from 'react-navigation-redux-helpers';
 
@@ -12,3 +12,3 @@ import { ROOT } from '../../../constants/platform';
 
-const AppWithNavigationState = reduxifyNavigator(Navigator, ROOT);
+const AppWithNavigationState = createReduxContainer(Navigator, ROOT);
 
@@ -15,0 +15,0 @@ class AppNavigator extends Component {

generators/app/templates/src/app/components/CustomText/index.js

@@ -11,5 +11,5 @@ import React, { PureComponent } from 'react';
   /*
-  ** You can add styles to Base like Family Font to be the Text styles base!
-  ** if you want to add a custom style, you need to add it here and in VARIANTS
-  */
+   ** You can add styles to Base like Family Font to be the Text styles base!
+   ** if you want to add a custom style, you need to add it here and in VARIANTS
+   */
   static VARIANTS = [
@@ -33,5 +33,6 @@ 'xxsmall',
   render() {
+    const { textProps, style, children } = this.props;
     return (
-      <Text {...this.props.textProps} style={[styles.base, this.customStyles(), this.props.style]}>
-        {this.props.children}
+      <Text {...textProps} style={[styles.base, this.customStyles(), style]}>
+        {children}
       </Text>
@@ -38,0 +39,0 @@ );

generators/app/templates/src/app/components/CustomTextInput/index.js

@@ -22,9 +22,25 @@ import React, { PureComponent } from 'react';
   render() {
-    const placeholderTextColor = this.props.value ? transparent : this.props.placeholderTextColor;
-
+    const {
+      value,
+      placeholderTextColor,
+      title,
+      titleStyles,
+      multiline,
+      bottomBorder,
+      style,
+      onChange,
+      onBlur,
+      onFocus,
+      textStyles,
+      secureTextEntry,
+      showEye,
+      autoComplete
+    } = this.props;
+    const { showPassword } = this.state;
+    const placeholderColor = value ? transparent : placeholderTextColor;
     return (
       <View>
-        {this.props.title && (
-          <CustomText gray small style={[styles.title, this.props.titleStyles]}>
-            {this.props.title}
+        {title && (
+          <CustomText gray small style={[styles.title, titleStyles]}>
+            {title}
           </CustomText>
@@ -34,5 +50,5 @@ )}
           style={[
-            this.props.multiline ? styles.multilineContainer : styles.container,
-            this.props.bottomBorder && styles.bottomBorder,
-            this.props.style
+            multiline ? styles.multilineContainer : styles.container,
+            bottomBorder && styles.bottomBorder,
+            style
           ]}
@@ -43,22 +59,14 @@ >
             allowFontScaling={false}
-            onChangeText={this.props.onChange}
-            onBlur={this.props.onBlur}
-            onFocus={this.props.onFocus}
-            value={this.props.value}
-            style={[
-              styles.inputStyle,
-              this.props.multiline ? styles.multilineInput : styles.singleInput,
-              this.props.textStyles
-            ]}
-            placeholderTextColor={placeholderTextColor}
-            secureTextEntry={this.props.secureTextEntry && !this.state.showPassword}
-            autoComplete={!this.props.secureTextEntry}
+            onChangeText={onChange}
+            onBlur={onBlur}
+            onFocus={onFocus}
+            value={value}
+            style={[styles.inputStyle, multiline ? styles.multilineInput : styles.singleInput, textStyles]}
+            placeholderTextColor={placeholderColor}
+            secureTextEntry={secureTextEntry && !showPassword}
+            autoComplete={secureTextEntry ? 'off' : autoComplete}
           />
-          {this.props.secureTextEntry &&
-            this.props.showEye && (
-              <ShowPassword
-                onShowPassword={this.handleShowPassword}
-                passwordVisible={this.state.showPassword}
-              />
-            )}
+          {secureTextEntry && showEye && (
+            <ShowPassword onShowPassword={this.handleShowPassword} passwordVisible={showPassword} />
+          )}
         </View>
@@ -103,5 +111,6 @@ </View>
   secureTextEntry: PropTypes.bool,
-  title: PropTypes.string
+  title: PropTypes.string,
+  autoComplete: PropTypes.string
 };
 
 export default CustomTextInput;

generators/app/templates/src/app/components/Drawer/components/DrawerMenu/index.js

@@ -11,7 +11,9 @@ import React, { Component } from 'react';
   handleCloseDrawer = () => {
-    this.props.dispatch(drawerActions.drawerToggled(false));
+    const { dispatch } = this.props;
+    dispatch(drawerActions.drawerToggled(false));
   };
 
   render() {
-    return <DrawerMenu onCloseDrawer={this.handleCloseDrawer} wrapOnPress={this.props.wrapOnPress} />;
+    const { wrapOnPress } = this.props;
+    return <DrawerMenu onCloseDrawer={this.handleCloseDrawer} wrapOnPress={wrapOnPress} />;
   }
@@ -18,0 +20,0 @@ }

generators/app/templates/src/app/components/Drawer/index.js

@@ -22,3 +22,4 @@ import React, { Component } from 'react';
   handleDrawerClosing = () => {
-    this.props.dispatch(drawerActions.drawerToggled(false));
+    const { dispatch } = this.props;
+    dispatch(drawerActions.drawerToggled(false));
     StatusBar.setHidden(false, 'slide');
@@ -28,3 +29,4 @@ };
   handleDrawerOpening = () => {
-    this.props.dispatch(drawerActions.drawerToggled(true));
+    const { dispatch } = this.props;
+    dispatch(drawerActions.drawerToggled(true));
     this.setState({ isHandlingUserInput: false });
@@ -35,3 +37,4 @@ StatusBar.setHidden(!STATUS_BAR_IS_FIXED, 'slide');
   wrapOnPress = onPress => () => {
-    if (!this.state.isHandlingUserInput) {
+    const { isHandlingUserInput } = this.state;
+    if (!isHandlingUserInput) {
       if (onPress) {
@@ -45,2 +48,3 @@ onPress();
   render() {
+    const { drawerPresent } = this.props;
     return (
@@ -51,3 +55,3 @@ <Drawer
         onCloseStart={this.handleDrawerClosing}
-        open={this.props.drawerPresent}
+        open={drawerPresent}
         openDrawerOffset={0.15}
@@ -59,3 +63,3 @@ tapToClose
         <AppNavigator />
-        <DrawerOverlay drawerPresent={this.props.drawerPresent} />
+        <DrawerOverlay drawerPresent={drawerPresent} />
       </Drawer>
@@ -62,0 +66,0 @@ );

generators/app/templates/src/app/screens/Home/index.js

@@ -10,3 +10,4 @@ import React, { Component } from 'react';
   handleLogout = () => {
-    this.props.dispatch(authActions.logout());
+    const { dispatch } = this.props;
+    dispatch(authActions.logout());
   };
@@ -13,0 +14,0 @@

generators/app/templates/src/app/screens/Login/index.js

@@ -11,7 +11,9 @@ import React, { Component } from 'react';
   handleLogin = () => {
-    this.props.dispatch(authActions.login());
+    const { dispatch } = this.props;
+    dispatch(authActions.login());
   };
 
   render() {
-    return <Login onLogin={this.handleLogin} loading={this.props.loading} />;
+    const { loading } = this.props;
+    return <Login onLogin={this.handleLogin} loading={loading} />;
   }
@@ -18,0 +20,0 @@ }

generators/app/templates/src/redux/auth/actions.js

@@ -5,3 +5,3 @@ import { StackActions, NavigationActions } from 'react-navigation';
 import * as AuthService from '../../services/AuthService';
-import * as Routes from '../../constants/routes';
+import Routes from '../../constants/routes';
 
@@ -8,0 +8,0 @@ export const actions = createTypes(completeTypes(['LOGIN'], ['AUTH_INIT', 'LOGOUT']), '@@AUTH');

generators/app/templates/src/redux/middlewares/analyticsMiddleware.js

 import Config from 'react-native-config';
-import { NavigationActions } from 'react-navigation';
+import { NavigationActions, StackActions } from 'react-navigation';
 import { GoogleAnalyticsTracker } from 'react-native-google-analytics-bridge';
-import GoogleAnalytics, { trackEvent } from '@redux-beacon/react-native-google-analytics';
+import GoogleAnalytics from '@redux-beacon/react-native-google-analytics';
 import { createMiddleware } from 'redux-beacon';
 
-import { getCurrentRouteName } from '../../utils/navUtils';
+import { getPreviousRouteName } from '../../utils/navUtils';
 
+const trackingId = Config.ANALYTICS_TRACKING_ID;
+const PAGE_VIEW = 'pageview';
+
 export const checkAnalyticsTrackingID = () => {
-  if (!Config.ANALYTICS_TRACKING_ID) {
+  if (!trackingId) {
     console.warn('Google Analytics Tracking ID has not been properly initialized');
@@ -15,13 +18,15 @@ }
 
-const target = GoogleAnalytics(Config.ANALYTICS_TRACKING_ID, GoogleAnalyticsTracker);
+const target = GoogleAnalytics(trackingId, GoogleAnalyticsTracker);
 
-const pageView = trackEvent((action, prevState) => ({
-  hitType: 'pageview',
-  page: getCurrentRouteName(prevState.nav)
-}));
+const pageView = action => ({ hitType: PAGE_VIEW, page: action.routeName });
 
+const backNavigationView = (action, prevState) => ({
+  hitType: PAGE_VIEW,
+  page: getPreviousRouteName(prevState.nav)
+});
+
 const eventsMap = {
   [NavigationActions.NAVIGATE]: pageView,
-  [NavigationActions.BACK]: pageView,
-  [NavigationActions.RESET]: pageView
+  [NavigationActions.BACK]: backNavigationView,
+  [StackActions.RESET]: action => pageView(action.actions[0])
   // TODO: Replace with anothers actions.
@@ -28,0 +33,0 @@ // For search the possible actions, check this: https://developers.google.com/analytics/devguides/collection/analyticsjs/events

generators/app/templates/src/utils/navUtils.js

@@ -11,1 +11,8 @@ export const getCurrentRouteName = navigationState => {
 };
+
+export const getPreviousRouteName = navigationState => {
+  if (!navigationState || !navigationState.index) {
+    return null;
+  }
+  return navigationState.routes[navigationState.index - 1].routeName;
+};

package.json

 {
   "name": "generator-wolmo-bootstrap-rn",
-  "version": "0.3.6",
+  "version": "0.3.7",
   "description": "",
@@ -13,3 +13,3 @@ "files": [
     "lint": "eslint .",
-    "lint-diff": "git diff --name-only --cached --relative | grep \\\\.js$ | xargs eslint",
+    "lint-diff": "git diff --name-only --cached --relative --diff-filter=ACM | grep \\.js$ | xargs eslint",
     "lint-fix": "eslint . --fix",
@@ -16,0 +16,0 @@ "precommit": "npm run lint-diff"

No alert changes

Improved metrics

Total package byte prevSize

159481

increased by0.38%

Number of package files

110

increased by0.92%

Lines of code

2349

increased by2.98%

No dependency changes