coffeeShop.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, {Fragment} from 'react';
import {
  SafeAreaView,
  StyleSheet,
  View,
  TouchableOpacity,
  Text,
  StatusBar,
  FlatList
} from "react-native";

import {
  Colors,
} from 'react-native/Libraries/NewAppScreen';

const menu = [
  { name: "Cafe Au Lait", prepTime: 2 },
  { name: "Cappuccino", prepTime: 3 },
  { name: "Expresso", prepTime: 4 }
];
const pickUpTime = 4;

class App extends React.Component {
  constructor() {
    super();

    this.state = {
      menu,
      working: false,
      queue: [],
      counter: []
    };
  }

  // items: coffee in an array
  order = items => {
    let { queue } = this.state;

    this.setState({
      queue: queue.concat(...items)
    });
  };

  startWork = () => {
    let { queue } = this.state;
    if (queue.length > 0) {
      this.setState({
        working: true
      })

      let firstItem = queue[0];
      let seconds = firstItem.prepTime;

      setTimeout(() => {
        this.setState(prevState => {
          let { counter, queue } = prevState;
          return {
            queue: queue.slice(1, queue.length),
            counter: [...counter, queue[0]]
          };
        });

        this.pickUpCoffee();
        this.startWork();

      }, seconds * 1000);
    } else {
      this.setState({
        working: false
      })
    }
  };

  pickUpCoffee = () => {
    let { counter } = this.state;
    let seconds = pickUpTime;

    if (counter.length > 0) {
      setTimeout(() => {
        this.setState(state => {
          let { counter } = state;
          return {
            counter: counter.slice(0, counter.length - 1)
          };
        });
      }, seconds * 1000);
    }
  };

  _keyExtractor = (item, index) => item.name + index;

  menuItem = ({ item }) => (
    <TouchableOpacity
      style={styles.menuItem}
      onPress={() => this.order([item])}
      title="Order"
      color="#841584"
      accessibilityLabel="Learn more about this purple button"
      key={item.name}
    >
      <Text>{item.name}</Text>
    </TouchableOpacity>
  );

  counterItem = ({ item }) => <Text> {item.name} </Text>;

  render() {
    return (
      <Fragment>
        <StatusBar barStyle="dark-content" />
        <SafeAreaView>
          <Text style={styles.headerText}> Coffee Menu</Text>
          <FlatList
            keyExtractor={this._keyExtractor}
            data={this.state.menu}
            renderItem={this.menuItem}
          />

          <TouchableOpacity
            style={styles.button}
            onPress={this.startWork}
            disabled={this.state.working}
            title="Order"
            color="#841584"
            accessibilityLabel="Learn more about this purple button"
          >
            { this.state.working ? 
            <Text> Working on it! </Text>
              :
            <Text> Submit Order! </Text>
          }
          </TouchableOpacity>

          <Text style={styles.headerText}>Queue</Text>
          {this.state.queue.map((coffee, i) => (
            <View key={coffee.name + i} style={{...styles.coffeeText, ...styles.menuItem}}>
              <Text>
                {i + 1}. {coffee.name}
              </Text>
            </View>
          ))}

          <Text style={styles.headerText}>Counter</Text>
          {this.state.counter.map((coffee, i) => (
            <View key={coffee.name + i} style={{...styles.coffeeText, ...styles.menuItem}}>
              <Text>
                {i + 1}. {coffee.name}
              </Text>
            </View>
          ))}
        </SafeAreaView>
      </Fragment>
    );
  }
};

const styles = StyleSheet.create({
  coffeeText: {
    backgroundColor: Colors.dark
  },
  headerText: {
    fontSize: 20,
    fontWeight: "600",
    textAlign: "center",
    color: Colors.black
  },
  menuItem: {
    backgroundColor: "saddlebrown",
    padding: 10,
    textAlign: "center",
    borderBottomColor: "#ccc",
    borderBottomWidth: 1
  },
  scrollView: {
    backgroundColor: Colors.lighter
  },
  button: {
    alignItems: "center",
    backgroundColor: "#DDDDDD",
    padding: 10
  },
  engine: {
    position: "absolute",
    right: 0
  },
  body: {
    backgroundColor: Colors.white
  },
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: "600",
    color: Colors.black
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: "400",
    color: Colors.dark
  },
  highlight: {
    fontWeight: "700"
  }
});

export default App;