src/components/Tabbar/CustomTabBar.js

@@ -3,7 +3,6 @@ import {withTheme} from 'react-native-paper';
 import TabIcon from "./TabIcon";
 import TabHomeIcon from "./TabHomeIcon";
 import {Animated} from 'react-native';
-import {Collapsible} from "react-navigation-collapsible";
 
 type Props = {
     state: Object,
@@ -25,69 +24,41 @@ const TAB_ICONS = {
     planex: 'clock',
 };
 
+/**
+ * Abstraction layer for Agenda component, using custom configuration
+ */
 class CustomTabBar extends React.Component<Props, State> {
 
     static TAB_BAR_HEIGHT = 48;
 
     state = {
         translateY: new Animated.Value(0),
+        barSynced: false,// Is the bar synced with the header for animations?
     }
 
-    syncTabBar = (route, index) => {
-        const state = this.props.state;
-        const isFocused = state.index === index;
-        if (isFocused) {
-            const stackState = route.state;
-            const stackRoute = stackState ? stackState.routes[stackState.index] : undefined;
-            const params: { collapsible: Collapsible } = stackRoute ? stackRoute.params : undefined;
-            const collapsible = params ? params.collapsible : undefined;
-            if (collapsible) {
-                this.setState({
-                    translateY: Animated.multiply(-1.5, collapsible.translateY), // Hide tab bar faster than header bar
-                });
-            }
-        }
-    };
-
-    /**
-     * Navigates to the given route if it is different from the current one
-     *
-     * @param route Destination route
-     * @param currentIndex The current route index
-     * @param destIndex The destination route index
-     */
     onItemPress(route: Object, currentIndex: number, destIndex: number) {
         const event = this.props.navigation.emit({
             type: 'tabPress',
             target: route.key,
             canPreventDefault: true,
         });
-        if (currentIndex !== destIndex && !event.defaultPrevented)
+        if (currentIndex !== destIndex && !event.defaultPrevented) {
+            this.state.translateY = new Animated.Value(0);
             this.props.navigation.navigate(route.name);
+        }
     }
 
-    /**
-     * Navigates to tetris screen on home button long press
-     *
-     * @param route
-     */
     onItemLongPress(route: Object) {
         const event = this.props.navigation.emit({
             type: 'tabLongPress',
             target: route.key,
             canPreventDefault: true,
         });
-        if (route.name === "home" && !event.defaultPrevented)
+        if (route.name === "home" && !event.defaultPrevented) {
             this.props.navigation.navigate('tetris');
+        }
     }
 
-    /**
-     * Gets an icon for the given route if it is not the home one as it uses a custom button
-     *
-     * @param route
-     * @param focused
-     * @returns {null}
-     */
     tabBarIcon = (route, focused) => {
         let icon = TAB_ICONS[route.name];
         icon = focused ? icon : icon + ('-outline');
@@ -97,35 +68,40 @@ class CustomTabBar extends React.Component<Props, State> {
             return null;
     };
 
-    /**
-     * Finds the active route and syncs the tab bar animation with the header bar
-     */
+
     onRouteChange = () => {
-        this.props.state.routes.map(this.syncTabBar)
+        this.setState({barSynced: false});
     }
 
-    /**
-     * Gets a tab icon render.
-     * If the given route is focused, it syncs the tab bar and header bar animations together
-     *
-     * @param route The route for the icon
-     * @param index The index of the current route
-     * @returns {*}
-     */
     renderIcon = (route, index) => {
         const state = this.props.state;
         const {options} = this.props.descriptors[route.key];
         const label =
-            options.tabBarLabel != null
+            options.tabBarLabel !== undefined
                 ? options.tabBarLabel
-                : options.title != null
+                : options.title !== undefined
                 ? options.title
                 : route.name;
 
-        const onPress = () => this.onItemPress(route, state.index, index);
-        const onLongPress = () => this.onItemLongPress(route);
         const isFocused = state.index === index;
 
+        const onPress = () => this.onItemPress(route, state.index, index);
+
+        const onLongPress = () => this.onItemLongPress(route);
+
+        if (isFocused) {
+            const stackState = route.state;
+            const stackRoute = route.state ? stackState.routes[stackState.index] : undefined;
+            const params = stackRoute ? stackRoute.params : undefined;
+            const collapsible = params ? params.collapsible : undefined;
+            if (collapsible && !this.state.barSynced) {
+                this.setState({
+                    translateY: Animated.multiply(-1.5, collapsible.translateY),
+                    barSynced: true,
+                });
+            }
+        }
+
         const color = isFocused ? this.props.theme.colors.primary : this.props.theme.colors.tabIcon;
         if (route.name !== "home") {
             return <TabIcon
@@ -148,13 +124,8 @@ class CustomTabBar extends React.Component<Props, State> {
             />
     };
 
-    getIcons() {
-        return this.props.state.routes.map(this.renderIcon);
-    }
-
     render() {
         this.props.navigation.addListener('state', this.onRouteChange);
-        const icons = this.getIcons();
         return (
             <Animated.View
                 useNativeDriver
@@ -169,7 +140,7 @@ class CustomTabBar extends React.Component<Props, State> {
                     transform: [{translateY: this.state.translateY}],
                 }}
             >
-                {icons}
+                {this.props.state.routes.map(this.renderIcon)}
             </Animated.View>
         );
     }

src/managers/ConnectionManager.js

@@ -1,7 +1,7 @@
 // @flow
 
 import * as Keychain from 'react-native-keychain';
-import {apiRequest, ERROR_TYPE} from "../utils/WebData";
+import {apiRequest, ERROR_TYPE, isResponseValid} from "../utils/WebData";
 
 /**
  * champ: error
@@ -138,18 +138,38 @@ export default class ConnectionManager {
             };
             apiRequest(AUTH_PATH, 'POST', data)
                 .then((response) => {
-                    this.saveLogin(email, response.token)
-                        .then(() => {
-                            resolve(true);
-                        })
-                        .catch(() => {
-                            reject(ERROR_TYPE.TOKEN_SAVE);
-                        });
+                    if (this.isConnectionResponseValid(response)) {
+                        this.saveLogin(email, response.token)
+                            .then(() => {
+                                resolve(true);
+                            })
+                            .catch(() => {
+                                reject(ERROR_TYPE.TOKEN_SAVE);
+                            });
+                    } else
+                        reject(ERROR_TYPE.SERVER_ERROR);
                 })
                 .catch((error) => reject(error));
         });
     }
 
+    /**
+     * Checks if the API connection response is correctly formatted
+     *
+     * @param response
+     * @returns {boolean}
+     */
+    isConnectionResponseValid(response: { [key: string]: any }) {
+        let valid = isResponseValid(response);
+
+        if (valid && response.error === ERROR_TYPE.SUCCESS)
+            valid = valid
+                && response.data.token !== undefined
+                && response.data.token !== ''
+                && typeof response.data.token === "string";
+        return valid;
+    }
+
     /**
      * Sends an authenticated request with the login token to the API
      *