[Project Day 4] Full Tutorial "Todo web app with NextJS Zustand Axios TailwindCSS" React NestJS Mongoose JWT - Mongoose Pagination Query

Hello everyone, welcome to Learn Tech Tips I am Zidane, (my nickname: 鸡蛋)

Good day to you. This series will share with you how to build a web application with server, client side, and you will learn many useful things on this project. 

As the title you will learn how to

- Use NestJs build a server connect with a MongoDB (use JWT for authentication, how to query on server, create schema, entity, controller, service)

- Use NextJS build a client side with TailwindCss fast build component, Zustand state management (easy manage state), Axios Request API.

After check all this full series, I believe you will have a mindset how to build a website app from backend to frontend. You will understand how to become a full stack developer through this todo web app

Full Tutorial TodoList Apps with NextJS Zustand Axios TailwindCSS React NestJS Mongoose JWT (Day 4) 

On day 4: We will focus on how to work with pagination query with mongodb 

src/todos/todos.controller.ts 

we will action on search function, and here is controller of todos

import { TodosDto } from './dto/todos.dto';
import {
  Controller,
  Get,
  Post,
  Body,
  UseGuards,
  Request,
  Param,
  Delete,
  Patch,
  Query,
} from '@nestjs/common';
import { TodosService } from './todos.service';
import { JwtAuthGuard } from 'src/auth/guard/jwt-auth.guard';

@Controller('todos')
export class TodosController {
  constructor(private readonly todosService: TodosService) {}
 
  @UseGuards(JwtAuthGuard)
  @Get('search')
  public async search(
    @Request() req: any,
    @Query('limit') limit: number,
    @Query('page') page: number,
    @Query('job') job: string,
    @Query('type') type: number,
    @Query('status') status: string
  ) {
    
    return await this.todosService.search(req.user.params.username, limit, page, job, type, status);
  }
}   

src/todos/todos.service.ts

you need to use $regex: search like and use

   const todo = await this.todoModel
     .find(conditions)
      .skip((page - 1) * limit)
      .limit(limit)
      .exec()  

	
import { TodosDto } from './dto/todos.dto';
import { HttpException, Injectable } from '@nestjs/common';
import { InjectModel } from '@nestjs/mongoose';
import { Model, Types } from 'mongoose';
import { ITodo } from './interface/todos.interface';
import * as moment from 'moment';
import { ApiSucceedResponse } from './../util/api-success-response.util';
import { ApiErrorResponse } from './../util/api-error-response.util';

@Injectable()
export class TodosService {
  constructor(@InjectModel('Todo') private readonly todoModel: Model<ITodo>) {}

  public async search(
    username: string,
    limit: number, 
    page: number, 
    job: string,
    type: number,
    status: string
  ) { 

    let conditions: any

    if (username) {
      conditions = { username };
    }
 
    if (job) {
      conditions = { ...conditions, job: { $regex: '.*' + job + '.*' } };   // search like
    } 
 
    if (type)  {
      conditions = { ...conditions, type };
    }
 
    if (status) {
      status = status.toUpperCase();
      conditions = { ...conditions, status };
    }
   
    const total:number = await this.todoModel.count( conditions ).exec()

    if (total == 0) {
      return new ApiSucceedResponse('No Task!', []);
    } 
    const todo = await this.todoModel
      .find(conditions)
      .skip((page - 1) * limit)
      .limit(limit)
      .exec() 

    if (!todo) {
      throw new HttpException('Todo not found', 404);
    }

    return new ApiSucceedResponse('Retrieved data successfully', {
      total: total,
      todos: todo,
    });
  }
}  	

See you on day 5 💗

 

Thanks for reading. Any feedback and questions about [Project] Full Tutorial Todo web app with NextJS Zustand Axios TailwindCSS React NestJS Mongoose JWT (Day 4). Leave your comment on below post, we can discuss about it.

✋✋✋✋ Learn Tech Tips - I am Zidane, See you next time