fixed navigation problems

marklaatikainen · Apr 17, 2018 · ef0c5f5 · ef0c5f5
1 parent 71764f7
commit ef0c5f5
Show file tree

Hide file tree

Showing 31 changed files with 442 additions and 325 deletions.
diff --git a/src/App.connected.js b/src/App.connected.js
@@ -1,14 +1,15 @@
 import React, { Component } from 'react';
 import { PropTypes } from 'prop-types';
-import { AsyncStorage } from 'react-native';
+import { AsyncStorage, BackHandler } from 'react-native';
 import { connect } from 'react-redux';
 import { setLanguage } from 'redux-i18n';
 import { Navigator } from './_components/navigator';
 import { Dimensions } from 'react-native';
-import { dimensionsActions } from './_actions';
+import { dimensionsActions, targetActions } from './_actions';
 
 class ConnectedApp extends Component {
   componentDidMount() {
+    BackHandler.addEventListener('hardwareBackPress', this.androidBackHandler);
     const { dispatch } = this.props;
     AsyncStorage.getItem('lang', (err, result) => {
       if (result !== null) {
@@ -17,21 +18,55 @@ class ConnectedApp extends Component {
         dispatch(setLanguage('fi'));
       }
     });
-    dispatch(dimensionsActions.getDimensions())
-    Dimensions.addEventListener('change', () => dispatch(dimensionsActions.getDimensions()))
+    dispatch(dimensionsActions.getDimensions());
+    Dimensions.addEventListener('change', () =>
+      dispatch(dimensionsActions.getDimensions())
+    );
   }
 
+  componentWillUnmount() {
+    BackHandler.removeEventListener(
+      'hardwareBackPress',
+      this.androidBackHandler
+    );
+  }
+
+  androidBackHandler = () => {
+    const { dispatch, navigation } = this.props;
+    const { mapPageTarget, listPageTarget } = this.props.target;
+    let rightTarget = navigation.index === 1 ? mapPageTarget : listPageTarget;
+    if (!rightTarget) {
+      rightTarget = mapPageTarget ? mapPageTarget : listPageTarget;
+    }
+
+    if (mapPageTarget || listPageTarget) {
+      if (rightTarget && rightTarget._id) {
+        dispatch(
+          navigation.index === 1
+            ? targetActions.closeMapTarget()
+            : targetActions.closeListTarget()
+        );
+        return true;
+      }
+    }
+    return false;
+  };
+
   render() {
     return <Navigator {...this.props} />;
   }
 }
 
 const mapStateToProps = state => ({
-  lang: state.i18nState.lang
+  target: state.target,
+  lang: state.i18nState.lang,
+  navigation: state.navigation
 });
 
 ConnectedApp.propTypes = {
-  dispatch: PropTypes.func.isRequired
+  dispatch: PropTypes.func.isRequired,
+  target: PropTypes.object.isRequired,
+  navigation: PropTypes.object.isRequired
 };
 
 export default connect(mapStateToProps)(ConnectedApp);
diff --git a/src/_actions/index.js b/src/_actions/index.js
@@ -6,3 +6,4 @@ export * from './target.action';
 export * from './userlocation.action';
 export * from './filter.action';
 export * from './dropdown.action';
+export * from './navigation.action';
diff --git a/src/_actions/navigation.action.js b/src/_actions/navigation.action.js
@@ -1,37 +1,15 @@
 import { navigationConstants } from '../_constants';
 
-function changeIndex(index) {
-  function setIndex(i) {
-    return { type: navigationConstants.CHANGE_INDEX, i };
+function changeIndex(ind) {
+  function setIndex(index) {
+    return { type: navigationConstants.CHANGE_INDEX, index };
   }
 
   return dispatch => {
-    dispatch(setIndex(index));
-  };
-}
-
-function navigate(name) {
-  function setStack(route) {
-    return { type: navigationConstants.NAVIGATE, route };
-  }
-
-  return dispatch => {
-    dispatch(setStack(name));
-  };
-}
-
-function goBack() {
-  function setStack() {
-    return { type: navigationConstants.BACK };
-  }
-
-  return dispatch => {
-    dispatch(setStack());
+    dispatch(setIndex(ind));
   };
 }
 
 export const navigationActions = {
-  changeIndex,
-  navigate,
-  goBack
+  changeIndex
 };
diff --git a/src/_actions/target.action.js b/src/_actions/target.action.js
@@ -1,29 +1,48 @@
 import { targetConstants } from '../_constants';
-// import { NavigationActions } from 'react-navigation';
 
-function openTarget(targ) {
+function openMapTarget(targ) {
   function open(target) {
-    return { type: targetConstants.SELECT_TARGET, target };
+    return { type: targetConstants.SELECT_MAP_TARGET, target };
   }
 
   return dispatch => {
     dispatch(open(targ));
-    // NavigationActions.navigate({ routeName: 'Target' });
   };
 }
 
-function closeTarget() {
+function closeMapTarget() {
   function close() {
-    return { type: targetConstants.DESELECT_TARGET };
+    return { type: targetConstants.DESELECT_MAP_TARGET };
+  }
+
+  return dispatch => {
+    dispatch(close());
+  };
+}
+
+function openListTarget(targ) {
+  function open(target) {
+    return { type: targetConstants.SELECT_LIST_TARGET, target };
+  }
+
+  return dispatch => {
+    dispatch(open(targ));
+  };
+}
+
+function closeListTarget() {
+  function close() {
+    return { type: targetConstants.DESELECT_LIST_TARGET };
   }
 
   return dispatch => {
     dispatch(close());
-    // NavigationActions.navigate({ routeName: 'Tabs' });
   };
 }
 
 export const targetActions = {
-  openTarget,
-  closeTarget
+  openMapTarget,
+  closeMapTarget,
+  openListTarget,
+  closeListTarget
 };
diff --git a/src/_components/listpage/listpage.component.js b/src/_components/listpage/listpage.component.js
@@ -2,27 +2,40 @@ import React, { Component } from 'react';
 import { PropTypes } from 'prop-types';
 import { View, FlatList, Text } from 'react-native';
 
+import TargetContainer from '../target/target.container';
 import { styles, ListFilters } from '../listpage';
 import SearchContainer from '../searchbar/search.container';
 import Item from '../listpage/listpage.item';
 
 export class SearchPage extends Component {
+  shouldComponentUpdate(props) {
+    return props.navigation.index === 2 ? true : false;
+  }
+
   render() {
     const { data, filter } = this.props;
+    const { listPageTarget } = this.props.target;
+
     return (
       <View style={styles.container}>
-        <SearchContainer />
-        <ListFilters {...this.props} />
-        {data.length === 0 && filter.filters.filterText !== '' ? (
-          <Text style={styles.notfound}>Ei hakutuloksia..</Text>
+        {listPageTarget && listPageTarget._id ? (
+          <TargetContainer />
         ) : (
-          <FlatList
-            data={data}
-            keyExtractor={item => item._id}
-            renderItem={({ item, index }) => (
-              <Item {...this.props} data={item} index={index} />
+          <View>
+            <SearchContainer />
+            <ListFilters {...this.props} />
+            {data.length === 0 && filter.filters.filterText !== '' ? (
+              <Text style={styles.notfound}>Ei hakutuloksia..</Text>
+            ) : (
+              <FlatList
+                data={data}
+                keyExtractor={item => item._id}
+                renderItem={({ item, index }) => (
+                  <Item {...this.props} data={item} index={index} />
+                )}
+              />
             )}
-          />
+          </View>
         )}
       </View>
     );
@@ -32,5 +45,7 @@ export class SearchPage extends Component {
 SearchPage.propTypes = {
   dropdown: PropTypes.object.isRequired,
   data: PropTypes.array.isRequired,
-  filter: PropTypes.object.isRequired
+  filter: PropTypes.object.isRequired,
+  navigation: PropTypes.object.isRequired,
+  target: PropTypes.object.isRequired
 };
diff --git a/src/_components/listpage/listpage.container.js b/src/_components/listpage/listpage.container.js
@@ -20,7 +20,9 @@ const mapStateToProps = state => ({
   region: state.region,
   userlocation: state.userlocation,
   filter: state.filter,
-  dropdown: state.dropdown
+  dropdown: state.dropdown,
+  navigation: state.navigation,
+  target: state.target
 });
 
 export default connect(mapStateToProps)(ListPageContainer);
diff --git a/src/_components/listpage/listpage.item.js b/src/_components/listpage/listpage.item.js
@@ -8,29 +8,27 @@ import { targetIcon } from '../listpage';
 
 export default class Item extends Component {
   render() {
+    const { data } = this.props;
+
     return (
       <View>
         <TouchableOpacity
           onPress={() =>
-            this.props.dispatch(targetActions.openTarget(this.props.data))
+            this.props.dispatch(targetActions.openListTarget(data))
           }
         >
           <ListItem
             avatar={
               <Image
-                source={{ uri: targetIcon(this.props.data.type) }}
+                source={{ uri: targetIcon(data.type) }}
                 style={{
                   width: 30,
                   height: 32
                 }}
               />
             }
-            title={this.props.data.name}
-            subtitle={
-              this.props.data.address.street +
-              ', ' +
-              this.props.data.address.city
-            }
+            title={data.name}
+            subtitle={`${data.address.street} , ${data.address.city}`}
           />
         </TouchableOpacity>
       </View>

diff --git a/src/_components/mainpage/main.component.js b/src/_components/mainpage/main.component.js
@@ -3,28 +3,39 @@ import { PropTypes } from 'prop-types';
 import { View } from 'react-native';
 import { connect } from 'react-redux';
 
+import TargetContainer from '../target/target.container';
 import MapContainer from '../map/map.container';
 import CheckBoxesContainer from '../checkboxes/checkboxes.container';
 import Panel from '../panel/panel.component';
 
 class MainPage extends Component {
+  shouldComponentUpdate(props) {
+    return props.navigation.index === 1 ? true : false;
+  }
+
+  /* eslint-disable no-else-return */
+
   render() {
-    const { target, navigation } = this.props;
-    return (
-      <View>
-        <MapContainer />
-        {target.target && navigation.navigate('Target')}
-        {/* navigation.navigate('Tabs')} */}
-        <Panel>
-          <CheckBoxesContainer />
-        </Panel>
-      </View>
-    );
+    const { mapPageTarget } = this.props.target;
+
+    if (mapPageTarget && mapPageTarget._id) {
+      return <TargetContainer />;
+    } else {
+      return (
+        <View>
+          <MapContainer />
+          <Panel>
+            <CheckBoxesContainer />
+          </Panel>
+        </View>
+      );
+    }
   }
 }
 
 const mapStateToProps = state => ({
-  target: state.target
+  target: state.target,
+  navigation: state.navigation
 });
 
 MainPage.propTypes = {

diff --git a/src/_components/map/map.callout.content.js b/src/_components/map/map.callout.content.js
@@ -3,7 +3,7 @@ import { PropTypes } from 'prop-types';
 import { View, Text } from 'react-native';
 import { getDistance } from 'geolib';
 
-import { openingHours } from '../map';
+import { opHours } from '../map';
 import { translate, precisionRound } from '../../_helpers';
 
 export class CalloutContent extends Component {
@@ -31,7 +31,7 @@ export class CalloutContent extends Component {
           )}
           km
         </Text>
-        <Text>{openingHours(data, this.context)}</Text>
+        <Text>{opHours(data, this.context)}</Text>
       </View>
     );
   }