Untitled

import React from "react";
// Customizable Area Start

import {
  View,
  Text,
  StyleSheet,
  Image,
  FlatList,
  SafeAreaView,
  TouchableOpacity
} from "react-native";
import { colors } from "../../utilities/src/Colors";
const { primaryColor, shadowColor, darkBlue, deepGrey, white } = colors();


import ReservationsController from "./ReservationsController";
import { house } from "./assets";
import Loader from "../../../components/src/Loader";
import Scale from "../../../components/src/Scale";
import { Daum } from "./ReservationRent";
import { getStorageData } from "../../../framework/src/Utilities";
// Customizable Area End

export default class ReservationRented extends ReservationsController {
  // Customizable Area Start
  async componentDidMount() {
    let role = await getStorageData("userType");
    this.setState({ role: role }, () => {
      this.setCurrentScreen();
    });
    this.historyData()

    this.unsubscribe = this.props.navigation.addListener("didFocus", async () => {
      this.getToken()
    });
    ;
  }

  renderItem = ({ item, index }: {
    item: Daum, index: number
  }) => {
    let endDate = this.formatDate(item.attributes.end_time)
    return (
      <TouchableOpacity
        testID={`maiDataView`}
        style={styles.mainDataView}
        onPress={() => this.navigateTo("UpcomingReservationsDetails", {
          id: item.id,
          tabName: "Upcoming",
          tripType: 'postType'
        })}>
        <View style={styles.dataView}>
          <View style={styles.detailsView}>
            <Image
              style={styles.imageView}
              source={
                item.attributes.images ? { uri: item.attributes.images[0].url }
                  : house
              }
            />
            <View style={styles.dataViewMain}>
              <Text style={styles.name}>{item.attributes?.catalogue_name}</Text>
              <Text style={styles.renterNameTxt}>Renter: <Text style={[styles.renterNameTxt, { color: primaryColor, fontWeight: '700' }]}>{item.attributes.renter_name}</Text></Text>
              <Text style={styles.endingDate}>Ending: <Text style={[styles.endingDate, { fontWeight: '700' }]}>{endDate}</Text></Text>
            </View>
          </View>
          <Text style={styles.deliveryTxt}>Delivery: <Text style={[styles.deliveryTxt, { fontWeight: '600', fontSize: Scale(14), color: darkBlue }]}>{item.attributes.address[0].address}, {item.attributes.address[0].city}.</Text></Text>
          <View style={styles.bottomButton}>
            <TouchableOpacity
              testID="navigate"
              style={styles.modifyView}>
              <Text style={styles.modifyTxt}>MODIFY TRIP</Text>
            </TouchableOpacity>
            <TouchableOpacity style={styles.endTripView}>
              <Text style={[styles.modifyTxt, { color: white }]}>END TRIP</Text>
            </TouchableOpacity>
          </View>
        </View>
      </TouchableOpacity>
    )
  }

  showData = () => {
    return (
      this.state.emptyList ?
        <Text style={styles.noDataFound}>No Data Found</Text>
        : <View style={styles.flatList}>

          <FlatList
            testID="historyData"
            data={this.state.historyData}
            renderItem={this.renderItem} />
        </View>
    )
  }

  // Customizable Area End

  render() {
    // Merge Engine - render - Start
    return (
      // Customizable Area Start 
      <SafeAreaView>
        <Text style={styles.rentTxt}>On Rent</Text>
        {
          this.state.isLoading ?
            <Loader loading={this.state.isLoading} />
            :
            this.showData()
        }
      </SafeAreaView>
      // Customizable Area End
    );
    // Merge Engine - render - End
  }
}
// Customizable Area Start
const styles = StyleSheet.create({
  rentTxt: {
    fontFamily: 'Plus Jakarta Sans',
    fontWeight: '600',
    fontSize: Scale(16),
    color: primaryColor
  },
  mainDataView: {
    borderColor: shadowColor,
    borderWidth: Scale(1),
    shadowColor: deepGrey,
    shadowOffset: {
      width: 0,
      height: 5,
    },
    shadowOpacity: 0.15,
    shadowRadius: 2,
    elevation: 7,
    backgroundColor: white,
    marginBottom: Scale(16),
    borderRadius: Scale(12)
  },
  imageView: {
    height: Scale(80),
    width: Scale(150),
    borderRadius: Scale(12),

  },
  dataView: {
    paddingVertical: Scale(10),
    paddingHorizontal: Scale(8)
  },
  detailsView: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  name: {
    fontFamily: 'Plus Jakarta Sans',
    fontSize: Scale(16),
    fontWeight: '600',
    color: primaryColor
  },
  renterNameTxt: {
    fontFamily: 'Plus Jakarta Sans',
    fontSize: Scale(14),
    fontWeight: '500',
    color: deepGrey,
    marginVertical: Scale(3)
  },
  endingDate: {
    fontFamily: 'Plus Jakarta Sans',
    color: darkBlue,
    fontSize: Scale(14),
    fontWeight: '500'
  },
  dataViewMain: {
    marginLeft: Scale(8)
  },
  deliveryTxt: {
    fontFamily: 'Plus Jakarta Sans',
    fontWeight: '500',
    fontSize: Scale(12),
    color: primaryColor,
    textAlign: 'center',
    marginTop: Scale(10)
  },
  modifyTxt: {
    fontFamily: 'Plus Jakarta Sans',
    fontWeight: '600',
    fontSize: Scale(14),
    color: darkBlue
  },
  modifyView: {
    backgroundColor: white,
    justifyContent: 'center',
    width: '49%',
    borderColor: darkBlue,
    borderWidth: Scale(1),
    borderRadius: Scale(12),
    paddingVertical: Scale(8),
    alignItems: 'center',
  },
  bottomButton: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginTop: Scale(10)
  },
  endTripView: {
    backgroundColor: '#CB0A0A',
    justifyContent: 'center',
    width: '49%',
    borderColor: '#CB0A0A',
    borderWidth: Scale(1),
    borderRadius: Scale(12),
    paddingVertical: Scale(8),
    alignItems: 'center',
  },
  flatList: {
    marginTop: Scale(12)
  },
  noDataFound: {
    justifyContent: 'center',
    alignItems: 'center'
  }

})

// Customizable Area End