Commit 9c8cc771 authored by Solveig Hergot Langås's avatar Solveig Hergot Langås
Browse files

#23 The Favourite Page will now update when the user changes their favourite

parent 3b0bc82f
export const addFavourite = (fav) => {
return (dispatch, getState) => {
console.log("Favourite action")
console.log(fav)
dispatch({
type: 'ADD_FAVOURITE', fav
......
......@@ -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');
......
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';
import { addFavourite } from '../../actions/AddFavouriteAction';
import { removeFavourite } from '../../actions/AddFavouriteAction';
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,11 +39,42 @@ 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.props.addFavourite(res))
}
else if(okLabel == "REMOVE AS FAVOURITE"){
setTimeout(()=>{Alert.alert(name + " was removed as favourite location")}, 1000)
_removeFavourite().then(() => this.props.removeFavourite)
}
this.setState({ favourite : this.props.fav })
}
isFavourite(destinationID){
if(destinationID == this.props.fav){
return "REMOVE AS FAVOURITE"
}
return "SAVE AS FAVOURITE"
}
render(){
const styles = StyleSheet.create({
......@@ -62,6 +102,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 +110,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,23 +127,42 @@ 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)),
addFavourite: (fav) => dispatch(addFavourite(fav)),
removeFavourite: () => dispatch(removeFavourite)
}
};
const mapStateToProps = (state) => { //give us accsess to the data in store
return {
word: state.filter.searchWord,
continent: state.filter.continent
}
};
const mapDispatchToProps = (dispatch) => {
return {
addFavourite: (fav) => dispatch(addFavourite(fav)),
removeFavourite: () => dispatch(removeFavourite())
continent: state.filter.continent,
fav: state.favourite.favourite
}
};
export default connect(mapStateToProps)(Card);
\ No newline at end of file
export default connect(mapStateToProps, mapDispatchToProps)(Card);
......@@ -3,8 +3,10 @@ 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 MaterialDialog from './DetailedCard';
import {showDestination} from '../../actions/DestinationAction'
import { addFavourite } from '../../actions/AddFavouriteAction'
import { removeFavourite } from '../../actions/RemoveFavouriteAction'
class Card extends Component {
......@@ -38,20 +40,20 @@ class Card extends Component {
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}))
this.props.setFavourite(destinationID)
_storeFavourite(destinationID).then((res) => this.props.addFavourite(res))
}
else if(okLabel == "REMOVE AS FAVOURITE"){
setTimeout(()=>{Alert.alert(name + " was removed as favourite location")}, 1000)
_removeFavourite().then(() => this.setState({favourite: ""}))
this.props.setFavourite("")
_removeFavourite().then(() => this.props.removeFavourite())
}
this.setState({favourite: this.props.fav})
}
isFavourite(destinationID){
if(destinationID == this.state.favourite){
if(destinationID == this.props.fav){
return "REMOVE AS FAVOURITE"
}
return "SAVE AS FAVOURITE"
......@@ -149,6 +151,7 @@ const mapStateToProps = (state) => { //give us accsess to the data in store
continent: state.filter.continent,
destinationID: state.destination.destinationID,
sort: state.sort.sortType,
fav: state.favourite.favourite
}
};
......@@ -156,6 +159,8 @@ const mapStateToProps = (state) => { //give us accsess to the data in store
const mapDispatchToProps = (dispatch) => {
return {
showDestination: (destinationID) => dispatch(showDestination(destinationID)),
addFavourite: (fav) => dispatch(addFavourite(fav)),
removeFavourite: () => dispatch(removeFavourite())
}
};
......
import React, { Component } from 'react';
import { View, Text, StyleSheet, Image } from 'react-native';
import { _retrieveFavourite, GetData } from '../api/fetchers'
import { connect } from 'react-redux';
import { addFavourite } from '../actions/AddFavouriteAction'
class FavouritePage extends Component {
state = {
......@@ -9,14 +11,29 @@ class FavouritePage extends Component {
}
componentDidMount(){
_retrieveFavourite().then((res) => { this.props.addFavourite(res) })
this.checkFavorite()
//GetData(this.state.favourite, "").then((res) => this.setState({dataElement: res.data.data}))
}
checkFavorite(){
_retrieveFavourite().then((res) => {this.setState({favourite: res})});
setTimeout(()=>GetData(this.state.favourite, "").then((res) => this.setState({dataElement: res.data.data})), 20)
//GetData(this.state.favourite, "").then((res) => this.setState({dataElement: res.data.data}))
}
render() {
if (this.state.favourite !== this.props.fav) {
this.checkFavorite()
}
console.log("FRA REDUX: ", this.props.fav)
console.log("FRA STATE: ", this.state.favourite)
console.log(this.props.fav === this.state.favourite)
const { dataElement } = this.state
const styles = StyleSheet.create({
......@@ -49,4 +66,16 @@ class FavouritePage extends Component {
}
}
export default FavouritePage;
\ No newline at end of file
const mapStateToProps = (state) => { //give us accsess to the data in store
return {
fav: state.favourite.favourite
}
};
const mapDispatchToProps = (dispatch) => {
return {
addFavourite: (fav) => dispatch(addFavourite(fav))
}
};
export default connect(mapStateToProps, mapDispatchToProps)(FavouritePage);
\ No newline at end of file
......@@ -5,7 +5,7 @@ import { createStore, applyMiddleware } from 'redux';
import rootReducer from '../reducers/';
import thunk from 'redux-thunk'
import { connect } from 'react-redux';
import { MaterialDialog } from '../components/DetailedCard'
import { MaterialDialog } from '../components/Cards/DetailedCard'
const store = createStore(rootReducer, applyMiddleware(thunk))
......
......@@ -3,9 +3,11 @@ const initState = {
}
const favouriteReducer = (state = initState, action) => {
switch(action.type) {
switch(action.type) {
case 'ADD_FAVOURITE':
return{ favourite: action.favourite }
console.log("Add-favourite-reducer")
console.log(action.fav)
return{ favourite: action.fav }
case 'REMOVE_FAVOURITE':
return { favourite: "" }
default: return state;
......
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