App.js

import React, { useState, useEffect } from 'react';
import {
  SafeAreaView,
  StyleSheet,
  View,
  Text,
  Image,
  Picker,
  Button,
} from 'react-native';
import banner from './assets/VFUS_Banner.jpg';

const App = () => {
  const [cart, setCart] = useState({
    vegetable: {
      selection: 'Iceberg Lettuce-$2',
      quantity: '1',
    },
    fruit: {
      selection: 'Banana-$1',
      quantity: '1',
    },
    totalCost: 0,
  });

  /*
    Update the contents of the shopping cart.
    type: Type of product (string),
    option: Option of product to update (string: "selection" | "quantity"),
    newValue: Value to update with (string | number)
   */
  const updateCart = (type, option, newValue) => {
    setCart({
      ...cart,
      [type]: {
        ...cart[type],
        [option]: newValue,
      },
    });
  };

  /*
    Calculate and set the total cost of the shopping cart.
   */
  const calculateTotal = () => {
    const newTotal =
      parseInt(cart.vegetable.selection.substr(-1)) *
        parseInt(cart.vegetable.quantity) +
      parseInt(cart.fruit.selection.substr(-1)) * parseInt(cart.fruit.quantity);

    setCart({
      ...cart,
      totalCost: newTotal,
    });
  };

  return (
    <View style={styles.body}>
      <View style={[styles.highlightSection, styles.header]}>
        <Text style={styles.headerText}>VFUS</Text>
        <Text style={styles.headerText}>☰</Text>
      </View>
      <Image source={banner} style={styles.banner} />
      <View style={styles.content}>
        <View style={styles.productContainer}>
          <Picker
            selectedValue={cart.vegetable.selection}
            onValueChange={newValue =>
              updateCart('vegetable', 'selection', newValue)
            }
            style={styles.productSelector}>
            <Picker.Item
              label="Iceberg Lettuce - $2"
              value="Iceberg Lettuce-$2"
            />
            <Picker.Item label="Carrots - $4" value="Carrots-$4" />
            <Picker.Item label="Potatoes - $5" value="Potatoes-$5" />
          </Picker>
          <Picker
            selectedValue={cart.vegetable.quantity}
            onValueChange={newValue =>
              updateCart('vegetable', 'quantity', newValue)
            }>
            <Picker.Item label="1" value="1" />
            <Picker.Item label="2" value="2" />
            <Picker.Item label="3" value="3" />
            <Picker.Item label="4" value="4" />
            <Picker.Item label="5" value="5" />
          </Picker>
        </View>
        <View style={styles.productContainer}>
          <Picker
            selectedValue={cart.fruit.selection}
            onValueChange={newValue =>
              updateCart('fruit', 'selection', newValue)
            }
            style={styles.productSelector}>
            <Picker.Item label="Banana - $1" value="Banana-$1" />
            <Picker.Item label="Grapes - $5" value="Grapes-$5" />
            <Picker.Item label="Apples - $2" value="Apples-$2" />
          </Picker>
          <Picker
            selectedValue={cart.fruit.quantity}
            onValueChange={newValue =>
              updateCart('fruit', 'quantity', newValue)
            }>
            <Picker.Item label="1" value="1" />
            <Picker.Item label="2" value="2" />
            <Picker.Item label="3" value="3" />
            <Picker.Item label="4" value="4" />
            <Picker.Item label="5" value="5" />
          </Picker>
        </View>
        <View>
          <Button
            title="Calculate cost"
            color="#22771D"
            onPress={calculateTotal}
          />
          {cart.totalCost ? (
            <Text style={styles.totalCost}>
              Total cost of the order: ${cart.totalCost}.00
            </Text>
          ) : null}
        </View>
      </View>
      <View style={styles.highlightSection}>
        <Text style={styles.footerText}>App developed by Group 116:</Text>
        <Text style={styles.footerText}>Matthew Widdicombe (45450889)</Text>
        <Text style={styles.footerText}>Qian Zhong (45612390)</Text>
        <Text style={styles.footerText}>Huong Tra Nguyen (45853258)</Text>
        <Text style={styles.footerText}>Brandon Mercer (45155011)</Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  body: {
    flex: 1,
    backgroundColor: '#FAFAFA',
  },
  highlightSection: {
    backgroundColor: '#134611',
    paddingHorizontal: 40,
    paddingVertical: 20,
  },
  header: {
    display: 'flex',
    justifyContent: 'space-between',
    flexDirection: 'row',
  },
  headerText: {
    color: '#FCFCFC',
    fontSize: 20,
    fontWeight: 'bold',
  },
  banner: {
    width: '100%',
    height: undefined,
    aspectRatio: 1959 / 925,
  },
  content: {
    padding: 20,
  },
  productContainer: {
    display: 'flex',
    flexDirection: 'row',
    marginBottom: 10,
  },
  productSelector: {
    flex: 1,
    marginRight: 10,
  },
  totalCost: {
    fontSize: 16,
    marginTop: 20,
    textAlign: 'center',
  },
  footerText: {
    color: '#FCFCFC',
    marginBottom: 4,
  },
});

export default App;