#3 Added info in overlay

p4/.expo/packager-info.json

@@ -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
 }

p4/src/components/Content.js

@@ -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 (

p4/src/components/Details.js

@@ -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;