Before moving styles to separate file

ShyshkovOleg · Aug 12, 2019 · 9fb5c45 · 9fb5c45
1 parent b2532e9
commit 9fb5c45
Show file tree

Hide file tree

Showing 6 changed files with 104 additions and 49 deletions.
diff --git a/App.js b/App.js
@@ -11,6 +11,7 @@ import {
 } from 'react-native';
 
 import {Colors} from 'react-native/Libraries/NewAppScreen';
+import AsyncStorage from '@react-native-community/async-storage';
 
 import ContactCard from './components/ContactCard';
 import FancyButton from './components/FancyButton';
@@ -22,11 +23,11 @@ export default class App extends Component {
     super();
     this.state = {
       items: [
-        {id: 0, firstName: 'Oleg', lastName: 'Shyshkov', cell: '+38098816004', email: "[email protected]"},
-        {id: 1, firstName: 'Вікторія', lastName: 'Шишкова', cell: 'немає', email: "немає"},
-        {id: 2, firstName: 'Andrii', lastName: 'Shyshkov', cell: '+380978458000', email: "[email protected]"},
-        {id: 3, firstName: 'Надія', lastName: 'Шишкова', cell: '+380679087261', email: "[email protected]"},
-        {id: 4, firstName: 'Тетяна', lastName: 'Шишкова', cell: '+380977460988', email: "[email protected]"}
+        // {id: 0, firstName: 'Oleg', lastName: 'Shyshkov', cell: '+38098816004', email: "shyshkov.o.a@gmail.com"},
+        // {id: 1, firstName: 'Вікторія', lastName: 'Шишкова', cell: 'немає', email: "немає"},
+        // {id: 2, firstName: 'Andrii', lastName: 'Shyshkov', cell: '+380978458000', email: "andrii@gmail.com"},
+        // {id: 3, firstName: 'Надія', lastName: 'Шишкова', cell: '+380679087261', email: "nadia@gmail.com"},
+        // {id: 4, firstName: 'Тетяна', lastName: 'Шишкова', cell: '+380977460988', email: "shyshkova.t.v@icloud.com"}
       ],
       isPortrait: true,
       screenWidth: Dimensions.get('window').width,
@@ -35,15 +36,45 @@ export default class App extends Component {
       itemData: {},
       isNewContact: false
     }
+    // this.getFromLocal();
+  }
+
+  getFromLocal = async () => {
+    try {
+        const value = await AsyncStorage.getItem('contacts');
+        const arr = JSON.parse(value)
+        this.setState({items: arr})
+        // console.log(this.state.items);
+    } catch (e) {
+        console.info(e);
+    }
+  }
+
+
+  saveToLocal = async (data) => {
+      try {
+          await AsyncStorage.setItem('contacts', JSON.stringify(data));
+          // await AsyncStorage.setItem('contacts', JSON.stringify([]));
+      } catch (error) {
+          console.info(error);
+      }
   }
 
   componentDidMount() {
+    console.log("did mount");
+    this.getFromLocal();
+
     Dimensions.addEventListener('change', ({window: {width, height}}) => {
       width < height ? this.setState({isPortrait: true}) : this.setState({isPortrait: false});
       this.setState({screenWidth: Dimensions.get('window').width})
     })
   }
 
+  // shouldComponentUpdate(props, state) {
+  //   console.log("shoud update");
+  //   return true;
+  // }
+
   addItem = () => {
     this.setState({
       items: [...this.state.items, {id: new Date().getTime(), firstName: 'Oleg', lastName: 'Shyshkov', cell: '+38098816004', email: "[email protected]"}],
@@ -65,6 +96,12 @@ export default class App extends Component {
     // }, 3000);
   }
 
+  saveInput = (val) => {
+    console.log(val);
+    this.setState({items: [...this.state.items, val]});
+    this.saveToLocal([...this.state.items, val]);
+  }
+
   render () {
     let index;
     return (
@@ -78,6 +115,7 @@ export default class App extends Component {
           isPortrait={this.state.isPortrait}
           itemData={this.state.itemData}
           isNewContact={this.state.isNewContact}
+          inputData={this.saveInput}
         />
 
         <View style={{height: 55, marginTop: -5, backgroundColor: '#67B826', justifyContent: "space-between", alignItems: 'center', flexDirection: 'row'}}>

diff --git a/components/FancyButton.js b/components/FancyButton.js
@@ -1,5 +1,5 @@
 import React, {Component} from 'react';
-import { View, Text, StyleSheet, TouchableOpacity, Touchable, TouchableHighlight, Image } from 'react-native';
+import { View, Text, StyleSheet, TouchableOpacity, Touchable, TouchableHighlight, Image, TouchableWithoutFeedback } from 'react-native';
 import { Colors } from 'react-native/Libraries/NewAppScreen';
 
 export default class FancyButton extends Component {
@@ -10,12 +10,12 @@ export default class FancyButton extends Component {
         };
     }
 
-    _onHideUnderlay(){
-        this.setState({ pressStatus: false });
-    }
-    _onShowUnderlay(){
-        this.setState({ pressStatus: true });
-    }
+    // _onHideUnderlay(){
+    //     this.setState({ pressStatus: false });
+    // }
+    // _onShowUnderlay(){
+    //     this.setState({ pressStatus: true });
+    // }
 
     render() {
         const {
@@ -26,19 +26,29 @@ export default class FancyButton extends Component {
         } = this.props;
 
         return (
-            // <TouchableHighlight disabled={disabled} onPress={() => toggleModal(true, {}, true)} title={title}
-            <TouchableHighlight disabled={disabled} onPress={onPress} title={title}
-                style={this.state.pressStatus ? styles.buttonPressed : styles.button}
-                onHideUnderlay={this._onHideUnderlay.bind(this)}
-                onShowUnderlay={this._onShowUnderlay.bind(this)}
-                underlayColor={'#88D840'}
+            // <TouchableHighlight disabled={disabled} onPress={onPress} title={title}
+            //     style={this.state.pressStatus ? styles.buttonPressed : styles.button}
+            //     onHideUnderlay={this._onHideUnderlay.bind(this)}
+            //     onShowUnderlay={this._onShowUnderlay.bind(this)}
+            //     // underlayColor={'#88D840'}
+            //     underlayColor={'red'}
+            // >
+            //     <Text style={{color: 'white'}} disabled={disabled}>
+            //         {title}
+            //     </Text>
+            // </TouchableHighlight>
+            <TouchableWithoutFeedback disabled={disabled} title={title} 
+                onPressIn={() => this.setState({ pressStatus: true })}
+                onPressOut={() => this.setState({ pressStatus: false })}
+                onPress={onPress}
+                // style={this.state.pressStatus ? styles.buttonPressed : styles.button}
+                // underlayColor={'#88D840'}
+                // underlayColor={'red'}
             >
-                {/* <View > */}
-                <Text style={{color: 'white'}} disabled={disabled}>
-                    {title}
-                </Text>
-                {/* </View> */}
-            </TouchableHighlight>
+                <View style={this.state.pressStatus ? styles.buttonPressed : styles.button}>
+                    <Text style={{color: 'white'}} disabled={disabled}>{title}</Text>
+                </View>
+            </TouchableWithoutFeedback>
         )
     }
 }

diff --git a/components/InputForm.js b/components/InputForm.js
@@ -1,33 +1,22 @@
 import React, {Component} from 'react';
-import { View, Text, StyleSheet, TextInput } from 'react-native';
-import { Colors } from 'react-native/Libraries/NewAppScreen';
-import AsyncStorage from '@react-native-community/async-storage';
+import { View, StyleSheet, TextInput } from 'react-native';
 
 import FancyButton from './FancyButton';
 
 export default class InputForm extends Component {
     state = {
-        // formValid: true,
-        id: '',
+        id:  new Date().getTime(),
         firstName: "ім'я",
         lastName: 'прізвище',
         cell: 'телефон',
         email: 'пошта'
     };
 
     render() {
-        saveToLocal = () => {
-            (async () => {
-                try {
-                  await AsyncStorage.setItem('contacts', JSON.stringify(this.state));
-                } catch (error) {
-                  // Error saving data
-                }
-            })();
-            AsyncStorage.getAllKeys((res) => alert(res));
-        }
+        const { inputData, closeModal } = this.props;
+
         return (
-            <View style={{flexDirecrtion: 'column',alignItems: 'center', flex: 1, marginTop: 15}}>
+            <View style={styles.container}>
 
                 <TextInput
                     style={styles.input} 
@@ -63,8 +52,13 @@ export default class InputForm extends Component {
                 />
                 {/* <Text style={{fontSize: 12,  transform: [{translateY: -25}]}}>пошта</Text> */}
 
-                <View style={{width: '95%', marginTop: 15}}>
-                    <FancyButton title={'SAVE'} disabled={false} onPress={()=> saveToLocal()}/>
+                <View style={styles.inputButton}>
+                    <FancyButton title={'SAVE'} disabled={false} 
+                    onPress={()=> {
+                        closeModal(false, {}, true);
+                        inputData(this.state);
+                    }}
+                    />
                 </View>
 
             </View>
@@ -73,17 +67,25 @@ export default class InputForm extends Component {
 }
 
 const styles = StyleSheet.create({
+    container: {
+        flexDirection: 'column',
+        alignItems: 'center',
+        flex: 1,
+        marginTop: 15
+    },
     input: {
         width: '95%',
         color: '#272734',
         height: 40,
-        // borderColor: 'gray',
-        // borderWidth: 1,
         borderBottomColor: 'gray',
         borderBottomWidth: 1,
         marginTop: 5
-        // marginTop: -10
+    },
+    inputButton: {
+        width: '95%',
+        marginTop: 60,
+        justifyContent: 'flex-end',
+        flexDirection: 'column',
     }
 });
 
-// export default InputForm;
diff --git a/components/Modal.js b/components/Modal.js
@@ -14,7 +14,7 @@ import InputForm from "../components/InputForm";
 export default class CustomModal extends Component {
 
     render() {
-        const { animationType, modalVisible, toggleModal, isPortrait, itemData, isNewContact } = this.props;
+        const { animationType, modalVisible, toggleModal, isPortrait, itemData, inputData, isNewContact } = this.props;
 
         dynamicStyle = () => {
           switch (true) {
@@ -31,7 +31,6 @@ export default class CustomModal extends Component {
         return (
         <Modal animationType={animationType} transparent visible={modalVisible}>
             <View style={styles.wrapper}>
-              {/* <View style={isPortrait ? styles.modalContainer : styles.modalContainerLanscape}> */}
               <View style={dynamicStyle()}>
 
                 <TouchableOpacity style={{alignItems: 'flex-end', justifyContent: 'center', height: 50}} onPress={() => {toggleModal(false, {})}}>
@@ -40,7 +39,7 @@ export default class CustomModal extends Component {
 
                 <View style={{flexDirection: 'column'}}>
 
-                  {isNewContact ? <InputForm /> : <ContactDetails itemData={itemData}/>}
+                  {isNewContact ? <InputForm inputData={inputData} closeModal={toggleModal}/> : <ContactDetails itemData={itemData}/>}
 
                   <View style={{flex: 1, justifyContent: "flex-end", alignItems: 'center', width: '100%'}}>
                     <Image style={{resizeMode: 'center', height: 100, width: 100, borderRadius: 100}} source={require('../images/placeholder.png')}/>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -8,6 +8,7 @@
     "lint": "eslint ."
   },
   "dependencies": {
+    "@react-native-community/async-storage": "^1.6.1",
     "react": "16.8.6",
     "react-native": "0.60.4"
   },