I am having problem to fetch limited records for two different "basic" or "premium" subscribers and show records count in pagination in ReactJS

Question

I am trying to fetch limited records for "Basic" and "Premium" subscribers and show records count in pagination.

I have tried a lot of ways to show the records in below format.

If, I create "BASIC" subscriber then its "value = 0" and for "PREMIUM" its "value = 1".

1. For "BASIC" subscriber I want to show Latest 30 records. Like:

   • If, I have "total = 8" records. then, it will fetch 8 records and shows (1-8 out of 8) records in pagination.
   • If, I have "total = 35" records. then. it will fetch latest 30 records and shows (1-30 out of 30) records in pagination, because, i want to show 10 latest records for basic user.

2. For "PREMIUM" subscriber I want to show Latest 50 records with pageSize of 30. Like:

   • If, I have "total = 55" records. then, it will fetch the records in the form of {30-30} and shows (1-30 out of 55) in first page and (31 - 55 out 55) in the next page in pagination.
   • If, I have "total = 75" records. then. it will fetch latest 100 records and shows (1-30 out of 50) in first page and (31 - 50 out of 50) in the next page in pagination, because, i want to show latest 50 records for Premium user.

---

Below, Is my code, Please correct me where i am wrong. Thank you for any help.

Condition:

1. If userType = 0 Then, User = "BASIC"
2. If userType = 1 Then, User = "Premium"

---

 // const pageSize = parseInt(50);
    
    
    this.state = {
                pageInfo: {
                    offset: 0,
                    limit: (userType === 1)? premium: basic,
                    total: -1
                },
                currentPage: 1,
                totalRecords: null,
                currentRecords: [],
                logRecords: [],
    }
    
    // Here, I am fetching data from API using ajax request
    
    myUserRecords(){
                 var pageInfo = {};
                 pageInfo = this.state.pageInfo;
                 pageInfo = { ...pageInfo, total: -1 }
                 
                 if (this.state.currentRecords.length !== 0 && ((this.state.currentPage * 
                     this.pageLimit) - this.pageLimit) > this.state.currentRecords.length) {
                     
                      this.setState({ currentPage: 1 })
                      pageInfo = { ...pageInfo, offset: 0 }
                  }
    
            $.ajax({
                method: "GET",
                url: API + encodeURIComponent(JSON.stringify(filter)),
                dataType: 'json',
            })
    
           .done(function (result) {
    
                this.setState({ logRecords : result.records, pageInfo : result.pageInfo });
    
                let currentPage = this.state.currentPage;
                
                if (result.records.length !== 0 && this.state.currentPage === 0) {
                    currentPage = 1;
                }
    
                 if(currentPage>1){
            self.setState({
                currentPage: currentPage, records: resultObj.records,
                pageInfo: resultObj.pageInfo
            });
        }else{
            self.setState({
                currentPage: currentPage, totalRecords: resultObj.pageInfo.total, records: resultObj.records,
                pageInfo: resultObj.pageInfo
            });
        }   
           })
          .fail(function (error) {
                if(error == "error"){ return }
          });
    }
    
    
    getStartEndValue = () => {
            let start =((this.state.currentPage-1) * this.pageLimit) + 1;
            let end = this.state.currentPage * this.pageLimit;
            if(end > this.state.userRecords)
            {
                end = this.state.userRecords
            }
            return { start , end }
    }
    
    onPageChanged = (data) => {
            const { records } = this.state;
            const { currentPage, totalPages, pageLimit } = data;
            let new_offset = (currentPage * pageLimit) - pageLimit
            let pageInfo = { ...this.state.pageInfo, offset: new_offset }
            if (currentPage === 0 && this.state.currentRecords.length > 0) {
                currentPage = 1
            }
            const offset = (currentPage - 1) * pageLimit;
            const currentRecords = records.slice(offset, offset + pageLimit);
            this.setState({ currentPage, currentRecords, totalPages, pageInfo }, () => {
                this.myUserRecords();
            });
     };
    
     render() { 
            let { start , end } = this.getStartEndValue();
          
            <div className="paginationNew">
              <div className="recordCount">
                   
                     {this.state.totalRecords > 0 ?
                             <h2 className={"text-dark"}>
                                    
                              {/* <strong className="text-secondary"> {start} - {end} 
                              out of {this.state.totalRecords}</strong>{" "}  */}
    
                              <strong className="text-secondary"> {start} - {end} out of 
                              {this.state.pageInfo.limit}</strong>{" "} 
    
                              </h2>  : "No records found"  }
              </div>
              <div className="paginationComp">
                  <NewPagination
                      totalRecords={this.state.totalRecords}
                      pageLimit={(userType === 1)? premium: basic}
                      pageNeighbours={1}
                      onPageChanged={this.onPageChanged}
                      current_page={this.state.currentPage}
                   />
              </div>
            </div>
    }

Answer 1

I have added pageSize for 30 record on each page for premium.

const pageSize = parseInt(30);


constructor() {
super();
this.state = {
            pageSize: (userType === 1)? pageSize: basic,
            pageInfo: {
                offset: 0,
                limit: (userType === 1)? pageSize: basic,
                total: 0
            },
            totalRecords: null,
            totalCount: (userType === 1)? premium: basic,

}
            this.pageLimit = this.state.pageSize;
}

In loadRecords(), i give condition after API call inside the .done function.

• If totalRecords is > then (Basic/Premium) limit value the it will
  give only logCount values of record which is already assign for (BASIC/Premium), otherwise, giving totalRecords.

  loadRecords(){

       .done{
               const totalRecords = (result.pageInfo.total > logCount)? logCount: result.pageInfo.total;
  
               this.setState({ currentPage : currentPage, totalRecords : totalRecords, records: result.records, pageInfo : result.pageInfo});
            }
  

  }