handling back button on lecture - changed close course action slightly

Author: gierczynskiatom

mobileClient/components/Course.js

@@ -38,7 +38,7 @@ class Course extends React.Component {
         backgroundColor: this.props.backgroundColor,
         alignItems: 'center'
       }}>
-        <Lecture />
+        <Lecture closeCourse={this.props.closeCourse}/>
         <View style={{position: 'absolute', bottom: 25, alignSelf: 'center'}}>
           <CircleButton radius={45} withStaticCircles>
             <Image

mobileClient/components/Home.js

@@ -232,10 +232,10 @@ class Home extends React.Component {
 
   closeCourse = async () => {
     await mutationConnectionHandler(this.props.history, async () => {
+      await this.props.closeCourse()
       this.props.dispatch(courseActions.close())
       this.setState({ isExitAnimationFinished: false })
       this.closeMenu()
-      await this.props.closeCourse()
       this.enableCourseSelector()
     })
   }
@@ -326,7 +326,7 @@ class Home extends React.Component {
 
         </View>}
 
-        {isExitAnimationFinished && <Course />}
+        {isExitAnimationFinished && <Course closeCourse={this.closeCourse}/>}
 
         {this.props.mainMenu.visible && <MainMenu closeCourse={this.closeCourse} logoutAction={this.logoutAction}/>}
       </View>

mobileClient/components/Lecture.js

@@ -1,7 +1,7 @@
 // @flow
 
 import React from 'react'
-import { Animated, Easing, Text, View } from 'react-native'
+import { Animated, Easing, Text, View, BackHandler} from 'react-native'
 import { compose, graphql } from 'react-apollo'
 import { connect } from 'react-redux'
 import { withRouter } from 'react-router-native'
@@ -19,6 +19,7 @@ import currentLessonQuery from '../shared/graphql/queries/currentLesson'
 import WithData from './WithData'
 import { mutationConnectionHandler } from './NoInternet'
 import Loading from './Loading'
+import * as mainMenuActions from '../actions/MainMenuActions'
 
 class Lecture extends React.Component {
   state = {
@@ -31,13 +32,29 @@ class Lecture extends React.Component {
   }
 
   componentDidMount () {
+    BackHandler.addEventListener('hardwareBackPress', this.handleBack)
     Animated.timing(this.infoScale, {
       toValue: 1,
       duration: 500,
       easing: Easing.elastic(1)
     }).start(() => this.setState({ showLecture: true }))
   }
 
+  componentWillUnmount = () => {
+    BackHandler.removeEventListener('hardwareBackPress', this.handleBack)
+  }
+
+  handleBack = () => {
+    if(this.props.mainMenu.visible) {
+      this.props.dispatch(mainMenuActions.updateMainMenuVisibility({
+        visible: false
+      }))
+      return true
+    }
+    this.props.closeCourse()
+    return true
+  }
+
   onChangeState = async (event) => {
     // console.log('Gozdecki: event in lecture', event)
     if (event.state === 'ended') {
@@ -103,6 +120,7 @@ const mapStateToProps = (state) => {
 
 export default compose(
   connect(mapStateToProps),
+  connect(state => state),
   withRouter,
   graphql(clearNotCasualItems, {
     props: ({ ownProps, mutate }) => ({