Crear un filtro en React.js, Node.js y Mongoose

La forma de pensar al momento de crear features bajo el stack MERN es enfocarse en componentes, acciones y estados. En este caso nosotros vamos a crear un input que se va encargar de envíar datos a nuestra API y que a su vez, nuestra API ejecute búsquedas en MongoDB. La interfaz que vamos a usar para comunicarnos con nuestra DB es Mongoose.

El proyecto que vamos a usar está explicado en post anteriores, pueden ver el POST DEL FRONTEND y también el POST DE LA API

1. Crear el componente: Vamos a enfocarnos en el módulo clients, entonces, debemos crear el componente SearchInputClients de la siguiente forma:

Primero importamos Input de reactstrap, la misma es una librería de bootstrap para React y podemos usar el HTML que ella ofrece. Luego conectamos al store que ya tenemos configurado previamente al componente y después llamamos la acción que vamos a usar para ejecutar el evento de búsqueda.

Podemos notar que, el evento onChange del input va ejecutar una función onChange que va actualizar el estado del componente para luego tomar los datos del input y pasarlos a la acción que ya tendríamos disponible del store.

2. Crear la acción: Cuando creamos la acción en el store, una de las cosas que debemos analizar es si recibe o no datos o parámetros, en este caso la acción va recibir datos del componente para ejecutar una petición http a nuestra API, la cual configuramos de la siguiente manera:

3. Crear el endpoint en nuestra API: Como podemos ver, ejecutamos los mismos reducers que se disparan al momento de cargar el componente de lista de clientes y mostrar los datos, ¿por qué? porque necesitamos mostrar los datos del filtro de la misma forma, entonces no debemos crear nuevos reducers para este punto. Lo único que debemos crear es un endpoint en el API que nos devuelva los datos filtrados que le vamos a enviar.

Ahora vemos el módulo clients de nuestra API donde hemos creado el endpoint que necesitamos, la cual, recibe el dato como parámetro y toma ciertas decisiones. En el momento de que el API reciba algún dato, él va buscar en MongoDB dicho dato a través de la función de la linea 140. Si en algún punto el API recibe una petición sin datos, el API valida y evita que se rompa el front. ¿Por qué se rompería el front? porque el mismo en la lista de clientes ejecuta un map para recorrer la info y para que no se rompa dicho map debe contener datos. Ya tenemos la funcionalidad de nuestro InputSearch lista, ahora debemos integrarla en el sitio donde lo queremos mostrar.

4. Integrar el componente creado a la lista de clientes. Al ser la lista de clientes que estamos configurando, debemos usar ClistList.jsx que es el componente para dicha tarea. Lo único que debemos hacer es llamar al componete SearchInput y colocarlo donde necesitamos: Linea 7 y 29.

El resultado lo vemos a continuación. NOTA: Si, el maquetado está feo pero es algo que arreglaré para los siguientes posts.

Con esto hemos creado y configurado un filtro de búsqueda en React.js, Node.js y Mongoose. Lo importante para todos estos casos donde debemos agregar features a proyectos que ya tienen un notable adelanto es entender qué podemos reusar, en nuestro caso aplicamos este método con los reducers de la lista de clientes.

Pueden clonar los proyectos aquí: FRONTEND, API

Espero que les sirva, saludos!