Commit 92fd4bec authored by Hedda's avatar Hedda
Browse files

#13 & #20 Card object connected to database

parent 14fcec00
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
......
import axios from "axios"
const createURL = (input) => {
const API_URL = "http://localhost:3001/api/"
const API_URL = "http://it2810-10.idi.ntnu.no:3001/api/"
if(input == undefined){
return API_URL +"getData"
}
......@@ -16,12 +13,13 @@ const createURL = (input) => {
}
}
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", {
......
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 { 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){
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,
......@@ -34,32 +48,41 @@ 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
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
}
};
......
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,7 +18,7 @@ class HomePage extends Component{
render(){
return(
<View style={{
<ScrollView style={{
padding: 36,
flex: 1
}}>
......@@ -26,7 +26,7 @@ class HomePage extends Component{
<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>
</ScrollView>
/*
<Provider store = {store}>
......
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