Commit 698eb748 authored by Adrian's avatar Adrian

#3 Added info in overlay

parent 1e8493f5
......@@ -2,8 +2,8 @@
"devToolsPort": 19002,
"expoServerPort": 19000,
"packagerPort": 19001,
"packagerPid": 15348,
"expoServerNgrokUrl": "https://av-4mb.hhorge.p4.exp.direct",
"packagerNgrokUrl": "https://packager.av-4mb.hhorge.p4.exp.direct",
"ngrokPid": 18008
"packagerPid": 15960,
"expoServerNgrokUrl": "https://av-4mb.anonymous.p4.exp.direct",
"packagerNgrokUrl": "https://packager.av-4mb.anonymous.p4.exp.direct",
"ngrokPid": 6856
}
......@@ -27,6 +27,9 @@ const GET_PRODUCTS = gql`
alcohol
volume
type
country
district
pricePerLiter
}
}
}
......@@ -34,7 +37,6 @@ const GET_PRODUCTS = gql`
const Content = () => {
const dispatch = useDispatch();
const stateAlbums = useSelector(state => state.albums);
const stateSearch = useSelector(state => state.search);
const stateGenre = useSelector(state => state.filter);
......@@ -53,18 +55,8 @@ const Content = () => {
subtitle={product.price + " kr"}
bottomDivider
chevron
onPress={() => setOverlayState()}
onPress={() => setOverlayState(product)}
/>
{/* <Elements
name={product.name}
img={product.img}
price={product.price}
alcohol={product.alcohol}
volume={product.volume}
type={product.type}
/> */}
</View>
));
......@@ -81,12 +73,10 @@ const Content = () => {
return f;
}
function setDetailState(album) {
dispatch(details(album));
}
function setOverlayState() {
function setOverlayState(d) {
dispatch(isOverlayVisible());
dispatch(details(d));
}
return (
......
......@@ -3,12 +3,13 @@ import { Overlay } from 'react-native-elements';
import { useSelector } from "react-redux";
import { useDispatch } from "react-redux";
import { isOverlayVisible } from "../actions";
import { Text } from 'react-native';
import {Text, View, Image, StyleSheet} from 'react-native'
const Details = () => {
const stateOverlay = useSelector(state => state.overlay);
const details = useSelector(state => state.details)
const dispatch = useDispatch();
return(
......@@ -16,9 +17,83 @@ const Details = () => {
isVisible={stateOverlay}
onBackdropPress={() => dispatch(isOverlayVisible())}
>
<Text>Hello from Overlay!</Text>
<View style={styles.container}>
<Text style={styles.name}>{details.name}</Text>
<Image style={styles.image} source={{uri: details.img}}/>
<Text style={styles.price}>Kr. {details.price}</Text>
<Text style={styles.type}>{details.type}</Text>
<View style={styles.info}>
<Text style={styles.alcohol}>Alcohol:<Text style={styles.elements}> {details.alcohol}% </Text></Text>
<Text style={styles.volume}>Volume:<Text style={styles.elements}> {details.volume}</Text></Text>
</View>
<View style={styles.info}>
<Text style={styles.country}>Country:<Text style={styles.elements}> {details.country}</Text></Text>
<Text style={styles.district}>District:<Text style={styles.elements}> {details.district}</Text></Text>
</View>
<Text style={styles.pricePL}>Price per liter:<Text style={styles.elements}> Kr.{details.pricePerLiter} </Text></Text>
</View>
</Overlay>
);
}
const styles = StyleSheet.create({
container: {
margin:10,
marginTop: 10,
alignItems: 'center',
flexWrap: 'wrap',
flexDirection: 'column',
},
name: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
price: {
marginTop:5,
fontWeight: 'bold',
fontSize: 17,
},
info: {
padding: 10,
flexDirection: 'row', flexWrap: 'wrap'
},
alcohol: {
width:"60%",
paddingLeft: 5
},
volume: {
width:"40%",
paddingRight: 5
},
country: {
width:"60%",
paddingLeft: 5
},
district: {
width:"40%",
paddingRight: 5
},
type: {
borderBottomWidth:1,
borderBottomColor:'black',
width:"90%",
textAlign: "center",
paddingBottom:15,
paddingTop: 5,
marginBottom:20
},
image: {
resizeMode: "contain", height: 200, width:100, justifyContent:'center'
},
elements: {
fontWeight:'bold'
},
pricePL: {
padding:5
}
});
export default Details;
Markdown is supported
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