gistfile1.txt

import React from "react";
import { View } from "react-native";
import { TabView, TabBar } from "react-native-tab-view";
import { connect } from "react-redux";
import NewOrders from "../components/NewOrders";
import OrdersInProgress from "../components/OrdersInProgress";
import PreparedOrders from "../components/CompletedOrders";
import HocResources from "../hoc/hoc-resourcers";

class PickerOrders extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      index: 0,
      routes: this.setRoutes()
    };
  }

  setRoutes = () => {
    return [
      {
        key: "first",
        title: `${this.props.getResource("tabTitleNewOrder")} (${
          this.props.newOrders.length
        })`
      },
      {
        key: "second",
        title: `${this.props.getResource("tabTitleOrderInProgress")}  (${
          this.props.ordersInPickupProcess.length
        })`
      },
      {
        key: "third",
        title: `${this.props.getResource("tabTitlePickerOrderPrepared")}  (${
          this.props.preparedOrders.length
        })`
      }
    ];
  };

  componentDidUpdate(prevProps) {
    if (
      prevProps.newOrders.length !== this.props.newOrders.length ||
      prevProps.ordersInPickupProcess.length !==
        this.props.ordersInPickupProcess.length ||
      prevProps.preparedOrders.length !== this.props.preparedOrders.length
    ) {
      this.setState({ routes: this.setRoutes() });
    }
  }

  _renderTabBar = props => (
    <TabBar
      {...props}
      style={styles.tabbar}
      labelStyle={styles.label}
      indicatorStyle={styles.indicatorStyle}
      useNativeDriver={true}
    />
  );

  renderScene = ({ route }) => {
    switch (route.key) {
      case "first":
        return (
          <NewOrders
            {...this.props}
            orders={this.props.newOrders}
            date="Fri Jan 04 2019"
            status={this.props.status}
            status1={this.props.status1}
            status2={this.props.status2}
          />
        );
      case "second":
        return (
          <OrdersInProgress
            {...this.props}
            orders={this.props.ordersInPickupProcess}
            date="Fri Jan 04 2019"
            status={this.props.status}
            status1={this.props.status1}
            status2={this.props.status2}
          />
        );
      case "third":
        return (
          <PreparedOrders
            {...this.props}
            orders={this.props.preparedOrders}
            date="Fri Jan 04 2019"
            status={this.props.status}
            status1={this.props.status1}
            status2={this.props.status2}
          />
        );
      default:
        return null;
    }
  };

  render() {
    return (
      <View style={{ flex: 1 }}>
        <TabView
          navigationState={this.state}
          renderScene={this.renderScene}
          renderTabBar={this._renderTabBar}
          onIndexChange={index => this.setState({ index })}
        />
      </View>
    );
  }
}

const mapStateToProps = state => {
  return {
    newOrders: state.newOrdersReducer.orders,
    ordersInPickupProcess: state.ordersInPickingProcessReducer.orders,
    preparedOrders: state.ordersInPackingProcessReducer.orders
  };
};

const styles = {
  container: {
    flex: 1
  },
  indicatorStyle: {
    backgroundColor: "#00803C"
  },
  tabbar: {
    backgroundColor: "#FFFFFF"
  },
  label: {
    color: "#000",
    fontSize: 10,
    borderColor: "#00803C",
    flexWrap: "wrap"
  }
};

export default connect(
  mapStateToProps,
  null
)(HocResources(PickerOrders));