Commit 4a212967 authored by Solveig Hergot Langås's avatar Solveig Hergot Langås
Browse files

#12 ExploreCard updated

parent f0c06447
...@@ -11,7 +11,7 @@ import { ...@@ -11,7 +11,7 @@ import {
View, View,
Dimensions, Dimensions,
} from 'react-native'; } from 'react-native';
import colors from './colors'; import colors from '../colors';
import { material } from 'react-native-typography'; import { material } from 'react-native-typography';
const { height } = Dimensions.get('window'); const { height } = Dimensions.get('window');
...@@ -220,4 +220,5 @@ ActionButton.propTypes = { ...@@ -220,4 +220,5 @@ ActionButton.propTypes = {
onPress: PropTypes.func.isRequired, onPress: PropTypes.func.isRequired,
}; };
export default MaterialDialog; export default MaterialDialog;
\ No newline at end of file
import React, { Component } from 'react'; import React, { Component } from 'react';
import { StyleSheet, Text, View, Alert, TouchableHighlight, Image, FlatList, TouchableHighlightBase } from 'react-native'; import { StyleSheet, Text, View, Alert, TouchableHighlight, Image, FlatList, TouchableHighlightBase } from 'react-native';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { GetData, UpdatePopulatiry } from '../../api/fetchers' import { GetData, UpdatePopulatiry, _retrieveFavourite, _storeFavourite, _removeFavourite } from '../../api/fetchers'
import { ScrollView } from 'react-native-gesture-handler'; import { ScrollView } from 'react-native-gesture-handler';
import MaterialDialog from './DetailedCard';
import { showDestination } from '../../actions/DestinationAction'
class Card extends Component { class Card extends Component {
state ={ state ={
data: [], data: [],
dataElement: "",
visible: false,
favourite: "",
label: "SAVE AS FAVOURITE",
currentSerachWord: "all" currentSerachWord: "all"
} }
componentWillMount(){ componentWillMount(){
this.checkSearchWord() this.checkSearchWord()
_retrieveFavourite().then((res) => this.setState({favourite: res}))
} }
setData(input) { setData(input) {
...@@ -30,11 +37,40 @@ class Card extends Component { ...@@ -30,11 +37,40 @@ class Card extends Component {
//console.log("Henter etter søkeord: ", this.props.word) //console.log("Henter etter søkeord: ", this.props.word)
this.setData(this.props.word) this.setData(this.props.word)
} else {this.setData(this.props.continent + "/" + this.props.word)} } else {this.setData(this.props.continent + "/" + this.props.word)}
console.log(this.state.data)
} }
openDetailedCard(destinationID, popularity){
GetData(destinationID, "").then((res) => this.setState({dataElement: res.data.data}))
this.setState({visible: true})
this.props.showDestination(destinationID);
newPop = popularity + 1
UpdatePopulatiry(destinationID, newPop);
}
addFavourite(destinationID, name, okLabel){
this.setState({visible: false})
if(okLabel == "SAVE AS FAVOURITE"){
setTimeout(()=>{Alert.alert(name + " was set as favourite location")}, 1000)
_storeFavourite(destinationID).then((res) => this.setState({favourite: res}))
}
else if(okLabel == "REMOVE AS FAVOURITE"){
setTimeout(()=>{Alert.alert(name + " was removed as favourite location")}, 1000)
_removeFavourite().then(() => this.setState({favourite: ""}))
}
}
isFavourite(destinationID){
if(destinationID == this.state.favourite){
return "REMOVE AS FAVOURITE"
}
return "SAVE AS FAVOURITE"
}
render(){ render(){
const styles = StyleSheet.create({ const styles = StyleSheet.create({
...@@ -62,6 +98,7 @@ class Card extends Component { ...@@ -62,6 +98,7 @@ class Card extends Component {
} }
}) })
const { data } = this.state const { data } = this.state
const { dataElement } = this.state
if (this.state.currentSerachWord.toLowerCase() !== this.props.word.toLowerCase()){ if (this.state.currentSerachWord.toLowerCase() !== this.props.word.toLowerCase()){
this.setState({ currentSerachWord: this.props.word}) this.setState({ currentSerachWord: this.props.word})
...@@ -69,11 +106,13 @@ class Card extends Component { ...@@ -69,11 +106,13 @@ class Card extends Component {
} }
return ( return (
<View>
<FlatList contentContainerStyle={{ <FlatList contentContainerStyle={{
width: 350 width: 350,
paddingBottom: 85
}} }}
data = {data} data = {data}
renderItem = { ({ item }) => (<TouchableHighlight key={item._id} underlayColor = 'white' onPress = {() => Alert.alert( item.description )}> renderItem = { ({ item }) => (<TouchableHighlight key={item._id} underlayColor = 'white' onPress = {() => this.openDetailedCard(item._id, item.popularity)}>
<View style = {styles.container}> <View style = {styles.container}>
<View><Image style={styles.Image} source={{uri: item.img}}/></View> <View><Image style={styles.Image} source={{uri: item.img}}/></View>
<View><Text style = {styles.name}> {item.name} </Text></View> <View><Text style = {styles.name}> {item.name} </Text></View>
...@@ -84,9 +123,32 @@ class Card extends Component { ...@@ -84,9 +123,32 @@ class Card extends Component {
maxToRenderPerBatch = {10} maxToRenderPerBatch = {10}
windowSize = {5} windowSize = {5}
/> />
<MaterialDialog
title={dataElement.name}
scrolled
visible={this.state.visible}
okLabel = {this.isFavourite(dataElement._id)}
onOk={() => {this.addFavourite(dataElement._id, dataElement.name, this.isFavourite(dataElement._id))}}
onCancel={() => {this.setState({visible: false})}}
>
<ScrollView contentContainerStyle={styles.scrollViewContainer}>
<View style={styles.row}>
<Image style={styles.Image} source={{uri: dataElement.img}}/>
<Text style={styles.text}>{dataElement.description}</Text>
</View>
</ScrollView>
</MaterialDialog>
</View>
)} )}
} }
const mapDispatchToProps = (dispatch) => {
return {
showDestination: (destinationID) => dispatch(showDestination(destinationID)),
}
};
const mapStateToProps = (state) => { //give us accsess to the data in store const mapStateToProps = (state) => { //give us accsess to the data in store
...@@ -97,4 +159,4 @@ const mapStateToProps = (state) => { //give us accsess to the data in store ...@@ -97,4 +159,4 @@ const mapStateToProps = (state) => { //give us accsess to the data in store
} }
}; };
export default connect(mapStateToProps)(Card); export default connect(mapStateToProps, mapDispatchToProps)(Card);
\ No newline at end of file \ No newline at end of file
...@@ -3,8 +3,8 @@ import { StyleSheet, Text, View, TouchableHighlight, Image, FlatList, Alert } fr ...@@ -3,8 +3,8 @@ import { StyleSheet, Text, View, TouchableHighlight, Image, FlatList, Alert } fr
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { GetData, UpdatePopulatiry, _retrieveFavourite, _storeFavourite, _removeFavourite } from '../../api/fetchers' import { GetData, UpdatePopulatiry, _retrieveFavourite, _storeFavourite, _removeFavourite } from '../../api/fetchers'
import { ScrollView } from 'react-native-gesture-handler'; import { ScrollView } from 'react-native-gesture-handler';
import MaterialDialog from '../DetailedCard'; import MaterialDialog from './DetailedCard';
import {showDestination} from '../../actions/DestinationAction' import { showDestination } from '../../actions/DestinationAction'
class Card extends Component { class Card extends Component {
...@@ -39,13 +39,11 @@ class Card extends Component { ...@@ -39,13 +39,11 @@ class Card extends Component {
if(okLabel == "SAVE AS FAVOURITE"){ if(okLabel == "SAVE AS FAVOURITE"){
setTimeout(()=>{Alert.alert(name + " was set as favourite location")}, 1000) setTimeout(()=>{Alert.alert(name + " was set as favourite location")}, 1000)
_storeFavourite(destinationID).then((res) => this.setState({favourite: res})) _storeFavourite(destinationID).then((res) => this.setState({favourite: res}))
this.props.setFavourite(destinationID)
} }
else if(okLabel == "REMOVE AS FAVOURITE"){ else if(okLabel == "REMOVE AS FAVOURITE"){
setTimeout(()=>{Alert.alert(name + " was removed as favourite location")}, 1000) setTimeout(()=>{Alert.alert(name + " was removed as favourite location")}, 1000)
_removeFavourite().then(() => this.setState({favourite: ""})) _removeFavourite().then(() => this.setState({favourite: ""}))
this.props.setFavourite("")
} }
} }
...@@ -104,7 +102,7 @@ class Card extends Component { ...@@ -104,7 +102,7 @@ class Card extends Component {
<View> <View>
<FlatList contentContainerStyle={{ <FlatList contentContainerStyle={{
width: 350, width: 350,
paddingBottom: 65 paddingBottom: 80
}} }}
data = {data} data = {data}
renderItem = { ({ item }) => ( renderItem = { ({ item }) => (
...@@ -119,7 +117,6 @@ class Card extends Component { ...@@ -119,7 +117,6 @@ class Card extends Component {
maxToRenderPerBatch = {10} maxToRenderPerBatch = {10}
windowSize = {5} windowSize = {5}
keyExtractor={(item, index) => index.toString()} keyExtractor={(item, index) => index.toString()}
//updateCellsBatchingPeriod = {10}
/> />
<MaterialDialog <MaterialDialog
......
...@@ -34,6 +34,8 @@ class FavouritePage extends Component { ...@@ -34,6 +34,8 @@ class FavouritePage extends Component {
backgroundColor: 'aliceblue' backgroundColor: 'aliceblue'
}, },
}) })
console.log(this.state.favourite)
return ( return (
<View style={styles.container}> <View style={styles.container}>
<Text style={{fontSize: 28, textAlign: "center", padding: 8}}>Your favourite destination</Text> <Text style={{fontSize: 28, textAlign: "center", padding: 8}}>Your favourite destination</Text>
......
...@@ -6,7 +6,7 @@ import rootReducer from '../reducers/'; ...@@ -6,7 +6,7 @@ import rootReducer from '../reducers/';
import thunk from 'redux-thunk' import thunk from 'redux-thunk'
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { setPage } from '../actions/SetPageAction'; import { setPage } from '../actions/SetPageAction';
import { MaterialDialog } from '../components/DetailedCard' import { MaterialDialog } from '../components/Cards/DetailedCard'
const store = createStore(rootReducer, applyMiddleware(thunk)) const store = createStore(rootReducer, applyMiddleware(thunk))
...@@ -34,12 +34,6 @@ class HomePage extends Component { ...@@ -34,12 +34,6 @@ class HomePage extends Component {
<Text style={{fontSize: 16, textAlign: "center", padding: 8}}>Below you see the five most popular places</Text> <Text style={{fontSize: 16, textAlign: "center", padding: 8}}>Below you see the five most popular places</Text>
<Card /> <Card />
</View> </View>
/*
<Provider store = {store}>
<Test/>
</Provider>
*/
) )
} }
} }
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment