Skip to content

Commit

Permalink
Second Success CheckPoint
Browse files Browse the repository at this point in the history
  • Loading branch information
@ShyshkovOleg
ShyshkovOleg committed Aug 12, 2019
1 parent 9fb5c45 commit 661b2eb
Show file tree
Hide file tree
Showing 4 changed files with 32 additions and 69 deletions.
39 changes: 17 additions & 22 deletions App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,29 +22,21 @@ export default class App extends Component {
constructor() {
super();
this.state = {
items: [
// {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"}
],
items: [],
isPortrait: true,
screenWidth: Dimensions.get('window').width,
isRearranged: false,
modalVisible: false,
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);
}
Expand All @@ -54,7 +46,6 @@ export default class App extends Component {
saveToLocal = async (data) => {
try {
await AsyncStorage.setItem('contacts', JSON.stringify(data));
// await AsyncStorage.setItem('contacts', JSON.stringify([]));
} catch (error) {
console.info(error);
}
Expand All @@ -70,11 +61,6 @@ export default class App extends Component {
})
}

// 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]"}],
Expand All @@ -91,9 +77,6 @@ export default class App extends Component {

setModalVisible = (visible, itemData, isNew) => {
this.setState({modalVisible: visible, itemData: itemData, isNewContact: isNew});
// setTimeout(() => {
// this.setState({modalVisible: false});
// }, 3000);
}

saveInput = (val) => {
Expand All @@ -103,7 +86,6 @@ export default class App extends Component {
}

render () {
let index;
return (
<View style={{flexDirection: 'column', flex: 1}}>
<StatusBar hidden />
Expand All @@ -118,8 +100,8 @@ export default class App extends Component {
inputData={this.saveInput}
/>

<View style={{height: 55, marginTop: -5, backgroundColor: '#67B826', justifyContent: "space-between", alignItems: 'center', flexDirection: 'row'}}>
<Text style={{color: 'white', fontWeight: 'bold', fontSize: 22, marginLeft: 10,}}>Contact List</Text>
<View style={styles.header}>
<Text style={styles.headerText}>Contact List</Text>
<TouchableOpacity onPress={this.rearrangeLayout}>
<Image style={{resizeMode: 'center', height: '100%', marginRight: 10}} source={require('./images/menu.png')}/>
</TouchableOpacity>
Expand All @@ -144,7 +126,6 @@ export default class App extends Component {
</ScrollView>

<View style={styles.button}>
{/* <FancyButton toggleModal={this.setModalVisible} title={'ADD CONTACT'} disabled={false}/> */}
<FancyButton onPress={()=> this.setModalVisible(true, {}, true)} title={'ADD CONTACT'} disabled={false}/>
</View>
</View>
Expand All @@ -157,6 +138,20 @@ const styles = StyleSheet.create({
scrollView: {
backgroundColor: Colors.lighter,
},
header: {
height: 55,
marginTop: -5,
backgroundColor: '#67B826',
justifyContent: "space-between",
alignItems: 'center',
flexDirection: 'row'
},
headerText: {
color: 'white',
fontWeight: 'bold',
fontSize: 22,
marginLeft: 10
},
container: {
flex: 1,
flexDirection: 'column',
Expand Down
23 changes: 1 addition & 22 deletions components/ContactCard.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity, Image, Dimensions } from 'react-native';
import { View, Text, StyleSheet, TouchableOpacity, Image } from 'react-native';
import { Colors } from 'react-native/Libraries/NewAppScreen';

let screenWidth;
Expand All @@ -11,7 +11,6 @@ const ContactCard = (props) => {
backgroundColor: Colors.dark,
borderRadius: 5,
height: 100,
// width: '100%',
width: props.screenWidth - 20,
flexDirection: 'row',
margin: 5,
Expand All @@ -28,7 +27,6 @@ const ContactCard = (props) => {
}
}
return (
// <TouchableOpacity style={props.isPortrait ? styles.cardP : styles.cardL}>
<TouchableOpacity style={this.dynamicStyle()} onPress={() => props.toggleModal(true, props.item, false)}>

<View style={{flexDirection: 'column', flex: 2, margin: 5}}>
Expand All @@ -55,25 +53,6 @@ const ContactCard = (props) => {
}

const styles = StyleSheet.create({
cardP: {
backgroundColor: Colors.dark,
// backgroundColor: "#88D840",
borderRadius: 5,
height: 100,
width: '100%',
flexDirection: 'row',
margin: 5,
},
cardL: {
backgroundColor: Colors.dark,
// backgroundColor: "#88D840",
borderRadius: 5,
height: 100,
// width: Dimensions.get('window').width / 1.8,
width: screenWidth,
flexDirection: 'row',
margin: 5,
},
smallText: {
color: '#ffffff',
},
Expand Down
24 changes: 1 addition & 23 deletions components/FancyButton.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import React, {Component} from 'react';
import { View, Text, StyleSheet, TouchableOpacity, Touchable, TouchableHighlight, Image, TouchableWithoutFeedback } from 'react-native';
import { Colors } from 'react-native/Libraries/NewAppScreen';
import { View, Text, StyleSheet, TouchableWithoutFeedback } from 'react-native';

export default class FancyButton extends Component {
constructor() {
Expand All @@ -10,13 +9,6 @@ export default class FancyButton extends Component {
};
}

// _onHideUnderlay(){
// this.setState({ pressStatus: false });
// }
// _onShowUnderlay(){
// this.setState({ pressStatus: true });
// }

render() {
const {
onPress,
Expand All @@ -26,24 +18,10 @@ export default class FancyButton extends Component {
} = this.props;

return (
// <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 style={this.state.pressStatus ? styles.buttonPressed : styles.button}>
<Text style={{color: 'white'}} disabled={disabled}>{title}</Text>
Expand Down
15 changes: 13 additions & 2 deletions components/Modal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,15 +33,15 @@ export default class CustomModal extends Component {
<View style={styles.wrapper}>
<View style={dynamicStyle()}>

<TouchableOpacity style={{alignItems: 'flex-end', justifyContent: 'center', height: 50}} onPress={() => {toggleModal(false, {})}}>
<TouchableOpacity style={styles.closebtn} onPress={() => {toggleModal(false, {})}}>
<Image style={{height: 20, width: 20, marginRight: 15}} source={require('../images/close.png')}/>
</TouchableOpacity>

<View style={{flexDirection: 'column'}}>

{isNewContact ? <InputForm inputData={inputData} closeModal={toggleModal}/> : <ContactDetails itemData={itemData}/>}

<View style={{flex: 1, justifyContent: "flex-end", alignItems: 'center', width: '100%'}}>
<View style={styles.userPhoto}>
<Image style={{resizeMode: 'center', height: 100, width: 100, borderRadius: 100}} source={require('../images/placeholder.png')}/>
</View>
</View>
Expand Down Expand Up @@ -81,4 +81,15 @@ const styles = StyleSheet.create({
backgroundColor: Colors.lighter,
borderRadius: 5,
},
closebtn : {
alignItems: 'flex-end',
justifyContent: 'center',
height: 50
},
userPhoto: {
flex: 1,
justifyContent: "flex-end",
alignItems: 'center',
width: '100%'
}
});

0 comments on commit 661b2eb

Please sign in to comment.