diff --git a/apps/mobile/src/components/DialogManager/index.js b/apps/mobile/src/components/DialogManager/index.js index 91b7210a1..c2a54991b 100644 --- a/apps/mobile/src/components/DialogManager/index.js +++ b/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} /> + + (this.loginDialog = ref)} /> ); } diff --git a/apps/mobile/src/components/LoginDialog/index.js b/apps/mobile/src/components/LoginDialog/index.js new file mode 100644 index 000000000..68c3edded --- /dev/null +++ b/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 ( + { + 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}> + + this.close()} + style={{ + width: '100%', + height: '100%', + position: 'absolute', + zIndex: 1, + }} + /> + + + (this.navigation = ref)} + onNavigationStateChange={state => { + this.routeIndex = state.index; + console.log(state); + }} + /> + + + + ); + } +} + +export default LoginDialog; diff --git a/apps/mobile/src/views/ForgotPassword/index.js b/apps/mobile/src/views/ForgotPassword/index.js index 35a56e05b..1138631a7 100644 --- a/apps/mobile/src/views/ForgotPassword/index.js +++ b/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 ( { }} /> -
+
{ 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 ( - { - DeviceEventEmitter.emit('hide'); - }} +
-
{ alignItems: 'center', width: '100%', }}> - {renderLogin(colors)} + {renderLogin(colors, navigation)} ); @@ -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 => { { - NavigationService.navigate('ForgotPassword'); + navigation.navigate('ForgotPassword'); }} activeOpacity={opacity} style={{ @@ -185,26 +208,9 @@ const renderLogin = colors => { position: DDS.isTab ? 'absolute' : 'relative', bottom: '0%', }}> - - - Login with G - - - { - NavigationService.navigate('Signup'); + navigation.navigate('Signup'); }} activeOpacity={opacity} style={{ diff --git a/apps/mobile/src/views/Signup/index.js b/apps/mobile/src/views/Signup/index.js index e0796fd4b..c94c25206 100644 --- a/apps/mobile/src/views/Signup/index.js +++ b/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 ( { DeviceEventEmitter.emit('hide'); }} /> -
+
{ - - - - - Signup with G - - - ); };