https://github.com/arifshariati/dockerized-nestjs-react-mongodb-pagination
dockerized nestjs react pagination with mongoDB is basic filter and pagination example implemented on backend (nestjs). NestJs backend code is focused on generalizing pagination for its usability for future modules to be constructed upon by creating separate paginatModule.
https://github.com/arifshariati/dockerized-nestjs-react-mongodb-pagination
filter mongodb nestjs nodejs pagination query query-builder reactjs
Last synced: 2 months ago
JSON representation
dockerized nestjs react pagination with mongoDB is basic filter and pagination example implemented on backend (nestjs). NestJs backend code is focused on generalizing pagination for its usability for future modules to be constructed upon by creating separate paginatModule.
- Host: GitHub
- URL: https://github.com/arifshariati/dockerized-nestjs-react-mongodb-pagination
- Owner: arifshariati
- License: gpl-3.0
- Created: 2021-05-13T14:27:25.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2021-05-14T18:50:02.000Z (about 5 years ago)
- Last Synced: 2025-02-21T15:51:02.849Z (over 1 year ago)
- Topics: filter, mongodb, nestjs, nodejs, pagination, query, query-builder, reactjs
- Language: JavaScript
- Homepage:
- Size: 976 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# dockerized-nestjs-react-mongoDB-pagination
dockerized nestjs react pagination with mongoDB is basic filter and pagination example implemented on backend (nestjs).
Going though backend code, you will get familized with easy to understand modularized backend implementation in any project in nestjs, which i personally like.
## Key Points
NestJs backend code is focused on genaralizing pagination for its usability for future modules to be constructed upon by creating seperate paginatModule.
### Backend
Paginate Module has two main tasks such as generateQuery and Paginate. generateQuery takes care of request params sent from frontend and Paginate handles formulate data to be sent back such as an object of page, perPage, total etc. below is sample code for PaginatModule service.
```
userPaginate = async (req: Request) => {
let options = this.generateUserQuery(req);
const query = this.userService.find(options);
const page: number = parseInt(req.query.page as any) || current_page;
const limit: number = parseInt(req.query.perPage as any) || per_page;
const total = await this.userService.count(options);
const data = await query.skip((page) * limit).limit(limit).exec();
return {
data,
total,
page,
last_page: Math.ceil(total / limit)
};
}
private generateUserQuery = (req: Request) => {
let options = {};
let and = [];
let or = [];
if(req.query.search){
or.push(
{name: new RegExp(req.query.search.toString(), 'i')},
{email: new RegExp(req.query.search.toString(), 'i')}
);
};
if(req.query.gender){
and.push({gender:req.query.gender});
};
if(or.length >0 && and.length > 0){
options = {
$or: or,
$and: and
};
}else{
if(or.length > 0){
options = {
$or: or
};
}
if(and.length > 0){
options = {
$and: and
};
}
}
return options;
};
```
### Frontend - React
key things to focus on frontend side is how to dynamically joing query fields based on required data state values such as Search Gender etc. Have a look at below code;
```
let endPoint = 'http://localhost:4000/user/all';
const [users, setUsers] = useState([]);
const [search, setSearch] = useState("");
const [gender, setGender] = useState("");
const [page, setPage] = useState(0);
const [perPage, setPerPage] = useState(10);
const [total, setTotal] = useState(100);
// load users on page load
useEffect(() => {
(
async () => {
let arr = [];
arr.push(`page=${page}`, `perPage=${perPage}`,`search=${search}`,`gender=${gender}`);
try{
Axios.get(`${endPoint}?${arr.join('&')}`)
.then(result => {
updateState(result.data);
})
.catch(err => {
console.log('Axios Error', err);
})
}catch(e){
console.log(e);
}
}
)();
},[search,page,perPage,gender]);
const handleChangePage = (event, newPage) => {
setPage(newPage);
};
const handleChangePerPage = (event) => {
setPerPage(event.target.value);
setPage(0);
};
const updateState = (response) => {
setUsers(response.data);
setPage(response.page);
setTotal(response.total);
}
const handleSearch = (event) => {
setSearch(event.target.value);
}
const handleFilterGender = (event) => {
setGender(event.target.value);
}
```
### Docker
Project has been dockerized. I think there is nothing much more to go into Docker and Docker config details.
## Install & User
after forking or cloning project, move to project folder and use below to make project running;
```
docker-compose up
```
Please note, in order to run project in docker, you mush have docker installed in your machine.
Happy Coding !!