Ledger Nano X - The secure hardware wallet
SHARE
TWEET

App.js

Mattey115 May 20th, 2020 987 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { useState, useEffect } from 'react';
  2. import {
  3.   SafeAreaView,
  4.   StyleSheet,
  5.   View,
  6.   Text,
  7.   Image,
  8.   Picker,
  9.   Button,
  10. } from 'react-native';
  11. import banner from './assets/VFUS_Banner.jpg';
  12.  
  13. const App = () => {
  14.   const [cart, setCart] = useState({
  15.     vegetable: {
  16.       selection: 'Iceberg Lettuce-$2',
  17.       quantity: '1',
  18.     },
  19.     fruit: {
  20.       selection: 'Banana-$1',
  21.       quantity: '1',
  22.     },
  23.     totalCost: 0,
  24.   });
  25.  
  26.   /*
  27.     Update the contents of the shopping cart.
  28.     type: Type of product (string),
  29.     option: Option of product to update (string: "selection" | "quantity"),
  30.     newValue: Value to update with (string | number)
  31.    */
  32.   const updateCart = (type, option, newValue) => {
  33.     setCart({
  34.       ...cart,
  35.       [type]: {
  36.         ...cart[type],
  37.         [option]: newValue,
  38.       },
  39.     });
  40.   };
  41.  
  42.   /*
  43.     Calculate and set the total cost of the shopping cart.
  44.    */
  45.   const calculateTotal = () => {
  46.     const newTotal =
  47.       parseInt(cart.vegetable.selection.substr(-1)) *
  48.         parseInt(cart.vegetable.quantity) +
  49.       parseInt(cart.fruit.selection.substr(-1)) * parseInt(cart.fruit.quantity);
  50.  
  51.     setCart({
  52.       ...cart,
  53.       totalCost: newTotal,
  54.     });
  55.   };
  56.  
  57.   return (
  58.     <View style={styles.body}>
  59.       <View style={[styles.highlightSection, styles.header]}>
  60.         <Text style={styles.headerText}>VFUS</Text>
  61.         <Text style={styles.headerText}></Text>
  62.       </View>
  63.       <Image source={banner} style={styles.banner} />
  64.       <View style={styles.content}>
  65.         <View style={styles.productContainer}>
  66.           <Picker
  67.             selectedValue={cart.vegetable.selection}
  68.             onValueChange={newValue =>
  69.               updateCart('vegetable', 'selection', newValue)
  70.             }
  71.             style={styles.productSelector}>
  72.             <Picker.Item
  73.               label="Iceberg Lettuce - $2"
  74.               value="Iceberg Lettuce-$2"
  75.             />
  76.             <Picker.Item label="Carrots - $4" value="Carrots-$4" />
  77.             <Picker.Item label="Potatoes - $5" value="Potatoes-$5" />
  78.           </Picker>
  79.           <Picker
  80.             selectedValue={cart.vegetable.quantity}
  81.             onValueChange={newValue =>
  82.               updateCart('vegetable', 'quantity', newValue)
  83.             }>
  84.             <Picker.Item label="1" value="1" />
  85.             <Picker.Item label="2" value="2" />
  86.             <Picker.Item label="3" value="3" />
  87.             <Picker.Item label="4" value="4" />
  88.             <Picker.Item label="5" value="5" />
  89.           </Picker>
  90.         </View>
  91.         <View style={styles.productContainer}>
  92.           <Picker
  93.             selectedValue={cart.fruit.selection}
  94.             onValueChange={newValue =>
  95.               updateCart('fruit', 'selection', newValue)
  96.             }
  97.             style={styles.productSelector}>
  98.             <Picker.Item label="Banana - $1" value="Banana-$1" />
  99.             <Picker.Item label="Grapes - $5" value="Grapes-$5" />
  100.             <Picker.Item label="Apples - $2" value="Apples-$2" />
  101.           </Picker>
  102.           <Picker
  103.             selectedValue={cart.fruit.quantity}
  104.             onValueChange={newValue =>
  105.               updateCart('fruit', 'quantity', newValue)
  106.             }>
  107.             <Picker.Item label="1" value="1" />
  108.             <Picker.Item label="2" value="2" />
  109.             <Picker.Item label="3" value="3" />
  110.             <Picker.Item label="4" value="4" />
  111.             <Picker.Item label="5" value="5" />
  112.           </Picker>
  113.         </View>
  114.         <View>
  115.           <Button
  116.             title="Calculate cost"
  117.             color="#22771D"
  118.             onPress={calculateTotal}
  119.           />
  120.           {cart.totalCost ? (
  121.             <Text style={styles.totalCost}>
  122.               Total cost of the order: ${cart.totalCost}.00
  123.             </Text>
  124.           ) : null}
  125.         </View>
  126.       </View>
  127.       <View style={styles.highlightSection}>
  128.         <Text style={styles.footerText}>App developed by Group 116:</Text>
  129.         <Text style={styles.footerText}>Matthew Widdicombe (45450889)</Text>
  130.         <Text style={styles.footerText}>Qian Zhong (45612390)</Text>
  131.         <Text style={styles.footerText}>Huong Tra Nguyen (45853258)</Text>
  132.         <Text style={styles.footerText}>Brandon Mercer (45155011)</Text>
  133.       </View>
  134.     </View>
  135.   );
  136. };
  137.  
  138. const styles = StyleSheet.create({
  139.   body: {
  140.     flex: 1,
  141.     backgroundColor: '#FAFAFA',
  142.   },
  143.   highlightSection: {
  144.     backgroundColor: '#134611',
  145.     paddingHorizontal: 40,
  146.     paddingVertical: 20,
  147.   },
  148.   header: {
  149.     display: 'flex',
  150.     justifyContent: 'space-between',
  151.     flexDirection: 'row',
  152.   },
  153.   headerText: {
  154.     color: '#FCFCFC',
  155.     fontSize: 20,
  156.     fontWeight: 'bold',
  157.   },
  158.   banner: {
  159.     width: '100%',
  160.     height: undefined,
  161.     aspectRatio: 1959 / 925,
  162.   },
  163.   content: {
  164.     padding: 20,
  165.   },
  166.   productContainer: {
  167.     display: 'flex',
  168.     flexDirection: 'row',
  169.     marginBottom: 10,
  170.   },
  171.   productSelector: {
  172.     flex: 1,
  173.     marginRight: 10,
  174.   },
  175.   totalCost: {
  176.     fontSize: 16,
  177.     marginTop: 20,
  178.     textAlign: 'center',
  179.   },
  180.   footerText: {
  181.     color: '#FCFCFC',
  182.     marginBottom: 4,
  183.   },
  184. });
  185.  
  186. export default App;
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Top