Commit fd103091 authored by Hedda's avatar Hedda
Browse files

#4 Finished detailed page (scroll not working)

parent 47b27404
import React, { Component } from 'react';
import { StyleSheet, Text, View, Alert, TouchableHighlight, Image, FlatList } from 'react-native';
import { StyleSheet, Text, View, Alert, TouchableHighlight, Image, FlatList, ScrollView, SafeAreaView } from 'react-native';
import { connect } from 'react-redux';
import { GetData, UpdatePopulatiry } from '../api/fetchers'
import { showDestination } from '../actions/DestinationAction';
......@@ -9,7 +9,7 @@ class Card extends Component {
state ={
data: [],
currentSerachWord: "all",
dataElement: [],
dataElement: "",
visible: false
}
......@@ -38,7 +38,8 @@ class Card extends Component {
openDetailedCard(destinationID, popularity){
GetData(destinationID).then((res) => this.setState({dataElement: res.data.data, visible: true}))
GetData(destinationID, "").then((res) => this.setState({dataElement: res.data.data}))
this.setState({visible: true})
this.props.showDestination(destinationID);
newPop = popularity + 1
UpdatePopulatiry(destinationID, newPop);
......@@ -73,12 +74,24 @@ class Card extends Component {
},
name: {
textTransform: "capitalize"
},
scrollViewContainer: {
paddingTop: 8,
},
row: {
flex: 1,
flexDirection: 'column',
justifyContent: 'flex-start',
alignItems: 'center',
},
text: {
paddingTop: 8,
}
})
const { data } = this.state
const { dataElement } = this.state
if (this.state.currentSerachWord.toLowerCase() !== this.props.word.toLowerCase()){
......@@ -86,8 +99,6 @@ class Card extends Component {
this.checkPage()
}
return (
<View>
......@@ -106,16 +117,22 @@ class Card extends Component {
initialNumToRender = {5}
maxToRenderPerBatch = {10}
windowSize = {5}
keyExtractor={(item, index) => index.toString()}
//updateCellsBatchingPeriod = {10}
/>
<MaterialDialog
title={dataElement.name}
scrolled
visible={this.state.visible}
onOk={() => console.log("OK was pressed")}
onCancel={() => console.log("Cancel was pressed")}>
>
<Text>heiheiehi</Text>
onOk={() => {console.log("OK was pressed"); this.setState({visible: false})}}
onCancel={() => {console.log("Cancel was pressed"); this.setState({visible: false})}}
>
<ScrollView contentContainerStyle={styles.scrollViewContainer}>
<View style={styles.row}>
<Image style={styles.Image} source={{uri: dataElement.img}}/>
<Text style={styles.text}>{dataElement.description}</Text>
</View>
</ScrollView>
</MaterialDialog>
</View>
)}
......
......@@ -89,14 +89,14 @@ const MaterialDialog = ({
<ActionButton
testID="dialog-cancel-button"
colorAccent={colorAccent}
onPress={onCancel}
label={cancelLabel}
onPress={onOk}
label={okLabel}
/>
<ActionButton
testID="dialog-ok-button"
colorAccent={colorAccent}
onPress={onOk}
label={okLabel}
onPress={onCancel}
label={cancelLabel}
/>
</View>
) : null}
......@@ -201,8 +201,8 @@ MaterialDialog.propTypes = {
};
MaterialDialog.defaultProps = {
okLabel: 'OK',
cancelLabel: 'CANCEL',
okLabel: 'ADD TO FAVOURITE',
cancelLabel: 'CLOSE',
title: undefined,
titleColor: colors.androidPrimaryTextColor,
backgroundColor: colors.background,
......
......@@ -6091,8 +6091,8 @@
},
"prop-types": {
"version": "15.7.2",
"resolved": "https://artifactory.palantir.build/artifactory/api/npm/all-npm/prop-types/-/prop-types-15.7.2.tgz",
"integrity": "sha1-UsQedbjIfnK52TYOAga5ncv/psU=",
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
"integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
"requires": {
"loose-envify": "^1.4.0",
"object-assign": "^4.1.1",
......
......@@ -16,6 +16,7 @@
"mongodb": "^3.3.3",
"mongoose": "^5.7.7",
"nodemon": "^1.19.4",
"prop-types": "^15.7.2",
"react": "16.8.3",
"react-dom": "16.8.3",
"react-native": "https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz",
......
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