unioil-loyalty-rn-app/app/screens/tracker/index.js

import * as React from 'react';
import { 
  ScrollView, 
  TouchableOpacity, 
  ImageBackground, 
  View,
  Text, 
  Alert,
  RefreshControl
} from 'react-native';
import { 
  useState, 
  useEffect 
} from 'react';
import { connect } from "react-redux";
import NetInfo from "@react-native-community/netinfo";
import CustomHeader from '../../components/header.js';
import Assets from '../../components/assets.manager.js';
import EP from '../../components/api/endpoints.js';
import Theme from '../../components/theme.style.js';
import Icon from '../../components/icons.js';
import Elements from '../../components/elements.js';
import DB from '../../components/storage/';
import CustomSafeArea from '../../components/safeArea.component.js';
import REQUEST from '../../components/api';
import moment from 'moment';
import { useIsFocused } from '@react-navigation/native';

const Banner = (props) => {
  return (<ImageBackground source={Assets.boarding[3]} style={{flex: 1, justifyContent: 'flex-end', alignItems: 'center'}}>
    <View style={{flex: 1, width: '100%', height: '100%', backgroundColor: 'rgba(0,0,0,0.3)', padding: 30, justifyContent: 'flex-end', alignItems: 'center'}}>
      <Text style={{alignSelf:'center', color: '#fff', fontFamily: 'Arial', fontSize: 16, marginBottom: 15}}>Track your gas consumption and mileage</Text>
      <TouchableOpacity onPress={props.onPress} style={{alignSelf:'center', padding: 15, marginBottom: 20, backgroundColor: Theme.colors.primary, borderRadius: 7}}>
        <Text style={{fontSize: 16, fontFamily: 'Arial', color: "#fff"}}>Add Tracker</Text>
      </TouchableOpacity>
    </View>
  </ImageBackground>)
}

const Tracker = (navigation) => {
  const [connected, setconnected] = useState(true)
  const [refreshing, setRefreshing] = useState(false); 
  const [loading, setLoading] = useState(true)
  const [trackers, settrackers] = useState([])
  const isFocused = useIsFocused()

  const fetch = async () => {
    let SESSION = await DB.session();

    REQUEST("tracker", "get", {
      Authorization: SESSION.token
    }, {}, {}, (res) => {
      if(res.message !== "Empty") {
        settrackers(res.data);
      } else {
        settrackers([]);
      }
      setRefreshing(false);
      setLoading(false);
    }, (err) => {
      setLoading(false);
      setRefreshing(false);
    }, "Fetch", "Tracker")
  }

  const DeleteTracker = async (data) => {
    setLoading(true);

    const SESSION = await DB.session();

    REQUEST(
      'tracker', 
      'delete', 
      { Authorization: SESSION.token }, 
      { noID: true, value: data.fueltracker_uuid }, 
      {},
      (_) => {
        const taskToShow = `\nTracker has been successfully deleted!`;
    
        init();
        Alert.alert("Information", taskToShow, [{text: "OK"}]);
      },
      (error) => {
        setLoading(false);
        Alert.alert("Information", `\n${error.message}`)
      },
      "Tracker",
      "Delete"
    )
  }

  const init = async () => {
    fetch();
  }

  useEffect(() => {
    NetInfo.fetch().then(state => {
      if(state.isConnected){
        if(isFocused){
          init()
        }
      }else{
        setconnected(false);
        Elements.nointernet2(navigation)
      }
    })
  }, [isFocused])

  const onReload = () => {
    setRefreshing(true);
    init();
  }

  const renderTrackings = () => {
    return trackers.map((data, index) => {
      let estimate = Theme.formatter.CRNCY(data.kml);
      return (
        <TouchableOpacity onPress={() => navigation.navigation.navigate("EditTracker", {
          edit: data,
          reload: () => onReload()
        })} key={index} style={[{padding: 15, flexDirection: 'row', backgroundColor: navigation.app_theme?.theme.dark ? navigation.app_theme?.theme.colors.border : '#fff', borderRadius: 5, borderWidth: 0.5, marginBottom: 5, borderColor: navigation.app_theme?.theme.dark ? navigation.app_theme?.theme.colors.border : 'lightgray', elevation: 0.5 }, index === (trackers.length - 1) && { marginBottom: 70 }]}>
          <View style={{flex: 1, marginTop: 20}}>
            <View style={{flex: 1, flexDirection: 'row'}}>
              <Text style={{flex: 0, fontSize: 8, color: navigation.app_theme?.theme.dark ? navigation.app_theme?.theme.colors.text : Theme.colors.primary, marginTop: 15, fontWeight: 'bold'}}>km/L</Text>
              <Text style={{flex: 1, fontSize: 24, padding: 5, marginLeft: 5, fontWeight: 'bold', color: navigation.app_theme?.theme.dark ? navigation.app_theme?.theme.colors.text : Theme.colors.darkerGray}}>
                {estimate}
              </Text>
            </View>
            <View style={{flex: 1, flexDirection: 'row', marginTop: 5}}>
              <Text style={{flex: 0, padding: 5, paddingLeft: 0}}>
                <Icon.MaterialCommunityIcons name="gas-station" size={12} color={Theme.colors.primary} />
              </Text>
              <Text style={{flex: 1, paddingTop: 2, color: navigation.app_theme?.theme.colors.text}}>{data.fueltype_name}</Text>
            </View>
            <View style={{flex: 1, flexDirection: 'row', marginTop: 5}}>
              <Text style={{flex: 0, padding: 5, paddingLeft: 0}}>
                <Icon.FontAwesome name="dashboard" size={12} color={Theme.colors.primary} />
              </Text>
              <Text style={{flex: 1, paddingTop: 2, color: navigation.app_theme?.theme.colors.text}}>{Theme.formatter.CRNCY(data.km) + " km"}</Text>
            </View>
            <View style={{flex: 1, flexDirection: 'row', marginTop: 5}}>
              <Text style={{flex: 0, padding: 5, paddingLeft: 0}}>
                <Icon.MaterialCommunityIcons name="fuel" size={12} color={Theme.colors.primary} />
              </Text>
              <Text style={{flex: 1, paddingTop: 2, color: navigation.app_theme?.theme.colors.text}}>{Theme.formatter.CRNCY(data.liters) + " L"}</Text>
            </View>
          </View>
          <View style={{justifyContent: 'space-between'}}>
            <View style={{alignSelf: 'flex-end', color: Theme.colors.darkGray}}>
              <Text style={{ color: navigation.app_theme?.theme.colors.text }}>{moment(data.date).format("MMMM DD, YYYY")}</Text>
            </View>
            <View style={{alignItems: 'flex-end'}}>
              <TouchableOpacity onPress={() =>
                Alert.alert("Information", "\nDo you want to delete this fuel tracker?", [{text: "CANCEL"}, {text: "OK", onPress: () => DeleteTracker(data)}])
              } style={{}}>
                <Icon.MaterialIcons name="delete" size={35} color={Theme.colors.primary} />
              </TouchableOpacity>
            </View>
          </View>
        </TouchableOpacity>
      )
    })
  }

  if(!connected && !loading){
    return (
      <View style={{flex: 1, flexDirection: 'column'}}>
        <CustomHeader title="Fuel Efficiency Tracker" menu={false} navigation={navigation} top={45} />
        <Elements.nointernet 
          message="No internet found. Please check your internet connection." 
          buttonText="Try Again" 
          onPress={() => {
            NetInfo.fetch().then(state => {
              if(state.isConnected){
                init()
              }else{
                Elements.nointernet2(navigation)
              }
            })
          }}
        />
      </View>
    )
  }

  const renderNotLoaded = () => {
    if(loading) {
      return null
    }
  }

  return (
    <CustomSafeArea>
      <CustomHeader title="Fuel Efficiency Tracker" menu={false} navigation={navigation} />
      {renderNotLoaded()}
      {trackers.length == 0 && !loading ? 
        <Banner onPress={() => navigation.navigation.navigate("AddTracker", {
          reload: () => onReload()
        })} /> : null}
      {trackers.length > 0 && !loading ?
        <View style={{flexDirection: 'column', flex: 1}}>
          <ScrollView 
            refreshControl={
              <RefreshControl 
                refreshing={refreshing}
                onRefresh={onReload}
              />
            } 
            style={{flex: 1, padding: 10}}
          >
            {renderTrackings()}
            <View style={{margin: 15}}></View>
          </ScrollView>
          <TouchableOpacity onPress={() => navigation.navigation.navigate("AddTracker", {
            reload: () => onReload()
          })} 
            style={{
              justifyContent: 'center',
              alignItems: 'center',
              position: 'absolute',
              bottom: 15,
              right: 15,
              width: 60,
              height: 60,
              borderRadius: 30,
              backgroundColor: Theme.colors.primary,
              shadowColor: "#000000",
              elevation: 7
            }}
          >
            <Icon.Feather name="plus" color="#fff" size={25} />
          </TouchableOpacity>
        </View> : null
      }
      <Elements.loaderView 
        title="Validating"
        message="Please wait..."
        isDarkMode={navigation.app_theme?.theme.dark}
        backgroundColor={navigation.app_theme?.theme.colors.border}
        color={navigation.app_theme?.theme.colors.text}
        visible={loading} />
    </CustomSafeArea>
  );
}

const mapStateToProps = (state) => {
  return {
    app_theme: state.appThemeReducer.theme
  }
}

export default connect(mapStateToProps, null)(Tracker)