Commit 78b3a06a authored by Solveig Hergot Langås's avatar Solveig Hergot Langås
Browse files

Merge branch 'Explore-page-+-scroll' into 'master'

Explore page + scroll

See merge request !11
parents 2b228d40 41642daa
......@@ -4,7 +4,7 @@
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"start": "concurrently \"cd .. && cd frontend && expo start\" \"nodemon server.js\"",
"start": "concurrently \"cd .. && cd frontend && npm start\" \"nodemon server.js\"",
"eject": "expo eject"
},
"dependencies": {
......
......@@ -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
......@@ -4,7 +4,9 @@ import axios from "axios"
// based on the input.
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'){
......@@ -13,12 +15,15 @@ const createURL = (input) => {
if(typeof input == 'number'){
return API_URL + "fiveMostPopular"
}
console.log("hentet ingenting")
}
// The only method that fetches data from database.
// Creates proper URL and fetches the data with axios
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,31 +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>
);
})
return(
<ScrollView>
{dataCards}
</ScrollView>
)}
if (this.state.currentSerachWord.toLowerCase() !== this.props.word.toLowerCase()){
this.setState({ currentSerachWord: this.props.word })
this.checkPage()
}
return (
<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}
/>
)}
}
......
......@@ -20,7 +20,7 @@ class SearchBox extends Component {
} else {
word = this.state.searchWord
}
this.props.changeSearchword(word.toLowerCase())
this.props.changeSearchword(word)
}
handleSearchWord = (e) => {
......@@ -50,7 +50,6 @@ class SearchBox extends Component {
<View style = {{flexDirection: "row", margin: 20}}>
<TextInput style = {inputfield} autoCorrect = {false} onKeyPress = {(e) => this.handleSearchWord(e)} onSubmitEditing = {() => this.search()} />
<TouchableWithoutFeedback><Icon name = "search" onPress = {() => this.search()}/></TouchableWithoutFeedback>
<Text> {this.props.word} </Text>
</View>
);
}
......
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
import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { StyleSheet, Text, View, FlatList, Item } from 'react-native';
import SearchBox from '../components/SearchBox';
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: {
flexDirection: "column",
alignItems: "center",
marginTop: 50,
flex: 1
},
header: {
fontSize: 28
}})
return(
<View>
<SearchBox />
<View style = {styles.container}>
<Text style = {styles.header}> Results from "{this.props.word}"</Text>
<SearchBox />
<Card />
</View>
)
}
......@@ -23,7 +45,15 @@ class ExplorePage extends Component {
const mapDispatchToProps = (dispatch) => {
return {
setPage: (page) => dispatch(setPage(page)),
changeSearchword: (word) => dispatch(changeSearchword(word))
}
};
export default connect(null, mapDispatchToProps)(ExplorePage);
\ No newline at end of file
const mapStateToProps = (state) => { //give us accsess to the data in store
const filter = state.filter
return {
word: filter.searchWord
}
}
export default connect(mapStateToProps, mapDispatchToProps)(ExplorePage);
\ No newline at end of file
......@@ -10,22 +10,24 @@ 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: 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