History/History.tsx

import React from 'react';
import {
    IonContent,
    IonCol,
    IonRow,
    IonButton,
    IonItem,
    IonHeader,
    IonPage,
    IonTitle,
    IonToolbar, IonToast, IonModal, IonInfiniteScrollContent, IonImg, IonLabel, IonTabButton, IonInfiniteScroll, IonIcon, IonText, IonRouterLink, IonFooter
  } from '@ionic/react';
  import { scan, logOut, chevronBackOutline ,refresh} from "ionicons/icons";
import { connect } from "react-redux";
import { Plugins, NetworkStatus } from '@capacitor/core';
import { HistoryAction } from '../../redux/actions/HistoryAction';

interface IProps {
  history: any
  isLoadingData: false,
  historyResponse:[],
  isHistorySuccess:boolean,
  isHistoryErrorData:boolean,
  HistoryErrorMessage:string,
  HistoryAction:Function   
  }


interface IState {

}
const { Network } = Plugins;
/**
 * 
 * History page shows scanned products with quantity and date
 @category Category
 */
class History extends React.Component<IProps, IState>{

  constructor(props: IProps) {
    super(props);
   
  }
  componentDidMount()
  {
   this.getData()       
  }

  /**
   * This function calls history endpoint and renders data 
   */
  getData=()=>
  {
   let store=localStorage.getItem('Store')
    this.props.HistoryAction(store)
  }

  goToBack=()=>{
    this.props.history.push({
      pathname: '/dashboard/scanner'
    })
  }

  render() {
  
    return (
      <IonPage>
        <IonHeader>
          <IonToolbar className="bg-green">
            <IonIcon icon={chevronBackOutline} className="text-yellow" slot="start" size="large" onClick={this.goToBack}/>
            <IonIcon icon={refresh} className="text-yellow" slot="end" size="large" onClick={this.getData}/>
            <IonTitle className="text-yellow">History</IonTitle>
          </IonToolbar>
        </IonHeader>

        <IonItem className="bg-grey">
          <IonLabel className="font-14">Product Name</IonLabel> <IonLabel className="text-center font-14">Quantity</IonLabel>
          <IonLabel className="font-14 text-right">Date</IonLabel>
        </IonItem>
        <IonContent>
          {this.props.historyResponse.map((value: any, index: any) => {
            return (
              <IonItem>
                <IonLabel className="font-14" key={index}>{value.description}</IonLabel>   
                <IonLabel className="font-14 text-center">{value.qty}</IonLabel>             
                 <IonLabel className="font-14 text-right">{value.createdDate}</IonLabel>
                </IonItem>)
          })}

          <IonInfiniteScroll
            threshold="100px">
          </IonInfiniteScroll>


        </IonContent>
      </IonPage>  
    )
    }
  
}
const mapStateToProps = (state: any) => {
  return {
    historyResponse: state.historyState.historyResponse,
    isHistorySuccess: state.historyState.isHistorySuccess,
    isHistoryErrorData: state.historyState.isHistoryErrorData,
    isLoadingData: state.historyState.isLoadingData,
    internetConnection: state.uiState.internetConnection,
  };
}

const mapDispatchToProps = {
  HistoryAction
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(History);