-
-
Save mohamedhamdy2017/a28644caf3f99abae074c48ca72570a5 to your computer and use it in GitHub Desktop.
| import React, { Component } from 'react'; | |
| import { | |
| StyleSheet, | |
| Button, | |
| View, FlatList, Text | |
| } from 'react-native'; | |
| import PlacesInput from './components/PlacesInput' | |
| import PlaceList from './components/PlaceList' | |
| export default class App extends Component { | |
| state ={ | |
| placeName: '', | |
| places: [] | |
| } | |
| onEditHandler = val => { | |
| this.setState({ | |
| placeName: val | |
| }) | |
| } | |
| onAddHandler = () => { | |
| const { placeName } =this.state; | |
| if(this.state.placeName.trim() === ""){ | |
| return; | |
| } | |
| this.setState(prevState => { | |
| return{ | |
| places: prevState.places.concat({ | |
| key: Math.random(), | |
| value: placeName | |
| }) | |
| } | |
| }) | |
| } | |
| onDeleteHandler = key => { | |
| this.setState(prevState => { | |
| return{ | |
| places: prevState.places.filter((place) => { | |
| return key !== place.key | |
| }) | |
| } | |
| }) | |
| } | |
| render() { | |
| return ( | |
| <View> | |
| <View style={{flexDirection: 'row'}}> | |
| <PlacesInput | |
| title = "Add Here ..." | |
| value={this.state.placeName} | |
| onEdit={this.onEditHandler} | |
| /> | |
| <Button | |
| title="Add" | |
| onPress={this.onAddHandler} | |
| /> | |
| </View> | |
| <View> | |
| <PlaceList places={this.state.places} onItemDeleted={this.onDeleteHandler}/> | |
| </View> | |
| </View> | |
| ); | |
| } | |
| } |
import React, { Component } from 'react';
import { Button, View } from 'react-native';
import {connect} from 'react-redux'
import { addPlace, selectPlace, unSelectPlace, deletePlace} from '../action'
import PlacesInput from './PlacesInput'
import PlaceList from './PlaceList'
import PlaceDetail from './PlaceDetail'
class placeComponent extends Component {
state ={
places: [],
selectPlace: null
}
onEditHandler = val => {
this.setState({
placeName: val
})
}
onAddHandler = () => {
this.props.addPlace(placeName)
// const { placeName } =this.state;
// if(this.state.placeName.trim() === ""){
// return alert('Text is empty');
// }
// this.setState(prevState => {
// return{
// places: prevState.places.concat({
// key: Math.random(),
// name: placeName,
// image: placeImage
// })
// }
// })
}
onSelectHandler = () => {
this.props.selectPlace(key)
// this.setState(prevState => {
// return{
// selectPlace: prevState.places.find(place => {
// return place.key === key
// })
// }
// })
}
onDeleteHandler = () => {
this.props.deletePlace()
// this.setState(prevState => {
// return{
// places: prevState.places.filter(place => {
// return place.key !== prevState.selectPlace.key
// }),
// selectPlace: null
// }
// })
}
onModalColsedHandler = () => {
this.props.unSeletPlace()
// this.setState({
// selectPlace: null
// })
}
render() {
return (
<View style={{flexDirection: 'row'}}>
);
}
}
const mapStateToProps = state => {
const { places, selectPlace } = state.placeRed
return { places, selectPlace }
}
export default connect(mapStateToProps, {addPlace, selectPlace, unSelectPlace, deletePlace}) (placeComponent)
import React, { Component } from 'react';
import {Provider} from 'react-redux'
import {createStore, applyMiddleware } from 'redux'
import ReduxThunk from 'redux-thunk'
import reducer from './reducer';
import PlaceComponent from './components/PlaceComponent';
class App extends Component {
render() {
return (
<Provider store ={createStore(reducer, {} , applyMiddleware(ReduxThunk))}>
);
}
}
export default App