Fix performance issue

ContactLog/Location/ActionButton.js

@@ -7,8 +7,6 @@ import {deleteLocation} from 'realm/realmLocationTasks';
 import {strings} from 'locales/i18n';
 import {updateLocationData} from './actions.js';
 import CustomIcon from 'assets/icons/CustomIcon.js';
-import Modal from 'views/Modal';
-import NewLocation from 'ContactLog/NewLocation/NewLocation';
 import PropTypes from 'prop-types';
 import colors from 'assets/colors';
 
@@ -28,7 +26,10 @@ class Actions extends Component {
       },
       buttonIndex => {
         if (buttonIndex === 1) {
-          this.props.updateLocationData({openLocationModal: true});
+          this.props.updateLocationData({
+            selectedTime: time,
+            openLocationModal: true,
+          });
         } else if (buttonIndex === 2) {
           if (time) {
             deleteLocation(time);
@@ -40,24 +41,8 @@ class Actions extends Component {
   };
 
   render() {
-    const {
-      contactLocationData: {openLocationModal},
-      time,
-    } = this.props;
-
     return (
       <>
-        <Modal
-          visible={openLocationModal}
-          handleModalClose={() => {
-            this.props.updateLocationData({
-              openLocationModal: false,
-            });
-          }}
-          useScrollView={false}
-          title={strings('locations.edit_location_header')}>
-          <NewLocation time={time} />
-        </Modal>
         <TouchableOpacity
           style={styles.action_button}
           onPress={() => this.handleAction()}>

ContactLog/Location/Container.js

@@ -5,6 +5,9 @@ import {StyleSheet, Text, ScrollView} from 'react-native';
 import {connectActionSheet} from '@expo/react-native-action-sheet';
 import {strings, fmt_date} from 'locales/i18n';
 import {updateLocationData} from './actions.js';
+import Modal from 'views/Modal';
+import NewLocation from 'ContactLog/NewLocation/NewLocation';
+import Save from '../NewLocation/Save';
 import Disclaimer from 'Privacy/Disclaimer';
 import Import from './Import';
 import ImportGoogleTimeline from 'GoogleTimeline/ImportGoogleTimeline';
@@ -54,8 +57,19 @@ class LocationsContainer extends Component {
 
   render() {
     const {
-      contactLocationData: {date, addresses, openImportModal},
+      contactLocationData: {
+        date,
+        addresses,
+        openImportModal,
+        openLocationModal,
+        selectedTime,
+      },
     } = this.props;
+    const saveButton = <Save />;
+
+    if (openImportModal && openLocationModal) {
+      return null;
+    }
 
     return (
       <ScrollView>
@@ -72,6 +86,20 @@ class LocationsContainer extends Component {
             this.fetchAddresses(date);
           }}
         />
+
+        <Modal
+          visible={openLocationModal}
+          handleModalClose={() => {
+            this.props.updateLocationData({
+              openLocationModal: false,
+            });
+          }}
+          useScrollView={false}
+          title={strings('locations.edit_location_header')}
+          actionButton={saveButton}>
+          <NewLocation time={selectedTime} />
+        </Modal>
+
         {addresses && addresses.length > 0 ? (
           <>
             <Text style={styles.date}>

ContactLog/Location/List.js

@@ -12,10 +12,10 @@ class List extends Component {
 
     return (
       <>
-        {addresses.map((item, idx) => {
+        {addresses.map(item => {
           const {name, address, timerange, time} = item;
           return (
-            <View style={styles.address_card} key={idx}>
+            <View style={styles.address_card} key={time}>
               <View style={styles.address_content}>
                 <Text style={styles.name}>{name}</Text>
                 {address !== '' && (

ContactLog/Location/reducer.js

@@ -5,6 +5,7 @@ const initialState = {
   openLocationModal: false,
   imported: false,
   isImporting: false,
+  selectedTime: 0,
 };
 
 const contactLocationReducer = (state = initialState, action) => {

ContactLog/NewLocation/LocationField.js

@@ -19,7 +19,11 @@ class LocationField extends Component {
         ) : (
           <View style={styles.empty_cell} />
         )}
-        <Input name={name} value={value} />
+        <Input
+          name={name}
+          value={value}
+          handleCallback={this.props.handleCallback}
+        />
       </View>
     );
   }

ContactLog/NewLocation/NewLocation.js

@@ -27,6 +27,12 @@ class NewLocation extends Component {
     }
   };
 
+  handleCallback = () => {
+    this.props.editLocation({
+      enableSave: true,
+    });
+  };
+
   render() {
     const {
       newLocationData: {name, address},
@@ -38,12 +44,14 @@ class NewLocation extends Component {
           icon={'building24'}
           name={strings('locations.name')}
           value={name}
+          handleCallback={this.handleCallback}
         />
 
         <LocationField
           icon={'location24'}
           name={strings('locations.address')}
           value={address}
+          handleCallback={this.handleCallback}
         />
       </>
     );

ContactLog/NewLocation/Save.js

@@ -0,0 +1,49 @@
+import React, {Component} from 'react';
+import {StyleSheet, Text, TouchableOpacity} from 'react-native';
+import {bindActionCreators} from 'redux';
+import {connect} from 'react-redux';
+import {strings} from 'locales/i18n';
+import colors from 'assets/colors';
+
+class Save extends Component {
+  render() {
+    const {disabled} = this.props;
+
+    const disableClass = disabled ? '' : styles.active;
+
+    return (
+      <>
+        <TouchableOpacity disabled={disabled}>
+          <Text style={[styles.save_button, styles.active]}>
+            {strings('locations.save_button')}
+          </Text>
+        </TouchableOpacity>
+      </>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  save_button: {
+    fontWeight: '500',
+    fontSize: 14,
+    lineHeight: 16,
+    textTransform: 'uppercase',
+  },
+  active: {
+    color: colors.primary_theme,
+  }
+});
+
+Save.propTypes = {
+
+};
+
+
+const mapDispatchToProps = dispatch => bindActionCreators({
+}, dispatch);
+
+export default connect(
+  null,
+  mapDispatchToProps,
+)(Save);

ContactLog/NewLocation/reducer.js

@@ -1,4 +1,5 @@
 const initialState = {
+  enableSave: false,
   name: '',
   address: '',
   // start: 0,

locales/en.json

@@ -433,6 +433,7 @@
     "start": "Start time",
     "end": "End time",
     "notes": "Notes",
+    "save_button": "Save"
   },
   "people": {
     "text": "People",

views/Input.js

@@ -7,6 +7,9 @@ const Input = props => {
   const [value, onChangeText] = React.useState(initValue);
   React.useEffect(() => {
     onChangeText(initValue);
+    if (props.handleCallback && initValue !== value) {
+      props.handleCallback();
+    }
   }, [initValue]);
 
   return (

views/Modal.js

@@ -13,7 +13,7 @@ import PropTypes from 'prop-types';
 
 class Modal extends Component {
   render() {
-    const {visible, title} = this.props;
+    const {visible, title, actionButton} = this.props;
 
     return (
       <NativeModal
@@ -22,10 +22,13 @@ class Modal extends Component {
         animationType="slide">
         <SafeAreaView style={styles.status_bar} />
         <View style={styles.header}>
-          <TouchableOpacity onPress={this.props.handleModalClose}>
-            <CustomIcon name={'close24'} color={colors.gray_icon} size={24} />
-          </TouchableOpacity>
-          <Text style={styles.title}>{title}</Text>
+          <View style={styles.title_wrapper}>
+            <TouchableOpacity onPress={this.props.handleModalClose}>
+              <CustomIcon name={'close24'} color={colors.gray_icon} size={24} />
+            </TouchableOpacity>
+            <Text style={styles.title}>{title}</Text>
+          </View>
+          {actionButton && this.props.actionButton}
         </View>
         {this.props.children}
       </NativeModal>
@@ -49,6 +52,11 @@ const styles = StyleSheet.create({
     borderBottomWidth: 1,
     borderBottomColor: colors.card_border,
     alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  title_wrapper: {
+    flexDirection: 'row',
+    alignItems: 'center',
   },
   title: {
     paddingLeft: 20,