Merge branch 'favourite-asyncstorage' into 'master'

Favourite asyncstorage

See merge request !17

frontend/App.js

@@ -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',

frontend/api/fetchers.js

 import axios from "axios"
+import { AsyncStorage } from "react-native";
 
 // Checks what the input is, and returns the correct fetch-URL
 // based on the input. 
@@ -7,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)){
@@ -23,15 +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 },
     })
 }
+
+
+// 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
+      }
+  }
+
+

frontend/components/Cards/HomeCard.js

 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
+        visible: false,
+        favourite: "",
+        label: "SAVE AS FAVOURITE"
     }
 
     componentWillMount(){
         this.setData(5)
+        _retrieveFavourite().then((res) => this.setState({favourite: res}))
     }
 
     setData(input) {
@@ -26,13 +31,33 @@ class Card extends Component {
         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}))
+            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({
             container: {
@@ -75,7 +100,6 @@ class Card extends Component {
 
         const { data } = this.state
         const { dataElement } = this.state
-        
         return (
             <View>
                 <FlatList contentContainerStyle={{
@@ -97,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("OK was pressed"); this.setState({visible: false})}}
-                    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}}/>
@@ -122,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,
     }
 };
 

frontend/components/DetailedCard.js

@@ -201,7 +201,7 @@ MaterialDialog.propTypes = {
 };
 
 MaterialDialog.defaultProps = {
-  okLabel: 'ADD TO FAVOURITE',
+  okLabel: 'SAVE AS FAVOURITE',
   cancelLabel: 'CLOSE',
   title: undefined,
   titleColor: colors.androidPrimaryTextColor,

frontend/components/SearchBox.js

@@ -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
         }

frontend/pages/ExplorePage.js

@@ -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>
+            
         )
     }
 }

frontend/pages/FavouritePage.js

+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

frontend/pages/HomePage.js

@@ -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>