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

#21 Seperated Cards into ExploreCard and HomeCard

parent 78b3a06a
......@@ -9,8 +9,6 @@ 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';
......@@ -33,22 +31,11 @@ const TabNavigator = createBottomTabNavigator(
activeBackgroundColor : '#3f51b5',
inactiveBackgroundColor : 'rgba(63, 81, 181, .5)',
showLabel : false,
},/* resetOnBlur: true,*/
defaultNavigationOptions: ({navigation}) => ({
tabBarOnPress: ({ navigation , defaultHandler}) => {
console.log(navigation.state.routeName)
defaultHandler() }
}),
}//, resetOnBlur: true
});
const mapDispatchToProps = (dispatch) => {
return {
setPage: (page) => dispatch(setPage(page))
}
};
const AppContainer = connect(mapDispatchToProps)(createAppContainer(TabNavigator))
const AppContainer = createAppContainer(TabNavigator)
const App = (props) => {
return (
......
......@@ -4,9 +4,9 @@ import axios from "axios"
// based on the input.
const createURL = (input) => {
const API_URL = "http://it2810-10.idi.ntnu.no:3001/api/"
console.log("INPUT: ", input)
//console.log("INPUT: ", input)
if(input == ""){
console.log(API_URL)
//console.log(API_URL)
return API_URL +"getData"
}
if(typeof input == 'string'){
......@@ -16,14 +16,14 @@ const createURL = (input) => {
return API_URL + "fiveMostPopular"
}
console.log("hentet ingenting")
//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)
//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, FlatList, TouchableHighlightBase } 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(){
this.checkSearchWord()
}
setData(input) {
GetData(input).then((res) => this.setState({data: res.data.data}))
}
checkSearchWord(){
//console.log("INNE I DEN GRENIA ;))) ", this.props.word)
if (this.props.word === "all"){
if(this.props.continent === 'all'){
//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)}
}
render(){
const styles = StyleSheet.create({
container: {
borderRadius: 7,
shadowOffset: {
width: 0.5, height: 0.5
},
shadowColor: '#AAAAAA',
shadowOpacity: 1,
backgroundColor: 'white',
margin: 10,
padding: 10,
alignItems: "center",
height: 250
},
Image: {
width: 300,
height: 200,
resizeMode: 'contain',
alignSelf: "center"
},
name: {
textTransform: "capitalize"
}
})
const { data } = this.state
if (this.state.currentSerachWord.toLowerCase() !== this.props.word.toLowerCase()){
this.setState({ currentSerachWord: this.props.word})
this.checkSearchWord()
}
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}
/>
)}
}
const mapStateToProps = (state) => { //give us accsess to the data in store
return {
page: state.page.page,
word: state.filter.searchWord,
continent: state.filter.continent
}
};
export default connect(mapStateToProps)(Card);
\ No newline at end of file
import React, { Component } from 'react';
import { StyleSheet, Text, View, Alert, TouchableHighlight, Image, FlatList } from 'react-native';
import { StyleSheet, Text, View, Alert, TouchableHighlight, Image, FlatList, TouchableHighlightBase } from 'react-native';
import { connect } from 'react-redux';
import { GetData, UpdatePopulatiry } from '../api/fetchers'
import { GetData, UpdatePopulatiry } from '../../api/fetchers'
import { ScrollView } from 'react-native-gesture-handler';
class Card extends Component {
state ={
data: [],
currentSerachWord: "all"
currentSerachWord: "all",
currentPage: ""
}
componentWillMount(){
this.checkPage()
this.setData(5)
}
setData(input) {
GetData(input).then((res) => this.setState({data: res.data.data}))
}
checkPage(){
/* if(this.props.page === "Home"){
this.setData(5)
if(this.props.page === "Explore"){*/
console.log(this.props.word)
/*checkPage(){
console.log("PAGEN: ", this.props.page)
//console.log(this.props.page === "Explore")
if(this.props.page === "Home"){
this.setData(5)}
if(this.props.page === "Explore"){
//console.log("INNE I DEN GRENIA ;))) ", this.props.word)
if(this.props.word === "all"){
if(this.props.continent === 'all'){
console.log("Henter alt")
//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)
//console.log("Henter etter søkeord: ", this.props.word)
this.setData(this.props.word)
}else{this.setData(this.props.continent + "/" + this.props.word)}
}
} }*/
render(){
const styles = StyleSheet.create({
container: {
borderRadius: 7,
......@@ -66,18 +68,7 @@ class Card extends Component {
}
})
const { data } = this.state
if (this.state.currentSerachWord.toLowerCase() !== this.props.word.toLowerCase()){
this.setState({ currentSerachWord: this.props.word })
this.checkPage()
}
return (
<FlatList contentContainerStyle={{
......@@ -94,7 +85,6 @@ class Card extends Component {
initialNumToRender = {5}
maxToRenderPerBatch = {10}
windowSize = {5}
//updateCellsBatchingPeriod = {10}
/>
)}
}
......
import React, { Component } from 'react';
import { StyleSheet, Text, View, FlatList, Item } from 'react-native';
import SearchBox from '../components/SearchBox';
import Card from '../components/Card'
import Card from '../components/Cards/ExploreCard'
import { setPage } from '../actions/SetPageAction';
import { connect } from 'react-redux';
import { changeSearchword } from '../actions/SearchAction';
......@@ -19,6 +19,9 @@ class ExplorePage extends Component {
render(){
this.props.setPage("Explore")
console.log("EXPLORE: ", this.props.page)
const styles = StyleSheet.create({
container: {
flexDirection: "column",
......
import React, { Component } from 'react';
import { Text, View, ScrollView } from 'react-native';
import Card from '../components/Card'
import Card from '../components/Cards/HomeCard'
import { createStore, applyMiddleware } from 'redux';
import rootReducer from '../reducers/';
import { Provider } from 'react-redux'
......@@ -17,7 +17,10 @@ class HomePage extends Component {
}
render(){
//this.props.setPage("Home")
this.props.setPage("Home")
console.log("HOME: ", this.props.navigation.state.routeName)
return(
<View style={{
paddingTop: 36,
......
......@@ -5,7 +5,7 @@ const initState = {
const setPageReducer = (state = initState, action) => {
switch(action.type) {
case 'SET_PAGE':
console.log("HALLABALA", action.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