Best GitHub parte 3

Hola de nuevo 👋, en este post vamos a crear el backend en Next JS.

Vamos a empezar accediendo a la carpeta api que se encuentra dentro de la carpeta pages que se encuentra dentro de la carpeta src.

Una vez ahí, nos encontraremos con un archivo hello.ts, lo que haremos será renombrarlo a places.ts y hacer que quede de esta forma:

import type { NextApiRequest, NextApiResponse } from "next";

export default async function handler(req: NextApiRequest,res: NextApiResponse ) {

}

Ahora en la carpeta src vamos a proceder a crear una carpeta llamada utils, que es la que va a contener todas las utilidades que vamos a utilizar en el frontend como en el backend.

Dentro de la carpeta utils vamos a crear un archivo messages.ts, que va a tener los mensajes de respuesta que se van a usar en más de un lugar, así evitaremos reescribir código.

Dentro del archivo messages.ts vamos a agregar el siguiente código:

const messages = {
  error: { message: "There was an error, please try again later" },
  notFound: { message: "Not found" },
};

export default messages;

La constante messages almacena un objeto con dos objetos, el primero lo vamos a utilizar como un mensaje de error general y el segundo como un mensaje de error cuando traten de acceder a alguno de nuestros endpoints con un método distinto al que establezcamos.

Una vez aclarado, accederemos a nuesto archivo places.ts y dentro de la función handler agregaremos el siguiente código:

if (req.method !== "GET") {
  return res.status(404).json(messages.notFound);
}

El if sirve para que si alguien trata de acceder a la ruta /api/places con un método distinto al método GET le responda al usuario con un código de estado 404 y el mensaje { message: "Not found" } en formato JSON.

Así que nuestro archivo places.ts se tendría que ver de esta forma:

import type { NextApiRequest, NextApiResponse } from "next";

import messages from "@/utils/messages";

export default async function handler(req: NextApiRequest,res: NextApiResponse) {
  if (req.method !== "GET") {
    return res.status(404).json(messages.notFound);
  }
}

Ahora crearemos en la carpeta utils un archivo usersCall.ts, que usaremos para traer con prisma todos los usuarios que tenemos agregados en nuestra base de datos de MongoDB Atlas.

Una vez creado agregaremos el siguiente código:

import { PrismaClient } from "@prisma/client";

const prisma = new PrismaClient();

const usersCall = async () => {
  const users = await prisma.user.findMany();
  const usersOrdered = users.sort((a, b) => b.total - a.total);
  return usersOrdered;
};

export default usersCall;

En la constante users estoy guardando todos los usuarios que he mandado a llamar con prisma con la función findMany, y en la constante usersOrdered estoy guardando todos los usuarios ordenados por el total de mayor a menor con el método sort de JavaScript.

Ahora en nuestro archivo places.ts después del if agregaremos el siguiente código:

try {
    const users = await usersCall();

    if (users.length === 0) {
      return res.status(400).json(messages.error);
    }

    res.status(200).json(users);
} catch (error) {
    res.status(400).json(messages.error);
}

En la constante users estoy guardando los usuarios ordenados de mayor a menor por el total desde la función usersCall, en el if estoy comprobando que si los usuarios son cero, me retorne un código de estado 400 y un mensaje { message: "There was an error, please try again later" } en formato JSON.

Y si no, me retorne un código de estado 200, y todos los usuarios ordenados de mayor a menor en formato JSON, pero si todo eso falla, ya sea porque la base de datos se encuentre caída o alguna causa no provista, me retorne con un catch la respuesta de código de estado 400 y el mensaje { message: "There was an error, please try again later" } en formato JSON.

Así que tu archivo places.ts tendría que verse de esta forma:

import type { NextApiRequest, NextApiResponse } from "next";

import messages from "@/utils/messages";
import usersCall from "@/utils/usersCall";

export default async function handler(req: NextApiRequest,res: NextApiResponse) {
  if (req.method !== "GET") {
    return res.status(404).json(messages.notFound);
  }

  try {
    const users = await usersCall();

    if (users.length === 0) {
      return res.status(400).json(messages.error);
    }

    res.status(200).json(users);
  } catch (error) {
    res.status(400).json(messages.error);
  }
}

Eso es todo por este post, en el siguiente post crearemos una ruta más para poder cambiar los lugares consultando el api pública de GitHub.