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

import * as React from 'react';
import { useState } from 'react';
import { connect } from "react-redux";
import { TouchableOpacity, View, Text, Alert } from 'react-native';
import { openModal } from '../../redux/actions/AlertActions.js';
import { dateFormaterForAndroid } from '../../utils/date.js';
import EP from '../../components/api/endpoints.js';
import CustomHeader from '../../components/header.js';
import Theme from '../../components/theme.style.js';
import Elements from '../../components/elements.js';
import CustomIcon from '../../components/icons.js';
import DB from '../../components/storage';
import CustomForm from './customform';
import moment from 'moment';
import CustomSafeArea from '../../components/safeArea.component.js';
import axios from 'axios';
import REQUEST from '../../components/api';

const Tracker = (navigation) => {
  console.log(navigation.navigation.goBack)
  const params = navigation.route ? navigation.route.params : null
  const [datepicker, setdatepicker] = useState(false);
  const [date, setdate] = useState();
  const [fueltypeName, setfueltypeName] = useState();
  const [fueltypeUUID, setfueltypeUUID] = useState();
  const [fueltpyeID, setfueltypeID] = useState();
  const [fueltypePrice, setfueltypePrice] = useState();
  const [distance, setdistance] = useState();
  const [liters, setliters] = useState();
  const [loading, setLoading] = useState(false);

  const [update, setupdate] = useState(false);

  if(params.edit && !update){
    setdate(moment(params.edit.date).format("MMMM DD, YYYY"))
    setfueltypeName(params.edit.fueltype_name);
    setfueltypeUUID(params.edit.fueltracker_uuid);
    setfueltypeID(params.edit.fueltype_id);
    setfueltypePrice(params.edit.price);
    setdistance(params.edit.km);
    setliters(params.edit.liters);
    setupdate(true);
  }

  const DeleteTracker = async () => {
    console.log(fueltypeUUID)
    setLoading(true);
    const SESSION = await DB.session();

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

  const Update = async () => {
    setLoading(true);

    const SESSION = await DB.session();
    REQUEST(
      'tracker', 
      'patch', 
      { Authorization: SESSION.token }, 
      { noID: true, value: fueltypeUUID }, 
      {
        date: Theme.formatter.DT4API(date),
        fueltype_id: fueltpyeID,
        km: distance,
        liters: liters,
        price: fueltypePrice,
        kml: distance / liters,
        total: liters * fueltypePrice
      },
      (_) => {
        setLoading(false);
        onDone("updated")
      },
      (error) => {
        setLoading(false);
        Alert.alert("Information", `\n${error.message}`)
      },
      "Tracker",
      "Delete"
    )
  }

  const onDone = (task) => {
    const taskToShow = `\nTracker has been successfully ${task}!`;

    navigation.route.params?.reload();
    Alert.alert("Information", taskToShow, [{text: "OK", onPress: () => navigation.navigation.goBack()}]);
  }

  const setSelected = (fuel) => {
    setfueltypeName(fuel.name);
    setfueltypeID(fuel.id);
    setfueltypePrice(fuel.price);
  }

  return (
    <CustomSafeArea>
      
      <Elements.CustomDatePicker 
        visible={datepicker}
        date={date && new Date(dateFormaterForAndroid(date))}
        textColor={navigation.app_theme?.theme.colors.text}
        isDarkMode={navigation.app_theme?.theme.dark}
        modalBackgroundColor={navigation.app_theme?.theme.colors.border} 
        onConfirm={(selectedDate) => {
          setdate(selectedDate ? moment(selectedDate).format("MMMM DD, YYYY") : date != null ? date : null)
          setdatepicker(false)
        }}
        onCancel={() => setdatepicker(false)}/>
      <CustomHeader 
        title="Edit Tracker" 
        menu={false} 
        back={true} 
        backscreen="Tracker" 
        navigation={navigation}
        rightMenu={
          <TouchableOpacity onPress={() => 
            Alert.alert("Information", "\nDo you want to delete this fuel tracker?", [{text: "CANCEL"}, {text: "OK", onPress: DeleteTracker}])
          } style={{alignSelf: 'flex-end', right: 10}}>
            <CustomIcon.MaterialIcons name="delete" size={25} color="#fff" />
          </TouchableOpacity>
        }/>

        <View style={{marginTop: 20, padding: 0, alignItems: 'center', flex: 1}}>
          <CustomForm 
            items={
              [
                {
                  name: "Date",
                  type: "button",
                  value: date,
                  disabled: true,
                  onClick: () => setdatepicker(true),
                  onChangeText: (val) => setdate(val)
                },
                {
                  name: "Fuel Type",
                  type: "button",
                  value: fueltypeName,
                  disabled: true,
                  onClick: () => navigation.navigation.navigate("AddFuelType", {fueltypeUUID: fueltypeUUID, get: (val) => setSelected(val), reload: () => navigation.route.params.reload()})
                },
                {
                  kb: "numeric",
                  name: "Distance Travelled",
                  icon: 'info',
                  value: Theme.formatter.CRNCYNOFIXED(distance),
                  category: "KM",
                  onChangeText: (val) => {
                    if(val && val.includes(".") && val.split(".")[1].length > 2) return;
                    if(val && (val.indexOf(".") !== val.lastIndexOf("."))) return;
                    if(val && !/^[\d,.]+$/.test(val)) return;
                    setdistance(val.replace(/,/g, ""));
                  },
                  onIconClick: () => Alert.alert("Information", '\n' + "To measure distance travelled, make sure to reset your trip meter every time you gas full tank.")
                },
                {
                  kb: "numeric",
                  name: "Liters Fueled up",
                  value: Theme.formatter.CRNCYNOFIXED(liters),
                  category: "L",
                  onChangeText: (val) => {
                    if(val && val.includes(".") && val.split(".")[1].length > 2) return;
                    if(val && val.includes(".") && (val.indexOf(".") !== val.lastIndexOf("."))) return;
                    if(val && !/^[\d,.]+$/.test(val)) return;
                    setliters(val.replace(/,/g, ""));
                  }
                }
              ]}/>
        </View>
        <TouchableOpacity 
          onPress={Update} 
          style={{width: '90%', alignSelf: 'center', borderRadius: 10, padding: 15, backgroundColor: Theme.colors.primary, marginBottom: 20}}
          >
          <Text style={{alignSelf: 'center', color: '#fff', fontSize: 16, fontFamily: 'Arial'}}>Save Tracker</Text>
        </TouchableOpacity>
        <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
  }
}

const mapDispatchToProps = {
  openModal
}

export default connect(mapStateToProps, mapDispatchToProps)(Tracker)