Preparando el UI público

Es hora de trabajar con toda la parte publica de nuestro blog.

Crearemos la ruta blog, leeremos nuestros posts y los colocaremos en una vista de lista.

Para ello, creamos el archivo de ruta /blog.tsx y escribimos una función loader para conseguir todos los posts desde la base de datos.

También escribiremos el JSX necesario para mostrar cada uno de nuestros posts, en el cliente.

💿 Leyendo la base de datos desde un loader de Remix

El loader de Remix es el mejor lugar que existe para conseguir los datos que una ruta necesitará.

Aunque existe la posibilidad de conseguir los datos en segundo plano, entregar una pagina HTML con la información de los posts ya incluida, resulta una mejor experiencia para el usuario. 👏🏼

type LoaderData = { posts: Post[] };
export const loader = async ({ request }:LoaderArgs) => {
  // const user // @TODO: only user's posts
  const posts = await db.post.findMany();
  return { posts };
};

Sí, así de fácil.

Ahora que los tenemos es momento de dibujarlos con un componente adecuado. 🖍️

🕹️ Escribiendo el cliente

El cliente será la interfaz responsable de una sola cosa. De mostrar una lista de Cards una por cada posts del blog.

Con un enlace que le permita al usuario navegar a la lectura del post seleccionado.

export default function Blog() {
  const { posts } = useLoaderData<typeof loader>();
  return ( //...)
}

Observa que usamos useLoaderData en el cliente, así nos traemos los datos que el loader ha preparado para nuestro componente. ¿Apoco no es genial? 🏆

👀 se define el tipo para useLoaderData como <typeof loader> para lograr un “tipado” seguro completo (fully type safe), cliente-servidor (end to end). Esto es posible solamente si utilizas el tipo LoaderArgs en lugar de LoaderFunction.

Nuestro JSX queda así:

<section className="max-w-3xl mx-auto flex flex-wrap gap-2 py-20 ">
  {posts.map((p) => (
    <BlogCard id={p.id} title={p.title} key={p.id} />
  ))}
</section>

Ahora estamos usando el componente BlogCard que puedes encontrar en la carpeta components/ del repositorio. Y le proporcionamos las propiedades title, id y la key única obligatoria, no te olvides de colocar esta ultima.

Vamos a leer el componente <BlogCard>

Para tener bien claro, todo lo que hace nuestro código en esta ruta, vamos también a leer el componente <BlogCard>, este componente hace lo mismo que <PostCard>, mostrar cada uno de los posts, pero <BlogCard> muestra los post de manera más atractiva.

import { Link } from "@remix-run/react";
import relativeTime from "dayjs/plugin/relativeTime";
import dayjs from "dayjs";
import "dayjs/locale/es-mx";

dayjs.extend(relativeTime);
dayjs.locale("es-mx");

export const BlogCard = ({
  title,
  slug,
  cover,
  createdAt,
}: {
  createdAt: string | Date;
  cover?: string;
  slug: string;
  title: string | null;
}) => {
  return (
    <Link
      to={`${slug}`}
      className="bg-gradient-to-r from-slate-600 to-slate-800 text-white p-4 rounded-md hover:ring-indigo-500 hover:ring transition-all flex items-center gap-4 min-w-full"
    >
      <img
        src={cover}
        alt="cover"
        className="rounded-sm object-cover max-w-xs"
      />
      <div>
        <h3 className="text-2xl"> {title}</h3>
        <span className="font-thin text-sm text-gray-300">
          {dayjs(createdAt).from(new Date())}
        </span>
      </div>
    </Link>
  );
};

Al principio de este archivo encontramos la configuración de la biblioteca dayjs, misma que usamos para mostrar la fecha con un formato tipo “desde” (.from).

Esta tarjeta recibe cuatro props que usará en elementos para el título, la fecha y la imagen, además de usar el slug para el enlace.

Observa cómo utilizamos dayjs aquí.

🚾 Ahora tenemos una vista pública, nuestra lista de posts

Leer los posts de nuestra base de datos con un loader y el cliente de Prisma, ha sido relativamente fácil, ¿no crees? 🤔

Pero no nos detengamos aquí. Vamos a personalizar un poco más nuestra vista de lista, que también servirá como home page. De nuevo, para economizar nuestro proyecto. 💵🧧