Merge branch 'backend' into 'master'

Backend

See merge request !10

frontend/actions/SetPageAction.js

 export const setPage = (page) => {
     return (dispatch, getState) => {
-        console.log("INNI ACTION med page: ", page)
+        //console.log("INNI ACTION med page: ", page)
         dispatch({
             type: 'SET_PAGE', page
             

frontend/api/fetchers.js

-import Axios from "axios"
-
-
-
+import axios from "axios"
 
 const createURL = (input) => {
     const API_URL = "http://it2810-10.idi.ntnu.no:3001/api/"
@@ -12,22 +9,19 @@ const createURL = (input) => {
         return API_URL + "search/" +  input
     }
     if(typeof input == 'number'){
-
         return API_URL + "fiveMostPopular"
     }
 }
 
-export const GetData = (input) => {
+export const GetData = async (input) => {
     const url = createURL(input)
-    console.log("Her er url: ",url)
-    return Axios.get(url); 
+    return await axios.get(url).catch((err) => {console.log("Error from axios: ", err)})
 }
 
-/*
-const UpdatePopulatiry =(destinationID, newPopularity) => {
-    Axios.post(API_URL + "updateData", {
+
+export const UpdatePopulatiry =(destinationID, newPopularity) => {
+    axios.post("http://it2810-10.idi.ntnu.no:3001/api/updateData", {
         id: destinationID,
         update: { popularity: newPopularity },
     })
 }
-*/
\ No newline at end of file

frontend/components/Card.js

 import React, { Component } from 'react';
-import { StyleSheet, Text, View, Alert, TouchableHighlight, Image } from 'react-native';
+import { StyleSheet, Text, View, Alert, TouchableHighlight, Image, Dimensions } from 'react-native';
 import { connect } from 'react-redux';
-import { GetData } from '../api/fetchers'
+import { GetData, UpdatePopulatiry } from '../api/fetchers'
+import { ScrollView } from 'react-native-gesture-handler';
+
 
 class Card extends Component {
     state ={
         data: [],
     }
 
-    componentDidMount(){
+    componentWillMount(){
         this.checkPage()
     }
 
+    setData(input) {
+        GetData(input).then((res) => this.setState({data: res.data.data}))
+    }
 
     checkPage(){
         if(this.props.page === "Home"){
-            var locations = GetData(5)
-            locations.then((data) => {console.log(data);this.setState({data: data})})
-            
-
+            this.setData(5)
+        if(this.props.page === "Explore"){
+            if(this.props.word === "all"){
+                if(this.props.continent === 'all'){
+                    this.setData()
+                }else{
+                    this.setData(this.props.continent)}
+            }else if(this.props.continent === 'all'){
+                this.setData(this.props.word)
+            }else{this.setData(this.props.continent + "/" + this.props.word)}
+        }
         }
     }
+
     
     
     render(){
+
         const styles = StyleSheet.create({
             container: {
                 borderRadius: 7,
@@ -35,32 +49,42 @@ class Card extends Component {
                 backgroundColor: 'white',
                 margin: 10,
                 padding: 10,
-                alignItems: "center"
+                alignItems: "center",
+                height: 250,
+            },
+            Image: {
+                width: 300,
+                height: 200,
+                resizeMode: 'contain',
+                alignSelf: "center"
             }
         })
         const { data } = this.state
-
+        console.log(data)
+        const dataCards = data.map(dat => {
+            return (
+                <TouchableHighlight key={dat._id} underlayColor = 'white' onPress = {() => Alert.alert("HEI")}>
+                    <View style = {styles.container}>
+                        <View><Image style={styles.Image} source={{uri: dat.img}}/></View>
+                        <View><Text> {dat.name} </Text></View>
+                    </View>
+                </TouchableHighlight>
+            );
+        })
         return(
-            <View>
-                {data.map(dat => {
-                    <TouchableHighlight underlayColor = 'transparent' onPress = {() => Alert.alert("HEI")}>
-                        <View style = {styles.container}> 
-                            <View><Image source={{uri: dat.img}}/></View>
-                            <View><Text> {dat.name} </Text></View>
-                        </View>
-                    </TouchableHighlight>
-                })}
-                
-        
-            </View>
-            
+            <ScrollView>
+                {dataCards}
+            </ScrollView>
         )}
-}
+    }
+
 
 const mapStateToProps = (state) => { //give us accsess to the data in store
 
     return {
       page: state.page.page,
+      word: state.filter.searchWord,
+      continent: state.filter.continent
     }
   };
 

frontend/pages/HomePage.js

 import React, { Component } from 'react';
-import { Text, View } from 'react-native';
+import { Text, View, ScrollView } from 'react-native';
 import Card from '../components/Card'
 import { createStore, applyMiddleware } from 'redux';
 import rootReducer from '../reducers/';
@@ -18,15 +18,15 @@ class HomePage extends Component{
 
     render(){
         return(
-            <View style={{
+            <ScrollView style={{
                 padding: 36,  
                 flex: 1
               }}>
                 <Text style={{fontSize: 28, textAlign: "center", padding: 8}}>Welcome to Dream Destinations</Text>
                 <Text style={{fontSize: 20, textAlign: "center", padding: 8}}>Click here to see a wordcloud showing the most popular locations</Text>
                 <Text style={{fontSize: 16, textAlign: "center", padding: 8}}>Below you see the five most popular places</Text>
-                <Card />
-            </View>
+                <Card/>
+            </ScrollView>
            /*
             
            <Provider store = {store}>