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

#19 Flatlist working, renders all items at once:(

parent 189ff1c4
......@@ -42,14 +42,13 @@ class Card extends Component {
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><Text> HEisann!</Text></View>
<View><Text> HER SDDWJROJ FSKD </Text></View>
</View>
</TouchableHighlight>
})}
</View>
......
......@@ -16,11 +16,11 @@ 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
}
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, { 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';
class ExplorePage extends Component {
componentDidMount(){
this.props.setPage("Explore")
this.props.changeSearchword("All")
}
/*_handleLoadMore = () => {
() => {
this._fetchAllBeers();
}
);
};*/
render(){
const styles = StyleSheet.create({
container: {
flexDirection: "column",
alignItems: "center",
marginTop: 50
},
header: {
fontSize: 28
}
})
var items = [];
for (var i = 0; i < 30; i++) {
items.push(<Card/>);
}
return(
<View>
<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 />}
/>
</View>
)
}
......@@ -23,7 +63,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
......@@ -27,12 +27,6 @@ class HomePage extends Component{
<Text style={{fontSize: 16, textAlign: "center", padding: 8}}>Below you see the five most popular places</Text>
<Card />
</View>
/*
<Provider store = {store}>
<Test/>
</Provider>
*/
)
}
}
......
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