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
Agregá Prettier 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.
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.
(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 />.
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.