Commit 41642daa authored by Solveig Hergot Langås's avatar Solveig Hergot Langås
Browse files

test

parent ade72aac
......@@ -45,6 +45,7 @@ Destinations.find().sort({popularity: -1}).limit(5).exec(function(err, data){
router.get('/search/:word', (req, res, next) => {
const word = req.params.word.toLowerCase()
console.log("API: ", word)
Destinations.find({$or: [{'name': word}, {'country': word}, {'continent': word}]}, function (err, data){
if (err) return res.json({ success: false, error: err });
else{
......
import React from 'react';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import { createAppContainer } from 'react-navigation';
import { createBottomTabNavigator, BottomTabBar } from 'react-navigation-tabs';
import { createAppContainer, NavigationEvents } from 'react-navigation';
import { Icon } from 'react-native-elements';
import HomePage from './pages/HomePage';
import ExplorePage from './pages/ExplorePage';
......@@ -9,9 +9,14 @@ import rootReducer from './reducers/index'
import { Provider } from 'react-redux';
import thunk from 'redux-thunk';
import { View } from 'react-native'
import { setPage } from '../frontend/actions/SetPageAction';
import { connect } from 'react-redux';
const store = createStore(rootReducer, applyMiddleware(thunk))
const TabNavigator = createBottomTabNavigator(
{ Home: { screen: HomePage,
navigationOptions: {
......@@ -21,14 +26,41 @@ const TabNavigator = createBottomTabNavigator(
Explore: { screen: ExplorePage,
navigationOptions: {
tabBarIcon: <Icon name = "search" size = {36} />
} }
},
}
},
{tabBarOptions: {
activeBackgroundColor : '#3f51b5',
inactiveBackgroundColor : 'rgba(63, 81, 181, .5)',
showLabel : false,
}});
},/* resetOnBlur: true,*/
defaultNavigationOptions: ({navigation}) => ({
tabBarOnPress: ({ navigation , defaultHandler}) => {
console.log(navigation.state.routeName)
defaultHandler() }
}),
});
const mapDispatchToProps = (dispatch) => {
return {
setPage: (page) => dispatch(setPage(page))
}
};
const AppContainer = connect(mapDispatchToProps)(createAppContainer(TabNavigator))
const App = (props) => {
return (
<Provider store = {store}>
<View style = {{flex: 1}}>
<AppContainer style={{margin: 100}}>
</AppContainer>
</View>
</Provider>
)
}
const AppContainer = createAppContainer(TabNavigator)
export default () => (<Provider store = {store}><View style = {{flex: 1}}><AppContainer style={{margin: 100}}/></View></Provider>);
\ No newline at end of file
export default App;
\ No newline at end of file
......@@ -2,7 +2,9 @@ import axios from "axios"
const createURL = (input) => {
const API_URL = "http://it2810-10.idi.ntnu.no:3001/api/"
if(input == undefined){
console.log("INPUT: ", input)
if(input == ""){
console.log(API_URL)
return API_URL +"getData"
}
if(typeof input == 'string'){
......@@ -11,10 +13,13 @@ const createURL = (input) => {
if(typeof input == 'number'){
return API_URL + "fiveMostPopular"
}
console.log("hentet ingenting")
}
export const GetData = async (input) => {
const url = createURL(input)
console.log("URL: ", url)
return await axios.get(url).catch((err) => {console.log("Error from axios: ", err)})
}
......
import React, { Component } from 'react';
import { StyleSheet, Text, View, Alert, TouchableHighlight, Image, Dimensions } from 'react-native';
import { StyleSheet, Text, View, Alert, TouchableHighlight, Image, FlatList } from 'react-native';
import { connect } from 'react-redux';
import { GetData, UpdatePopulatiry } from '../api/fetchers'
import { ScrollView } from 'react-native-gesture-handler';
class Card extends Component {
state ={
data: [],
currentSerachWord: "all"
}
componentWillMount(){
......@@ -19,20 +19,23 @@ class Card extends Component {
}
checkPage(){
if(this.props.page === "Home"){
/* if(this.props.page === "Home"){
this.setData(5)
if(this.props.page === "Explore"){
if(this.props.page === "Explore"){*/
console.log(this.props.word)
if(this.props.word === "all"){
if(this.props.continent === 'all'){
this.setData()
console.log("Henter alt")
this.setData("")
}else{
this.setData(this.props.continent)}
}else if(this.props.continent === 'all'){
console.log("Henter etter søkeord: ", this.props.word)
this.setData(this.props.word)
}else{this.setData(this.props.continent + "/" + this.props.word)}
}
}
}
......@@ -50,32 +53,50 @@ class Card extends Component {
margin: 10,
padding: 10,
alignItems: "center",
height: 250,
height: 250
},
Image: {
width: 300,
height: 200,
resizeMode: 'contain',
alignSelf: "center"
},
name: {
textTransform: "capitalize"
}
})
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>
);
})
if (this.state.currentSerachWord.toLowerCase() !== this.props.word.toLowerCase()){
this.setState({ currentSerachWord: this.props.word })
this.checkPage()
}
return (
<ScrollView>
{dataCards}
</ScrollView>
)}
<FlatList contentContainerStyle={{
width: 350
}}
data = {data}
renderItem = { ({ item }) => (<TouchableHighlight key={item._id} underlayColor = 'white' onPress = {() => Alert.alert( item.description )}>
<View style = {styles.container}>
<View><Image style={styles.Image} source={{uri: item.img}}/></View>
<View><Text style = {styles.name}> {item.name} </Text></View>
</View>
</TouchableHighlight>)}
initialNumToRender = {5}
maxToRenderPerBatch = {10}
windowSize = {5}
//updateCellsBatchingPeriod = {10}
/>
)}
}
......
......@@ -16,7 +16,7 @@ class SearchBox extends Component {
search = () => {
Keyboard.dismiss()
if (this.state.searchWord.length === 0){ //search blank, show all places
word = "All"
word = "all"
} else {
word = this.state.searchWord
}
......
import React from 'react';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import { createAppContainer } from 'react-navigation';
import { Icon } from 'react-native-elements';
import HomePage from './pages/HomePage';
import ExplorePage from './pages/ExplorePage';
import { createStore, applyMiddleware } from 'redux';
import rootReducer from './reducers/index'
import { Provider } from 'react-redux';
import thunk from 'redux-thunk';
import { View } from 'react-native'
import { setPage } from '../frontend/actions/SetPageAction';
import { connect } from 'react-redux';
const store = createStore(rootReducer, applyMiddleware(thunk))
const TabNavigator = createBottomTabNavigator(
{ Home: { screen: HomePage,
navigationOptions: {
tabBarIcon: <Icon name = "home" size = {36} />,
}
},
Explore: { screen: ExplorePage,
navigationOptions: {
tabBarIcon: <Icon name = "search" size = {36} />
},
}
},
{tabBarOptions: {
activeBackgroundColor : '#3f51b5',
inactiveBackgroundColor : 'rgba(63, 81, 181, .5)',
showLabel : false,
}/*, defaultNavigationOptions: ({navigation}) => ({
tabBarOnPress: ({ navigation , defaultHandler}) => {
console.log('onPress: ', navigation.state.routeName);
defaultHandler() }
}) */
});
const AppContainer = createAppContainer(TabNavigator)
import React from 'react';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import { createAppContainer } from 'react-navigation';
import { Icon } from 'react-native-elements';
import HomePage from './pages/HomePage';
import ExplorePage from './pages/ExplorePage';
import { createStore, applyMiddleware } from 'redux';
import rootReducer from './reducers/index'
import { Provider } from 'react-redux';
import thunk from 'redux-thunk';
import { View } from 'react-native'
import { setPage } from '../frontend/actions/SetPageAction';
import { connect } from 'react-redux';
const store = createStore(rootReducer, applyMiddleware(thunk))
const TabNavigator = createBottomTabNavigator(
{ Home: { screen: HomePage,
navigationOptions: {
tabBarIcon: <Icon name = "home" size = {36} />,
}
},
Explore: { screen: ExplorePage,
navigationOptions: {
tabBarIcon: <Icon name = "search" size = {36} />
},
}
},
{tabBarOptions: {
activeBackgroundColor : '#3f51b5',
inactiveBackgroundColor : 'rgba(63, 81, 181, .5)',
showLabel : false,
}, defaultNavigationOptions: ({navigation}) => ({
tabBarOnPress: ({ navigation , defaultHandler}) => {
console.log('onPress: ', navigation.state.routeName);
defaultHandler() }
})
});
const AppContainer = createAppContainer(TabNavigator)
export default () => (<View style = {{flex: 1}}><AppContainer style={{margin: 100}}/></View>);
\ No newline at end of file
......@@ -5,48 +5,37 @@ import Card from '../components/Card'
import { setPage } from '../actions/SetPageAction';
import { connect } from 'react-redux';
import { changeSearchword } from '../actions/SearchAction';
import 'react-navigation'
class ExplorePage extends Component {
componentDidMount(){
this.props.setPage("Explore")
console.log(this.props.navigation.state.routeName)
this.props.changeSearchword("All")
}
render(){
const styles = StyleSheet.create({
container: {
container: {
flexDirection: "column",
alignItems: "center",
marginTop: 50,
flex: 1
},
header: {
fontSize: 28
}
})
var items = [];
for (var i = 0; i < 30; i++) {
items.push(<Card/>);
}
}})
return(
<View style = {styles.container}>
<Text style = {styles.header}> Results from "{this.props.word}"</Text>
<SearchBox />
<FlatList contentContainerStyle={{
width: 300
}}
initialNumToRender = {9}
maxToRenderPerBatch = {2}
data = {items}
renderItem = {({ item }) =>
<Card />}
/>
<Text style = {styles.header}> Results from "{this.props.word}"</Text>
<SearchBox />
<Card />
</View>
)
}
......
......@@ -10,23 +10,25 @@ import { setPage } from '../actions/SetPageAction';
const store = createStore(rootReducer, applyMiddleware(thunk))
class HomePage extends Component{
class HomePage extends Component {
componentWillMount(){
this.props.setPage("Home")
}
render(){
//this.props.setPage("Home")
return(
<ScrollView style={{
padding: 36,
flex: 1
<View style={{
paddingTop: 36,
flex: 1,
alignItems: "center"
}}>
<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/>
</ScrollView>
<Card />
</View>
/*
<Provider store = {store}>
......
const initState = {
searchWord: '',
continent: ''
searchWord: 'all',
continent: 'all'
}
const filterReducer = (state = initState, action) => {
......
......@@ -5,6 +5,7 @@ const initState = {
const setPageReducer = (state = initState, action) => {
switch(action.type) {
case 'SET_PAGE':
console.log("HALLABALA", action.page)
return{page: action.page}
default: return state;
};
......
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