Merge branch 'ExploreCard' into 'master'

#12 ExploreCard updated

See merge request !18

frontend/components/DetailedCard.js → frontend/components/Cards/DetailedCard.js

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

frontend/components/Cards/ExploreCard.js

 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,11 +37,40 @@ 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(){
         const styles = StyleSheet.create({
@@ -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

frontend/components/Cards/HomeCard.js

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

frontend/pages/FavouritePage.js

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

frontend/pages/HomePage.js

@@ -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>
-           */
         )
     }
 }