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 {
View,
Dimensions,
} from 'react-native';
import colors from './colors';
import colors from '../colors';
import { material } from 'react-native-typography';
const { height } = Dimensions.get('window');
......@@ -220,4 +220,5 @@ ActionButton.propTypes = {
onPress: PropTypes.func.isRequired,
};
export default MaterialDialog;
\ No newline at end of file
import React, { Component } from 'react';
import { StyleSheet, Text, View, Alert, TouchableHighlight, Image, FlatList, TouchableHighlightBase } from 'react-native';
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 MaterialDialog from './DetailedCard';
import { showDestination } from '../../actions/DestinationAction'
class Card extends Component {
state ={
data: [],
dataElement: "",
visible: false,
favourite: "",
label: "SAVE AS FAVOURITE",
currentSerachWord: "all"
}
componentWillMount(){
this.checkSearchWord()
_retrieveFavourite().then((res) => this.setState({favourite: res}))
}
setData(input) {
......@@ -30,10 +37,39 @@ class Card extends Component {
//console.log("Henter etter søkeord: ", this.props.word)
this.setData(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(){
......@@ -62,6 +98,7 @@ class Card extends Component {
}
})
const { data } = this.state
const { dataElement } = this.state
if (this.state.currentSerachWord.toLowerCase() !== this.props.word.toLowerCase()){
this.setState({ currentSerachWord: this.props.word})
......@@ -69,11 +106,13 @@ class Card extends Component {
}
return (
<View>
<FlatList contentContainerStyle={{
width: 350
width: 350,
paddingBottom: 85
}}
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><Image style={styles.Image} source={{uri: item.img}}/></View>
<View><Text style = {styles.name}> {item.name} </Text></View>
......@@ -84,9 +123,32 @@ class Card extends Component {
maxToRenderPerBatch = {10}
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
......@@ -97,4 +159,4 @@ const mapStateToProps = (state) => { //give us accsess to the data in store
}
};
export default connect(mapStateToProps)(Card);
\ No newline at end of file
export default connect(mapStateToProps, mapDispatchToProps)(Card);
\ No newline at end of file
......@@ -3,8 +3,8 @@ import { StyleSheet, Text, View, TouchableHighlight, Image, FlatList, Alert } fr
import { connect } from 'react-redux';
import { GetData, UpdatePopulatiry, _retrieveFavourite, _storeFavourite, _removeFavourite } from '../../api/fetchers'
import { ScrollView } from 'react-native-gesture-handler';
import MaterialDialog from '../DetailedCard';
import {showDestination} from '../../actions/DestinationAction'
import MaterialDialog from './DetailedCard';
import { showDestination } from '../../actions/DestinationAction'
class Card extends Component {
......@@ -39,13 +39,11 @@ class Card extends Component {
if(okLabel == "SAVE AS FAVOURITE"){
setTimeout(()=>{Alert.alert(name + " was set as favourite location")}, 1000)
_storeFavourite(destinationID).then((res) => this.setState({favourite: res}))
this.props.setFavourite(destinationID)
}
else if(okLabel == "REMOVE AS FAVOURITE"){
setTimeout(()=>{Alert.alert(name + " was removed as favourite location")}, 1000)
_removeFavourite().then(() => this.setState({favourite: ""}))
this.props.setFavourite("")
}
}
......@@ -104,7 +102,7 @@ class Card extends Component {
<View>
<FlatList contentContainerStyle={{
width: 350,
paddingBottom: 65
paddingBottom: 80
}}
data = {data}
renderItem = { ({ item }) => (
......@@ -119,7 +117,6 @@ class Card extends Component {
maxToRenderPerBatch = {10}
windowSize = {5}
keyExtractor={(item, index) => index.toString()}
//updateCellsBatchingPeriod = {10}
/>
<MaterialDialog
......
......@@ -34,6 +34,8 @@ class FavouritePage extends Component {
backgroundColor: 'aliceblue'
},
})
console.log(this.state.favourite)
return (
<View style={styles.container}>
<Text style={{fontSize: 28, textAlign: "center", padding: 8}}>Your favourite destination</Text>
......
......@@ -6,7 +6,7 @@ import rootReducer from '../reducers/';
import thunk from 'redux-thunk'
import { connect } from 'react-redux';
import { setPage } from '../actions/SetPageAction';
import { MaterialDialog } from '../components/DetailedCard'
import { MaterialDialog } from '../components/Cards/DetailedCard'
const store = createStore(rootReducer, applyMiddleware(thunk))
......@@ -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>
<Card />
</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