Paging react mongoose

//server

// An example of a controller function for Express.js
async getAllUser (req, res) {
    try {
      const limit = parseInt(req.query.limit); // Make sure to parse the limit to number
      const skip = parseInt(req.query.skip);// Make sure to parse the skip to number

      // We are using the '3 layer' architecture explored on the 'bulletproof node.js architecture'
      // Basically, it's just a class where we have our business logic
      const userService = new userService();
      const users = await userService.getAll(limit, skip);

      return res.status(200).json(users);
    } catch(e){
      return res.status(500).json(e)
    }
},

class UserPaginationExample {
    getAll(limit = 0, skip = 0) {
        return UsersModel.aggregate([
            { $match: {} },    // This is your query
            { $skip: skip },   // Always apply 'skip' before 'limit'
            { $limit: limit }, // This is your 'page size'
        ])  
    }
}



//client

import React, { useState, useEffect } from 'react'

const fetchUsers = (limit, skip) => {
    // Make sure you send 'limit' and 'skip' as query parameters to your node.js server
    fetch(`/api/users?limit=${limit}&skip=${skip}`) 
        .then((res) => {
            this.setState({
                users: res.data;
            })
        })
}

const userList = () => {

    const [users, setUsers] = useState([]);
    const [limit, setLimit] = useState(20);
    const [skip, setSkip] = useState(0);

    const nextPage = () => {
        setSkip(skip + limit)
    }

    const previousPage = () => {
        setSkip(skip - limit)
    }

    useEffect(() => {
        fetchUsers(limit, skip)
    }, [skip, limit])


    return (<div> 
        <div> 
            { 
                users.map(user => 
                    <div> 
                        <span> { user.name } </span>
                        <span> { user.email } </span>
                        <span> { user.lastLogin } </span>
                    </div>
                )
            }
        </div>
        <div> 
            <div onClick={nextPage}> Previous Page </div>
            <div onClick={previousPage}> Next Page </div> 
        </div>
    </div>)
}

Source: softwareontheroad.com

Similar codes

0 vote208 views1 answer
React roter dom npm
Javascript React
0 vote252 views1 answer
Discord bot remove message reaction
Javascript React
0 vote195 views1 answer
React bootstrap navbar align right buttons
Javascript React
0 vote212 views1 answer
Ticking clock react js
Javascript React
0 vote182 views1 answer
Use of parse in react
Javascript React
3 votes197 views1 answer
React proxy error: could not proxy request from localhost:3000 to http localhost:5000 econnreset
Javascript React
1 vote237 views1 answer
How to execute function without using onclick on react code example
Javascript React
0 vote195 views1 answer
Change navigation animation react native
Javascript React
0 vote196 views1 answer
Get image from gallery react native
Javascript React
0 vote229 views1 answer
React throttle render
Javascript React