Next js hexagonal ejercicio 1

nextjs hexagonal frontend

Ejercicio practico de arquitectura hexagonal con Nextjs usando app router

Nextjs hexagonal: ej 1

Ejercicio sencillo de arquitecura hexagonal utilizando NextJs +14 con app router y tailwindcss. Enfocado al frontend.

Proceso

1. Estructura app

`npx create-next-app@latest`

Iniciar la aplicación usando el comando de NextJs, usando la carpeta "src".

Estructura hexagonal

Definir las carpetas de una arquitectura hexagonal, en una carpeta llamada "core".

Creación domain y app

Para esta aplicación tendremos que cumplir estas reglas:
- Usuarios con: id(único, puedes generarlo con la fecha + nombre), nombre, roleId (id que lo vincula a otra tabla con su rol, el cual podrá no existir, con lo cual significara que es un usuario normal), createdAt(timestamp de creación) y updatedAt(timestamp de edit).
- Roles con: id(único, puedes generarlo con la fecha + nombre), nombre(nombre del usuario), permissions (tipo de permiso, definido en un enum, con las opciones: "ADMIN", "STUDENT", "STUDENT_PRO"), createdAt(timestamp de creación) y updatedAt(timestamp de edit).
- 🙋‍♂️💡⏫ Para este caso puedes utilizar tipos "string" para las fechas, ya que no usaremos persistencia para nuestro primer repositorio de infraestructura.
- Para los repositorios, necesitaremos definir funciones para "CRUD", en el caso del "Read", buscaremos por id y también todos en el caso de los usuarios. En el caso de los roles definiremos una función para devolver todos los "roles" con un permissions especifico (por ejemplo, todos los administradores)
Creación del dominio.
Creación de los use-cases necesarios.
También puedes realizar la infraestructura, creando así toda la aplicación hexagonal. Sino deberás crear esta parte después.

2. Users

`InMemoryUserRepository`, "Create" user and "Read" users

Crear InMemoryUserRepository, si todavía no se ha hecho.
En "actions", crearemos funciones para "Create" usuarios, utilizando SSR.
En nuestra pagina, implementaremos un componente con un formulario para crear el usuario.
Haremos lo mismo con el "Read", el cual deberá devolver todos los usuarios.
Puedes utilizar estos template para empezar:

  -> componentes 📋

  <!-- Componente Create -->
  <div>
      <h2 className="text-2xl font-bold mb-4">Create User</h2>
      <form className="flex h-20 items-center space-x-4">
        <div className="flex space-x-10 h-20 items-center">
          <label htmlFor="name" className="block font-medium text-gray-700">
            Name
          </label>
          <input
            type="text"
            id="name"
            name="name"
            className="mt-1 block w-full p-4 rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring-primary sm:text-sm"
          />
        </div>
        <button
          className="inline-flex items-center px-4 py-4 border border-transparent hover:border-gray-800  text-sm font-medium rounded-md shadow-sm shadow-gray-300 hover:shadow-lg text-gray-500 bg-primary hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary"
        >
          Create User
        </button>
      </form>
    </div>

  <!-- Pagina -->
  <main  className="container h-dvh mx-auto py-8 px-4 sm:px-6 lg:px-8">
    <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
    <UserForm/>
    <!-- <UsersTable/> Componente para el "Read" -->
    </div>
  </main>

  <!-- Componente Read -->
  <div className="p-6 bg-white shadow-md rounded-lg">
      <h2 className="text-3xl font-semibold mb-6 text-gray-800">Users</h2>
      <div className="overflow-x-auto">
        <table className="min-w-full bg-white border border-gray-300 rounded-lg">
          <thead className="bg-gray-100">
            <tr >
              <th
                scope="col"
                className="px-2 xl:px-6 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider"
              >
                Name
              </th>
              <th
                scope="col"
                className="px-2 xl:px-6 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider"
              >
                Edit
              </th>
              <!--Otras acciones-->
            </tr>
          </thead>
          <tbody className="bg-white divide-y divide-gray-200">
            <!--Por cada usuario-->
              <tr className="hover:bg-gray-50">
                <td className="px-2 xl:px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                  [nombre]
                </td>
                <td className="px-2 xl:px-6 py-4 whitespace-nowrap">
                  <a
                    className="text-blue-600 hover:text-blue-800 font-medium"
                  >
                    Edit
                  </Link>
                </td>
                <!--Futuras acciones-->
              </tr>
            <!---->
          </tbody>
        </table>
      </div>
    </div>

"Update" user

Crearemos la acción de hacer update en actions, implementando-la en una pagina dinámica, la cual utilizara el componente del formulario del usuario.
🧑‍🎓⚠️➡️ En este punto: Solo tendremos un formulario para el usuario, el cual se utilizara para crear y hacer update.
Implementaremos un botón en la tabla de usuarios, que al hacer click nos lleve al formulario para hacer update del usuario escogido (en el template de la tabla puedes encontrar unos estilos para utilizarlo).

"Delete" user

Crearemos la acción de hacer delete, implementando-la en un componente, el cual utilizaremos en la tabla de usuarios. Para el botón puedes utilizar este template:

  <button className="text-red-500 hover:text-red-700">
            Delete
  </button>

⚠️ Tienes que estar verificado para ver este contenido