Store/Store.tsx

import React from 'react';
import {
    IonContent,
    IonInput,
    IonButton,
    IonItem,
    IonHeader,
    IonImg,
    IonSelect,
    IonSelectOption,
    IonPage,
    IonGrid,
    IonToolbar, IonRow, IonCol, IonTabBar, IonLabel, IonTabButton, IonButtons, IonIcon, IonText, IonRouterLink
} from '@ionic/react';
import { connectDB, saveData, deleteAllFromReturns } from '../../services/indexedDb';
import { connect } from "react-redux";
import { returnsListAction } from '../../redux/actions/ReturnsActions';
import { fetchStores } from '../../redux/actions/LocationAction';
import './Store.css';
interface IProps {
    history: any,
    returnsResponse: any,
    returnsListAction: Function,
    fetchStores: Function,
    locations: any
}
interface IState {
    selectedStore: any,
}



const STORE_LIST = [
    {
        "storeNo": "008",
        "storeName": "Thornbury"
    },
    {
        "storeNo": "068",
        "storeName": "SHREWSBURY"
    },
    {
        "storeNo": "081",
        "storeName": "IPSWICH"
    },
    {
        "storeNo": "135",
        "storeName": "FALKIRK"
    },
    {
        "storeNo": "364",
        "storeName": "TOTTON HOUNSDOWN"
    }
];

/**
* The module will process requests on a store-by-store basis. 
* A user will be required to select the store for which they are processing their returns 
 @category Category
 */
class Store extends React.Component<IProps, IState>{

    constructor(props: IProps) {
        super(props);

        this.state = {
            selectedStore: (localStorage.getItem('Store') != undefined) ? localStorage.getItem('Store') : '',
        }

        this.getStoreList()
    }


    /**
     * This function is used to fetch stores using get endpoint.
     */
    getStoreList = () => {
        this.props.fetchStores()
    }


     /**
      * This function is used to select store from dropdown and after selecting store it calls returns API.
      */
    setStore(store: any) {
      //  console.log(store)
        var _this = this
        this.setState({ selectedStore: store })
        var existing: any = localStorage.getItem('Store');
        if (existing == null)
            localStorage.setItem('Store', this.state.selectedStore);      
            _this.props.returnsListAction(store) //here for time being hardcoded need to change after testing
      
    }

    /**
     * This function is used to store all records coming from returns table to indexeddb
     * and after that directs to scan barcode page
     */
    redirectToScan = () => {
        var _this = this;
       
            saveData(_this.props.returnsResponse["products"])
            setTimeout(
                function () {
                    _this.props.history.push({
                        pathname: '/dashboard/scanner'
                    })
                }, 2000);

    }


    render() {
        return (
            <IonPage>
                <IonContent>
                    <IonGrid>
                        <IonRow className="custom-col ion-text-center">
                            <IonCol>
                                <IonText>Select the Store</IonText>
                            </IonCol>
                        </IonRow>
                        <IonRow>
                            <IonCol>
                                <IonItem className="border-green">
                                    <div >
                                        <IonSelect name="select_store" placeholder="Select Store" value={this.state.selectedStore} interface="popover" onIonChange={event => this.setStore(event.detail.value)} className="min-width-selected">
                                            {this.props.locations.map((store: any, index: number) => {
                                                return (
                                                    <IonSelectOption key={index} value={store.locationId}  >{store.locationName}</IonSelectOption>
                                                )
                                            })}
                                        </IonSelect>
                                    </div>

                                </IonItem>
                            </IonCol>
                        </IonRow>
                        <IonRow>
                            <IonCol className="ion-text-center">
                                <IonButton onClick={this.redirectToScan} disabled={this.state.selectedStore.length < 1} className="next-button capitalize_case">
                                    Next
                                </IonButton>
                            </IonCol>
                        </IonRow>
                    </IonGrid>

                </IonContent>
            </IonPage>
        )

    }

}

const mapStateToProps = (state: any) => {
    return {
        returnsResponse: state.returnState.returnsResponse,
        isReturnsSuccess: state.returnState.isReturnsSuccess,
        isReturnsErrorData: state.returnState.isReturnsErrorData,
        BarcodErrorMessage: state.returnState.BarcodErrorMessage,
        locations: state.locationState.locations,
        isLocationSuccess: state.locationState.isLocationSuccess,
        isLocationErrorData: state.locationState.isLocationErrorData,
        locationErrorMessage: state.locationState.locationErrorMessage
    };
}

const mapDispatchToProps = {
    returnsListAction,
    fetchStores
}

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