# Tareas para hacer post-tutorial

El tutorial de Remix de 30 minutos (lista de contactos) contiene algunos errores de UX y además es pasible de ser mejorado. He aquí algunas tareas para mejorar la aplicación.

Cada tarea debería ser un commit atómico, o incluso más si es una tarea grande. Es decir, no hagas el punto 1 y 2 y metas todo en un sólo commit.

## Tareas explícitas

1. Agregá [Prettier](https://prettier.io/) al proyecto y creá un npm script `fix:style` que lo corra en modo "fix" contra el proyecto. Commiteá los cambios que te realice tras correrlo.

2. Modificá el código del tutorial para que no cree una nueva tarjeta hasta que no se confirme con el "Save". Actualmente si estás creando una tarjeta, aunque no le hayas escrito nada aún, y se te ocurre cancelar o simplemente cliquear en otra parte de la aplicación, como por ejemplo ir a buscar, queda almacenado (en memoria) una tarjeta "No name". El funcionamiento deseado sería:

a. si me voy de la vista y no he escrito nada, eliminar la tarjeta. Pero si hay algún campo relleno, excepto el de "Notes", entonces dejarla.
b. si presiono el botón de "Cancel", no debería guardar nada, ni siquiera en el arreglo (memoria) que contiene los contactos.

2. (creo que esto ya lo agregaron al nuevo tutorial de Remix) Agregá un botón de favoriteo, como el que sale en la vista de contacto, en la lista de la izquierda. Idealmente no deberías duplicar código, así que tal vez sea un buen momento para crear el componente `<Favorite />`.

3. Hacé que `Delete` no pregunte más si "realmente desea borrar", que borre inmediatamente, pero que haga un borrado virtual,modificá la estructura de contacto para que ahora tenga un campo `isDeleted`. Entonces al mostrar en la lista lateral ahora vas a tener que filtrar los que son `!isDeleted`. Eliminá el alert.

4. Usá una biblioteca o sitio para agregarle un placeholder a los contactos nuevos que no provean un URL de imágen. Puede ser la biblioteca `holder.js` o si preferís un sitio, `placeholder.com`. Hay mogollón similares si preferís buscar otras alternativas.

5. El slug del URL en la vista de contacto muestra actualmente el nombre y apellido del contacto convertidos y pegados con un guión, quiero que modifiques eso de la siguiente manera y orden de prioridad:

a. si el contacto tiene twitter handle, el slug mostrado es ese
b. sino, si hay `first` y/o `last`, usar en este orden de prioridad:
1. `first-last`,
2. `last`,
3. `first`,
4. si hay duplicación: `first-last-id`, `first-id`, `last-id`
5. sino, usar `id`

6. Los contactos que no tengan `first`, `last` ni `twitter` deberían mostrarse con un estilo distintivo en la lista lateral y con un `onHover` que diga "Incomplete contact".

7. En el punto (1) te dí la tarea de no guardar nada si se cancelaba o si uno navegaba a otra vista, sin embargo, si el usuario presiona "Save" demuestra una **intención explícita**. En ese caso, si hay algún campo con contenido, sea cual sea, guardar un contacto "NoName" con lo que haya.

8. Qué pasa con los nombres duplicados a la hora de mostrar una vista con los cambios pedidos en (7)? Cómo podrías hacer para evitar tener que verificar cada vez que vas a mostrar si es un duplicado o no?

## Tareas libres

1. De los "Discussion Topics", el que más me interesa que leas y entiendas es el de _"State Management"_, porque es diferente a lo que se suele hacer en React pelado.

2. De las cosas que vayas leyendo en la documentación, tanto en los "Discussion Topics", como en las guías, si encontrás cosas que le podrías agregar a tu aplicación, aprovechá y agregalas. Por ejemplo, yo agregaría `ErrorBoundary` para manejo de errores inesperados (básicamente en toda ruta donde exista la posibilidad de un `throw`, debería haber un `ErrorBoundary`).

Idealmente, todas tus rutas deberían tener un `ErrorBoundary` exportado desde un componente genérico. Este componente sólo tiene el `body`, lo que mostrás ,no tiene el `<Meta />`, `<Links />`, `<Scripts />`, ni ninguna verduda. Sólo contenido

3. Sería lindo agregarle persistencia con [SQLite](https://www.sqlite.org/), si te animás, con el ORM [Prisma](https://www.prisma.io/) y soporte en SQLite.