ae

dashboard.js

/**
 * Created by nikollasbetiol on 16/04/17.
 *
 */

import React, { Component } from "react";
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  NetInfo,
  Alert,
  Image,
  InteractionManager,
  Linking,
  BackAndroid
} from "react-native";
import Icon from "react-native-vector-icons/Ionicons";
import { connect } from "react-redux";
import { Header, Distance, Loader, Permissions } from "./helpers";
import Communications from "react-native-communications";
import IconBadge from "react-native-icon-badge";
import SharedPreferences from "react-native-shared-preferences";
import {
  logout,
  fetchUser,
  fetchUserSuccess,
  fetchUserFail,
  fetchPositions,
  fetchHistories
} from "../actions/index";
import StarRating from "react-native-star-rating";
import { Actions } from "react-native-router-flux";
import moment from "moment";

class DashboardScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      BadgeCount: 0,
      messages: "ae"
    };
  }

  async componentWillMount() {
    await Permissions.requestLocationPermission();
    let { auth_token } = this.props;
    this.props.fetchPositions(auth_token);
    this.props.fetchHistories(this.props.auth_token);
  }

  _moveToMap() {
    let { positions } = this.props;
    if (positions.length === 0) {
      Alert.alert("Atenção", "Nenhuma rota foi encontrada!");
    } else {
      InteractionManager.runAfterInteractions(() => {
        Actions.map();
      });
    }
  }

  _moveToHistories() {
    let { positions } = this.props;
    if (positions.length === 0) {
      Alert.alert("Atenção", "Nenhum histórico foi encontrado!");
    } else {
      InteractionManager.runAfterInteractions(() => {
        Actions.histories();
      });
    }
  }

  _moveToAlerts() {
    InteractionManager.runAfterInteractions(() => {
      Actions.alert();
    });
  }

  _moveToChat() {
    let { messages } = this.state;
    let dateNow = moment().hours();

    if (dateNow >= 4 && dateNow <= 10) {
      console.log("inicio");
      this.setState({ messages: "INICIO" });
    }

    if (dateNow >= 10 && dateNow <= 14) {
      console.log("almoco");
      this.setState({ messages: "ALMOCO" });
    }

    if (dateNow >= 14 && dateNow <= 19) {
      console.log("cafe");
      this.setState({ messages: "CAFE" });
    }

    if (dateNow >= 19 && dateNow <= 23) {
      console.log("pernoite");
      this.setState({ messages: "PERNOITE" });
    }

    console.log(this.state.messages);
    const PLAY_STORE_LINK = "market://details?id=com.whatsapp&hl=pt_BR";
    const WHATS_APP_LINK = "whatsapp://send?phone=+5565984340000";
    InteractionManager.runAfterInteractions(() => {
      Linking.openURL(WHATS_APP_LINK).catch(support => {
        if (support) {
          Alert.alert(
            "WhatsApp",
            "Para falar com a central você precisa ter WhatsApp",
            [
              {
                text: "Baixar",
                onPress: () => Linking.openURL(PLAY_STORE_LINK)
              },
              {
                text: "Central",
                onPress: () => Communications.phonecall("+5565984340000", true)
              },
              {
                text: "Cancelar",
                onPress: () => {
                  cancelable: true;
                }
              }
            ],
            { cancelable: false }
          );
        }
      });
    });
  }

  renderPhotoTrip() {
    let { users } = this.props;
    return (
      <View style={styles.containerPhoto}>
        <Image
          source={{
            uri: "https://tracker.moodle.org/secure/attachment/30912/f3.png"
          }}
          resizeMode="stretch"
          style={{
            height: 120,
            width: 120,
            borderRadius: 200,
            alignSelf: "center"
          }}
        />
        <StarRating
          disabled={true}
          emptyStar={"ios-star-outline"}
          fullStar={"ios-star"}
          halfStar={"ios-star-half"}
          iconSet={"Ionicons"}
          maxStars={5}
          rating={5}
          startSize={25}
          starColor={"#3498db"}
        />
        <View style={{ flexDirection: "row", paddingBottom: 2 }}>
          <Text style={{ fontSize: 15, alignSelf: "center" }}>Viagens </Text>
          <View
            style={{
              borderColor: "#3498db",
              borderRadius: 100,
              borderWidth: 2,
              width: 25
            }}
          >
            <Text
              style={{ color: "#3498db", fontSize: 14, alignSelf: "center" }}
            >
              12
            </Text>
          </View>
        </View>
      </View>
    );
  }

  _logout() {
    Actions.auth({ type: "reset" });
    this.props.logout();
    SharedPreferences.removeItem("token");
  }

  renderView() {
    return (
      <View>
        <Header title="Dashboard" logout={this._logout.bind(this)} />
        {this.renderPhotoTrip()}
        <View style={styles.container}>
          <TouchableOpacity
            onPress={this._moveToMap.bind(this)}
            style={styles.map}
          >
            <Icon
              name="ios-map-outline"
              size={70}
              style={styles.iconStyle}
              color="#fff"
            />
            <Text style={styles.text}>Mapa</Text>
          </TouchableOpacity>
          <View
            style={{
              flexDirection: "row",
              alignItems: "center",
              justifyContent: "center"
            }}
          >
            <IconBadge
              MainElement={
                <TouchableOpacity style={styles.alert}>
                  <Icon
                    name="ios-alert-outline"
                    onPress={() => this._moveToAlerts()}
                    size={70}
                    style={styles.iconStyle}
                    color="#fff"
                  />
                  <Text style={styles.text}>Alertas</Text>
                </TouchableOpacity>
              }
              BadgeElement={
                <Text style={{ color: "#FFFFFF" }}>
                  {this.state.BadgeCount}
                </Text>
              }
              IconBadgeStyle={{
                width: 30,
                height: 30,
                backgroundColor: "red"
              }}
              Hidden={this.state.BadgeCount == 3}
            />
          </View>
          <TouchableOpacity
            style={styles.chat}
            onPress={this._moveToChat.bind(this)}
          >
            <Icon
              name="ios-chatbubbles-outline"
              size={70}
              style={styles.iconStyle}
              color="#fff"
            />
            <Text style={styles.text}>Chat</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.historic}
            onPress={this._moveToHistories.bind(this)}
          >
            <Icon
              name="ios-list-box-outline"
              size={70}
              style={styles.iconStyle}
              color="#fff"
            />
            <Text style={styles.text}>Históricos</Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }

  render() {
    let { users } = this.props;
    return (
      <View style={{ flex: 1, backgroundColor: "#fff" }}>
        {this.renderView()}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    marginBottom: 20,
    justifyContent: "center",
    alignItems: "center",
    flexDirection: "row",
    flexWrap: "wrap"
  },
  containerPhoto: {
    paddingTop: 3,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF"
  },
  map: {
    margin: 5,
    width: 150,
    height: 150,
    alignSelf: "center",
    backgroundColor: "#34495e"
  },
  alert: {
    margin: 5,
    width: 150,
    height: 150,
    alignSelf: "center",
    backgroundColor: "#f1c40f"
  },
  chat: {
    margin: 5,
    width: 150,
    height: 150,
    alignSelf: "center",
    backgroundColor: "#27ae60"
  },
  historic: {
    margin: 5,
    width: 150,
    height: 150,
    alignSelf: "center",
    backgroundColor: "#e67e22"
  },
  text: {
    color: "#fff",
    alignSelf: "center",
    fontSize: 15
  },
  iconStyle: {
    alignSelf: "center",
    paddingTop: 30
  }
});

const select = ({ dashboard, confirmation, auth, push, maps }) => {
  const { users, error, isValid, isFetching, errorReq } = dashboard;
  const { isLoggedIn, auth_token } = confirmation;
  const { cpf } = auth;
  const { positions } = maps;
  return {
    positions,
    users,
    auth_token,
    cpf,
    error,
    isValid,
    isLoggedIn,
    isFetching,
    errorReq
  };
};

export default connect(select, {
  logout,
  fetchPositions,
  fetchHistories
})(DashboardScreen);