Commit cbf2f1ba authored by Hedda's avatar Hedda
Browse files

#11 basic layout on front page

parent 692bb4b9
import React , { Component } from 'react';
import { Text, View } from 'react-native';
import React from 'react';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import { createAppContainer } from 'react-navigation';
import { Icon } from 'react-native-elements';
......@@ -10,12 +9,12 @@ import ExplorePage from './pages/ExplorePage';
const TabNavigator = createBottomTabNavigator(
{ Home: { screen: HomePage,
navigationOptions: {
tabBarIcon: <Icon name = "home" size = "40%" />,
tabBarIcon: <Icon name = "home" size = {36} />,
}
},
Explore: { screen: ExplorePage,
navigationOptions: {
tabBarIcon: <Icon name = "search" size = "40%" />
tabBarIcon: <Icon name = "search" size = {36} />
} }
},
{tabBarOptions: {
......
export const setData = (data) => {
return (dispatch, getState) => {
console.log("INNI ACTION")
dispatch({
type: 'SET_DATA', data
})
}
};
\ No newline at end of file
import Axios from "axios"
const API_URL = "http://it2810-10.idi.ntnu.no:3001/api/"
export function GetAllData() {
export const GetAllData = () => {
console.log("we're in")
fetch(API_URL + "getData")
.then((data) => data.json())
.then((res) => {
if(res.data){console.log("Should return data"); return res.data}
else{console.log("Empty")};
})
.then((res) => {console.log("Dette er dataen: \n", res.data);return res.data})
}
export const GetDataFromSearch = (search) => {
/*
const GetDataFromSearch = (search) => {
fetch(API_URL + "search/" + search)
.then((data) => data.json())
.then((res) => {return res.data})
.then((res) => {this.props.setData(res.data)})
.then(console.log("Satt data i redux"))
}
export const GetDataFromId = (destinationID) => {
const GetDataFromId = (destinationID) => {
fetch(API_URL + "getDataFrom/" + destinationID)
.then((data) => data.json())
.then((res) => {return res.data})
.then((res) => {this.props.setData(res.data)})
.then(console.log("Satt data i redux"))
}
export const UpdatePopulatiry = (destinationID, newPopularity) => {
/*
const UpdatePopulatiry =(destinationID, newPopularity) => {
Axios.post(API_URL + "updateData", {
id: destinationID,
update: { popularity: newPopularity },
})
}
const mapDispatchToProps = (dispatch) => {
return {
setData: (data) => dispatch(setData(data)),
showDestination: (destinationID) => dispatch(showDestination(destinationID)),
}
};
//export default connect(null, mapDispatchToProps)({GetAllData, GetDataFromSearch, GetDataFromId, UpdatePopulatiry})
//export default connect(null, mapDispatchToProps)(GetAllData)
*/
\ No newline at end of file
......@@ -19,7 +19,7 @@ class Card extends Component {
}
})
return(
<TouchableHighlight underlayColor = 'inherit' onPress = {() => Alert.alert("HEI")}>
<TouchableHighlight underlayColor = 'transparent' onPress = {() => Alert.alert("HEI")}>
<View style = {styles.container}>
<View><Text> Bildet her </Text></View>
<View><Text> Bynavn her </Text></View>
......
import React, { Component } from 'react';
import {GetAllData, GetDataFromSearch} from '../../backend/fetchers'
import { GetAllData } from '../api/fetchers';
import {View, Text} from 'react-native';
import { connect } from 'react-redux';
class Test extends Component {
......@@ -9,24 +10,30 @@ class Test extends Component {
}
componentDidMount() {
this.getDataFromDb()
var dataen = GetAllData()
//console.log(" ELHRGOIEHRGOIH", data)
this.setState({data: dataen})
}
getDataFromDb = () => {
this.setState({data: GetAllData()})
}
state = { }
render() {
return (
<View>
<Text>{console.log(this.state.data, "\n tjohei")}</Text>
{console.log(this.state.data, "\n tjohei")}
</View>
);
}
}
const mapStateToProps = (state) => { //give us accsess to the data in store
return {
data: state.data.data
}
}
export default Test;
\ No newline at end of file
export default connect(mapStateToProps)(Test);
\ No newline at end of file
import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Card from '../components/Card'
import Test from '../components/Test'
import { createStore, applyMiddleware } from 'redux';
import rootReducer from '../reducers/';
import { Provider } from 'react-redux'
import thunk from 'redux-thunk'
const store = createStore(rootReducer, applyMiddleware(thunk))
class HomePage extends Component{
render(){
return(
<Card />
<View 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/>
<Card/>
</View>
/*
<Provider store = {store}>
<Test/>
</Provider>
*/
)
}
}
......
......@@ -5,6 +5,7 @@ const initState = {
const setDataReducer = (state = initState, action) => {
switch(action.type) {
case 'SET_DATA':
console.log("HEIHEIEHI ", action.data)
return{data: action.data}
default: return state;
};
......
This diff is collapsed.
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