Commit 3cf02511 authored by Hedda's avatar Hedda
Browse files

#8 saves favourite and displays it in new tab

parent 2d178387
......@@ -4,6 +4,7 @@ import { createAppContainer, NavigationEvents } from 'react-navigation';
import { Icon } from 'react-native-elements';
import HomePage from './pages/HomePage';
import ExplorePage from './pages/ExplorePage';
import FavouritePage from './pages/FavouritePage';
import { createStore, applyMiddleware } from 'redux';
import rootReducer from './reducers/index'
import { Provider } from 'react-redux';
......@@ -25,7 +26,12 @@ const TabNavigator = createBottomTabNavigator(
navigationOptions: {
tabBarIcon: <Icon name = "search" size = {36} />
},
}
},
Favourite: { screen: FavouritePage,
navigationOptions: {
tabBarIcon: <Icon name = "favorite" size = {36} />
},
}
},
{tabBarOptions: {
activeBackgroundColor : '#3f51b5',
......
......@@ -8,6 +8,7 @@ const createURL = (input, sorting) => {
if(input == ""){
return API_URL +"getData/" + sorting
}
// both id and search are strings so check if it contains numbers, than it is an id
if(typeof input == 'string'){
var hasNumber = /\d/;
if(hasNumber.test(input)){
......@@ -24,20 +25,47 @@ const createURL = (input, sorting) => {
// Creates proper URL and fetches the data with axios
export const GetData = async (input, sorting) => {
var url = createURL(input, sorting)
console.log(url)
return await axios.get(url).catch((err) => {console.log("Error from axios: ", err)})
}
// Update function for when a card is clicked
// Updates the populatiry of that destination
export const UpdatePopulatiry =(destinationID, newPopularity) => {
export const UpdatePopulatiry = (destinationID, newPopularity) => {
axios.post("http://it2810-10.idi.ntnu.no:3001/api/updateData", {
id: destinationID,
update: { popularity: newPopularity },
})
}
export const _updateStorage = async () => {
const response = await AsyncStorage.getItem('favourites')
return await JSON.parse(response) || []
// Methods to store and retrieve the users favourite location
export const _retrieveFavourite = async () => {
try {
const response = await AsyncStorage.getItem('favourite');
if (response !== null) {
// We have data!!
console.log("The users favourite is",response);
return response
}
} catch (error) {
// Error retrieving data
}
}
export const _storeFavourite= async (destinationID) => {
try {
await AsyncStorage.setItem('favourite', destinationID);
return _retrieveFavourite()
} catch (error) {
// Error saving data
}
}
export const _removeFavourite = async () => {
try {
await AsyncStorage.removeItem('favourite');
} catch (error) {
// Error saving data
}
}
import React, { Component } from 'react';
import { StyleSheet, Text, View, TouchableHighlight, Image, FlatList } from 'react-native';
import { StyleSheet, Text, View, TouchableHighlight, Image, FlatList, Alert } 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 MaterialDialog from '../DetailedCard';
import {showDestination} from '../../actions/DestinationAction'
class Card extends Component {
state ={
data: [],
dataElement: "",
visible: false,
favouriteItems: []
favourite: "",
label: "SAVE AS FAVOURITE"
}
componentWillMount(){
this.setData(5)
_retrieveFavourite().then((res) => this.setState({favourite: res}))
}
setData(input) {
......@@ -30,14 +34,29 @@ class Card extends Component {
}
addFavourite(destinationID, name){
//this.setState({visible: false})
//Alert.alert(name, "added to favourites")
addFavourite(destinationID, name, okLabel){
this.setState({visible: false})
setTimeout(()=>{Alert.alert(name + " was added to favourites")}, 1000)
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("")
}
}
isFavourite(destinationID){
if(destinationID == this.state.favourite){
return "REMOVE AS FAVOURITE"
}
return "SAVE AS FAVOURITE"
}
render(){
const styles = StyleSheet.create({
......@@ -81,7 +100,6 @@ class Card extends Component {
const { data } = this.state
const { dataElement } = this.state
return (
<View>
<FlatList contentContainerStyle={{
......@@ -103,13 +121,16 @@ class Card extends Component {
keyExtractor={(item, index) => index.toString()}
//updateCellsBatchingPeriod = {10}
/>
<MaterialDialog
title={dataElement.name}
scrolled
visible={this.state.visible}
onOk={() => {console.log("Favourite was pressed"); this.addFavourite(dataElement._id, dataElement.name)}}
onCancel={() => {console.log("Cancel was pressed"); this.setState({visible: false})}}
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}}/>
......@@ -128,7 +149,7 @@ const mapStateToProps = (state) => { //give us accsess to the data in store
word: state.filter.searchWord,
continent: state.filter.continent,
destinationID: state.destination.destinationID,
sort: state.sort.sortType
sort: state.sort.sortType,
}
};
......
......@@ -201,7 +201,7 @@ MaterialDialog.propTypes = {
};
MaterialDialog.defaultProps = {
okLabel: 'ADD TO FAVOURITE',
okLabel: 'SAVE AS FAVOURITE',
cancelLabel: 'CLOSE',
title: undefined,
titleColor: colors.androidPrimaryTextColor,
......
......@@ -40,8 +40,10 @@ class SearchBox extends Component {
this.search = this.search.bind(this)
this.handleSearchWord = this.handleSearchWord.bind(this)
const inputfield = {
backgroundColor: '#EEEEEE',
backgroundColor: 'white',
borderRadius: 10,
borderWidth: 1,
borderColor: 'grey',
padding: 3,
flex: 1
}
......
......@@ -26,8 +26,9 @@ class ExplorePage extends Component {
container: {
flexDirection: "column",
alignItems: "center",
marginTop: 50,
flex: 1
paddingTop: 50,
flex: 1,
backgroundColor: 'aliceblue'
},
header: {
......@@ -40,6 +41,7 @@ class ExplorePage extends Component {
<SearchBox />
<Card />
</View>
)
}
}
......
import React, { Component } from 'react';
import { View, Text, StyleSheet, Image } from 'react-native';
import { _retrieveFavourite, GetData } from '../api/fetchers'
class FavouritePage extends Component {
state = {
favourite: "",
dataElement: ""
}
componentDidMount(){
_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() {
const { dataElement } = this.state
const styles = StyleSheet.create({
image:{
width: 400,
height: 300,
resizeMode: 'contain',
alignSelf: "center",
},
container: {
flexDirection: "column",
alignItems: "center",
paddingTop: 50,
flex: 1,
backgroundColor: 'aliceblue'
},
})
return (
<View style={styles.container}>
<Text style={{fontSize: 28, textAlign: "center", padding: 8}}>Your favourite destination</Text>
<Text style={{fontSize: 20, textAlign: "center", padding: 8}}>{dataElement.name}</Text>
<Text style={{fontSize: 16, textAlign: "center", padding: 8}}>{dataElement.country}/{dataElement.continent}</Text>
<Image style={styles.image} source={{uri: dataElement.img}}></Image>
<Text style={{fontSize: 16, textAlign: "center", padding: 8}}>{dataElement.description}</Text>
<Text style={{fontSize: 12, textAlign: "center", padding: 8}}>The description collected is from {dataElement.source}</Text>
</View>
);
}
}
export default FavouritePage;
\ No newline at end of file
......@@ -27,7 +27,8 @@ class HomePage extends Component {
paddingTop: 36,
flex: 1,
flexDirection: "column",
alignItems: "center"
alignItems: "center",
backgroundColor: 'aliceblue'
}}>
<Text style={{fontSize: 28, textAlign: "center", padding: 8}}>Welcome to Dream Destinations</Text>
<Text style={{fontSize: 16, textAlign: "center", padding: 8}}>Below you see the five most popular places</Text>
......
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