fix crash & add LoginDialog

apps/mobile/src/components/DialogManager/index.js

@@ -8,6 +8,7 @@ import MoveNoteDialog from '../MoveNoteDialog';
 import {AddTopicDialog} from '../AddTopicDialog';
 import {AddNotebookDialog} from '../AddNotebookDialog';
 import {DDS} from '../../../App';
+import LoginDialog from '../LoginDialog';
 
 export const _recieveEvent = (eventName, action) => {
   DeviceEventEmitter.addListener(eventName, action);
@@ -176,7 +177,9 @@ export class DialogManager extends Component {
 
   loadNote = i => {
     if (i && i.type === 'new') {
-      setNote({});
+      this.setState({
+        note: {},
+      });
     } else {
       note = i;
       this.setState({
@@ -201,7 +204,11 @@ export class DialogManager extends Component {
 
     _recieveEvent('addTopicEvent', this.showAddTopic);
     _recieveEvent('hideAddTopicEvent', this.hideAddTopic);
+
+    _recieveEvent('showLoginDialog', this.showLoginDialog);
+    _recieveEvent('hideLoginDialog', this.hideLoginDialog);
   }
+
   componentWillUnmount() {
     _unSubscribeEvent('loadNoteEvent', this.loadNote);
 
@@ -219,8 +226,19 @@ export class DialogManager extends Component {
 
     _unSubscribeEvent('addTopicEvent', this.showAddTopic);
     _unSubscribeEvent('hideAddTopicEvent', this.hideAddTopic);
+
+    _unSubscribeEvent('showLoginDialog', this.showLoginDialog);
+    _unSubscribeEvent('hideLoginDialog', this.hideLoginDialog);
   }
 
+  showLoginDialog = () => {
+    this.loginDialog.open();
+  };
+
+  hideLoginDialog = () => {
+    this.loginDialog.close();
+  };
+
   showAddNotebook = data => {
     this.setState(
       {
@@ -381,6 +399,8 @@ export class DialogManager extends Component {
           toEdit={item}
           colors={colors}
         />
+
+        <LoginDialog colors={colors} ref={ref => (this.loginDialog = ref)} />
       </>
     );
   }

apps/mobile/src/components/LoginDialog/index.js

@@ -0,0 +1,174 @@
+import React from 'react';
+import {Modal, DeviceEventEmitter, View, TouchableOpacity} from 'react-native';
+import {createAppContainer} from 'react-navigation';
+import {createStackNavigator} from 'react-navigation-stack';
+import {ACTIONS} from '../../provider';
+import Folders from '../../views/Folders';
+import Notebook from '../../views/Notebook';
+import Notes from '../../views/Notes';
+import {updateEvent} from '../DialogManager';
+import * as Animatable from 'react-native-animatable';
+import Login from '../../views/Login';
+import Signup from '../../views/Signup';
+import ForgotPassword from '../../views/ForgotPassword';
+import {DDS} from '../../../App';
+import {getElevation} from '../../utils/utils';
+
+const fade = props => {
+  const {position, scene} = props;
+
+  const index = scene.index;
+
+  const translateX = 0;
+  const translateY = 0;
+
+  const opacity = position.interpolate({
+    inputRange: [index - 0.7, index, index + 0.7],
+    outputRange: [0.7, 1, 0.7],
+  });
+
+  return {
+    opacity,
+    transform: [{translateX}, {translateY}],
+  };
+};
+
+const ModalNavigator = createStackNavigator(
+  {
+    Login: {
+      screen: Login,
+    },
+    Signup: {
+      screen: Signup,
+    },
+    ForgotPassword: {
+      screen: ForgotPassword,
+    },
+  },
+  {
+    initialRouteName: 'Login',
+    defaultNavigationOptions: {
+      gesturesEnabled: false,
+      headerStyle: {
+        backgroundColor: 'transparent',
+        borderBottomWidth: 0,
+        height: 0,
+      },
+    },
+    transitionConfig: () => ({
+      screenInterpolator: props => {
+        return fade(props);
+      },
+    }),
+  },
+);
+
+const Navigator = createAppContainer(ModalNavigator);
+
+class LoginDialog extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      visible: false,
+      animated: false,
+    };
+    this.routeIndex = 0;
+    this.count = 0;
+  }
+
+  open() {
+    console.log(' i am called');
+    this.setState({
+      visible: true,
+    });
+  }
+
+  close() {
+    this.setState({
+      visible: false,
+      animated: false,
+    });
+  }
+
+  render() {
+    const {visible, animated} = this.state;
+    const {colors} = this.props;
+    return (
+      <Modal
+        animated={true}
+        animationType="fade"
+        onShow={() => {
+          updateEvent({type: ACTIONS.LOGIN_NAVIGATOR, enabled: true});
+          this.setState({
+            animated: true,
+          });
+        }}
+        onRequestClose={() => {
+          updateEvent({type: ACTIONS.LOGIN_NAVIGATOR, enabled: false});
+          if (!this.routeIndex || this.routeIndex === 0) {
+            this.close();
+          } else {
+            DeviceEventEmitter.emit('goLoginBack');
+          }
+        }}
+        visible={visible}
+        transparent={true}>
+        <Animatable.View
+          transition={['opacity', 'scaleX', 'scaleY']}
+          useNativeDriver={true}
+          duration={300}
+          iterationCount={1}
+          style={{
+            opacity: animated ? 1 : 0,
+            flex: 1,
+            backgroundColor: DDS.isTab ? 'rgba(0,0,0,0.3)' : colors.bg,
+            width: '100%',
+            height: '100%',
+            alignSelf: 'center',
+            justifyContent: 'center',
+            alignItems: 'center',
+            transform: [
+              {
+                scaleX: animated ? 1 : 0.95,
+              },
+              {
+                scaleY: animated ? 1 : 0.95,
+              },
+            ],
+          }}>
+          <TouchableOpacity
+            onPress={() => this.close()}
+            style={{
+              width: '100%',
+              height: '100%',
+              position: 'absolute',
+              zIndex: 1,
+            }}
+          />
+
+          <View
+            style={{
+              ...getElevation(DDS.isTab ? 10 : 0),
+              width: DDS.isTab ? '65%' : '100%',
+              height: DDS.isTab ? '90%' : '100%',
+              borderRadius: DDS.isTab ? 5 : 0,
+              backgroundColor: colors.bg,
+              padding: 8,
+              paddingVertical: 16,
+              zIndex: 10,
+            }}>
+            <Navigator
+              ref={ref => (this.navigation = ref)}
+              onNavigationStateChange={state => {
+                this.routeIndex = state.index;
+                console.log(state);
+              }}
+            />
+          </View>
+        </Animatable.View>
+      </Modal>
+    );
+  }
+}
+
+export default LoginDialog;

apps/mobile/src/views/ForgotPassword/index.js

@@ -12,15 +12,14 @@ import {DDS} from '../../../App';
 import {opacity, pv, SIZE, WEIGHT} from '../../common/common';
 import {Header} from '../../components/header';
 import {useTracked} from '../../provider';
+import {_recieveEvent, _unSubscribeEvent} from '../../components/DialogManager';
+import {useIsFocused} from 'react-navigation-hooks';
 
 export const ForgotPassword = ({navigation}) => {
   const [state, dispatch] = useTracked();
-  const {colors, selectionMode, pinned, selectedItemsList} = state;
+  const {colors, isLoginNavigator} = state;
 
-  ///
-  const updateDB = () => {};
-  const updateSelectionList = () => {};
-  const changeSelectionMode = () => {};
+  let isFocused = useIsFocused();
 
   useEffect(() => {
     DeviceEventEmitter.emit('hide');
@@ -29,6 +28,17 @@ export const ForgotPassword = ({navigation}) => {
     };
   }, []);
 
+  const handleBackPress = () => {
+    navigation.goBack();
+  };
+
+  useEffect(() => {
+    _recieveEvent('goBack', handleBackPress);
+    return () => {
+      _unSubscribeEvent('goBack', handleBackPress);
+    };
+  }, [isFocused]);
+
   return (
     <SafeAreaView
       style={{
@@ -41,7 +51,12 @@ export const ForgotPassword = ({navigation}) => {
         }}
       />
 
-      <Header colors={colors} heading={'Recover Password'} />
+      <Header
+        isLoginNavigator={isLoginNavigator}
+        colors={colors}
+        navigation={navigation}
+        heading={'Recover Password'}
+      />
 
       <View
         style={{

apps/mobile/src/views/Login/index.js

@@ -5,6 +5,7 @@ import {
   Text,
   TouchableOpacity,
   View,
+  BackHandler,
 } from 'react-native';
 import {TextInput} from 'react-native-gesture-handler';
 import {NavigationEvents} from 'react-navigation';
@@ -13,37 +14,59 @@ import {opacity, pv, SIZE, WEIGHT} from '../../common/common';
 import {Header} from '../../components/header';
 import {useTracked} from '../../provider';
 import NavigationService from '../../services/NavigationService';
+import {useIsFocused} from 'react-navigation-hooks';
 
 export const Login = ({navigation}) => {
   const [state, dispatch] = useTracked();
-  const {colors} = state;
+  const {colors, isLoginNavigator} = state;
 
+  const isFocused = useIsFocused();
   useEffect(() => {
     DeviceEventEmitter.emit('hide');
-    return () => {
-      DeviceEventEmitter.emit('show');
-    };
   }, []);
 
   useEffect(() => {
     DeviceEventEmitter.emit('closeSidebar');
-    return () => {
-      DeviceEventEmitter.emit('openSidebar');
-    };
   }, []);
 
+  const handleBackPress = () => {
+    alert('here');
+    return true;
+  };
+
+  useEffect(() => {
+    let backhandler;
+    if (isFocused) {
+      backhandler = BackHandler.addEventListener(
+        'hardwareBackPress',
+        handleBackPress,
+      );
+    } else {
+      if (backhandler) {
+        backhandler.remove();
+        backhandler = null;
+      }
+    }
+
+    return () => {
+      if (!backhandler) return;
+      backhandler.remove();
+      backhandler = null;
+    };
+  }, [isFocused]);
+
   return (
     <SafeAreaView
       style={{
         backgroundColor: colors.bg,
         height: '100%',
       }}>
-      <NavigationEvents
-        onWillFocus={() => {
-          DeviceEventEmitter.emit('hide');
-        }}
+      <Header
+        navigation={navigation}
+        isLoginNavigator={isLoginNavigator}
+        olors={colors}
+        heading="Login"
       />
-      <Header colors={colors} heading="Login" />
 
       <View
         style={{
@@ -51,7 +74,7 @@ export const Login = ({navigation}) => {
           alignItems: 'center',
           width: '100%',
         }}>
-        {renderLogin(colors)}
+        {renderLogin(colors, navigation)}
       </View>
     </SafeAreaView>
   );
@@ -68,7 +91,7 @@ Login.navigationOptions = {
 
 export default Login;
 
-const renderLogin = colors => {
+const renderLogin = (colors, navigation) => {
   const _email = createRef();
   const _pass = createRef();
   return (
@@ -161,7 +184,7 @@ const renderLogin = colors => {
 
         <TouchableOpacity
           onPress={() => {
-            NavigationService.navigate('ForgotPassword');
+            navigation.navigate('ForgotPassword');
           }}
           activeOpacity={opacity}
           style={{
@@ -185,26 +208,9 @@ const renderLogin = colors => {
           position: DDS.isTab ? 'absolute' : 'relative',
           bottom: '0%',
         }}>
-        <TouchableOpacity
-          activeOpacity={opacity}
-          style={{
-            alignItems: 'center',
-            width: '100%',
-            marginBottom: 20,
-          }}>
-          <Text
-            style={{
-              fontSize: SIZE.md,
-              fontFamily: WEIGHT.regular,
-              color: colors.accent,
-            }}>
-            Login with G
-          </Text>
-        </TouchableOpacity>
-
         <TouchableOpacity
           onPress={() => {
-            NavigationService.navigate('Signup');
+            navigation.navigate('Signup');
           }}
           activeOpacity={opacity}
           style={{

apps/mobile/src/views/Signup/index.js

@@ -12,10 +12,12 @@ import {DDS} from '../../../App';
 import {opacity, pv, SIZE, WEIGHT} from '../../common/common';
 import {Header} from '../../components/header';
 import {useTracked} from '../../provider';
+import {useIsFocused} from 'react-navigation-hooks';
+import {_recieveEvent, _unSubscribeEvent} from '../../components/DialogManager';
 
 export const Signup = ({navigation}) => {
   const [state, dispatch] = useTracked();
-  const {colors} = state;
+  const {colors, isLoginNavigator} = state;
   useEffect(() => {
     DeviceEventEmitter.emit('hide');
     return () => {
@@ -23,6 +25,26 @@ export const Signup = ({navigation}) => {
     };
   }, []);
 
+  let isFocused = useIsFocused();
+
+  useEffect(() => {
+    DeviceEventEmitter.emit('hide');
+    return () => {
+      DeviceEventEmitter.emit('show');
+    };
+  }, []);
+
+  const handleBackPress = () => {
+    navigation.goBack();
+  };
+
+  useEffect(() => {
+    _recieveEvent('goLoginBack', handleBackPress);
+    return () => {
+      _unSubscribeEvent('goLoginBack', handleBackPress);
+    };
+  }, [isFocused]);
+
   return (
     <SafeAreaView
       style={{
@@ -34,7 +56,12 @@ export const Signup = ({navigation}) => {
           DeviceEventEmitter.emit('hide');
         }}
       />
-      <Header colors={colors} heading="Create Account" />
+      <Header
+        isLoginNavigator={isLoginNavigator}
+        navigation={navigation}
+        colors={colors}
+        heading="Create Account"
+      />
 
       <View
         style={{
@@ -150,30 +177,6 @@ const renderSignup = colors => {
           </Text>
         </TouchableOpacity>
       </View>
-
-      <View
-        style={{
-          width: '100%',
-          position: DDS.isTab ? 'absolute' : 'relative',
-          bottom: '0%',
-        }}>
-        <TouchableOpacity
-          activeOpacity={opacity}
-          style={{
-            alignItems: 'center',
-            width: '100%',
-            marginBottom: 20,
-          }}>
-          <Text
-            style={{
-              fontSize: SIZE.md,
-              fontFamily: WEIGHT.regular,
-              color: colors.accent,
-            }}>
-            Signup with G
-          </Text>
-        </TouchableOpacity>
-      </View>
     </View>
   );
 };