coffee-shop.tsx

import {
  Provider as PaperProvider,
  DefaultTheme,
  ProgressBar
} from "react-native-paper";
import React, { useState, useEffect } from "react";
import { StyleSheet, Text, View, ScrollView } from "react-native";
import { Button } from "react-native-paper";
import { observable, action } from "mobx";
import { observer } from "mobx-react";

type MenuType = {
  name: string;
  prepSeconds: number;
};

const cafe: MenuType = {
  name: "Cafe Au Lait",
  prepSeconds: 4
};
const capp: MenuType = {
  name: "Cappuccino",
  prepSeconds: 10
};
const esp: MenuType = {
  name: "Espresso",
  prepSeconds: 15
};

class Store {
  orders = observable.array<OrderProps>([]);
  index = 0;

  constructor() {
    let order: OrderProps | null = null;
    const interval = 200;
    setInterval(() => {
      if (!order && this.orders.length && this.index < this.orders.length) {
        order = this.orders[this.index];
      }
      if (order) {
        const progress = Math.min(
          order.progress + interval / (order.type.prepSeconds * 1000),
          1
        );
        order = {
          ...order,
          progress
        };
        this.orders[this.index] = order;
        if (progress === 1) {
          this.index++;
          order = null;
        }
      }
    }, interval);
  }

  @action
  addOrder = (order: MenuType) => {
    this.orders.push({
      type: order,
      progress: 0
    });
  };
}

export default () => {
  const [store, setStore] = useState<Store>();
  useEffect(() => {
    setStore(new Store());
  }, []);

  return (
    <PaperProvider theme={DefaultTheme}>
      {store && <Main store={store} />}
    </PaperProvider>
  );
};

const Main = observer(({ store }: { store: Store }) => (
  <ScrollView contentContainerStyle={styles.container}>
    <View style={{ borderWidth: 1, padding: 10, width: "90%" }}>
      <Text>Menu</Text>
      <MenuButton type={cafe} onPress={store!.addOrder} />
      <MenuButton type={capp} onPress={store!.addOrder} />
      <MenuButton type={esp} onPress={store!.addOrder} />
    </View>

    <View style={{ borderWidth: 1, padding: 10, width: "90%", marginTop: 20 }}>
      <Text style={{ marginBottom: 20 }}>Counter</Text>
      {store!.orders.map((o, index) => (
        <View key={index}>
          <Text>{o.type.name}</Text>
          <ProgressBar progress={o.progress} />
        </View>
      ))}
    </View>
  </ScrollView>
));

const MenuButton = ({
  type,
  onPress
}: {
  type: MenuType;
  onPress: (order: MenuType) => void;
}) => {
  return (
    <Button
      onPress={() => {
        console.log("order");
        onPress(type);
      }}
    >
      <Text>{type.name}</Text>
    </Button>
  );
};

type OrderProps = {
  type: MenuType;
  progress: number;
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 50,
    backgroundColor: "#fff",
    alignItems: "center"
  }
});