Autocomplete: um simples componente nativo

Guilherme Carvalho Lima — Fri, 03 Jul 2020 15:54:36 +0000

Normalmente utilizamos elementos <input> para inserção de dados em formulários web. Já quando é preciso um controle maior utilizamos o <select>, assim podemos limitar o tipo de informação que será enviada.

// exemplo input
<div class="field">
  <label class="label" for="name">Produto</label>
  <div class="control">
    <input class="input" type="text" id="name">
  </div>
</div>

// exemplo select
<div class="field">
  <label class="label" for="bank">Bancos</label>
  <div class="select" id="bank">
    <select>
      <option>Selecione</option>
      <option>ABC</option>
    </select>
  </div>
</div>

A dificuldade começa quando precisamos criar um elemento <select> filtrável. Muitas vezes temos esse tipo de situação quando queremos facilitar a seleção por uma quantidade muito grande de opções. Mesmo que as opções estejam ordenadas seria uma péssima experiência para o usuário ter que procurar entre mais de vinte, descendo pela barra de rolagem. Nessa situação o uso do <select> deixa de fazer sentido, pois para tornar uma lista de opções filtrável precisamos que exista um campo de <input> que permita digitação.

Podemos chegar no resultado esperado criando um <input> e logo abaixo um elemento de conteúdo estático (<ul> ou <div>) listando as opções. A partir da inserção de caracteres no campo de <input> podemos filtrar e mostrar apenas as opções que contenham parte do conteúdo digitado. Contudo também devemos nos preocupar em acrescentar funcionalidades inerentes ao <select>:

Quando o campo estiver em foco, mostrar opções
Quando o campo não estiver em foco, esconder opções
Quando clicar na opção desejada, preencher o campo de <input>

// page.component.html
<div class="field">
  <input  class="input" type="text" formControlName="name"
    [class.is-danger]="name.invalid && (name.dirty || name.touched)"
    (blur)="isVisible(false)"
    (focus)="isVisible(true)">
  <div class="dropdown is-block" 
    [class.is-active]="suggestions.length > 0 && isVisible">
    <div class="dropdown-menu" role="menu">
      <div class="dropdown-content">
        <ng-container *ngFor="let suggestion of suggestions" >
          <a class="dropdown-item" (mousedown)="setValue(suggestion);">
              {{suggestion.name}}
          </a>
        </ng-container>
      </div>
    </div>
  </div>
</div>

Agora temos um componente de autocomplete com o mesmo comportamento de um <select>, porém podemos observar a existência de uma sobrecarga de regras entre a lista e o <input>. O desvio de responsabilidade torna o componente pouco flexível e de difícil manutenção, uma vez que parte substancial do código não define o motivo real da criação desse componente: ler e listar as sugestões.

A melhor forma de mantermos esse componente simples, flexível e sem perder a essência do <select> seria criando a interação entre o <input> e a lista de forma desacoplado por meio de um identificador entre eles. Isso já possível utilizando o elemento nativo <datalist> com um id de igual valor ao atributo list em outro elemento de entrada.

// autocomplete.component.html
<datalist [id]="id">
    <ng-container *ngFor="let suggestion of list">
        <option [ngValue]="suggestion">{{suggestion.name}</option>
    </ng-container>
</datalist>

// page.component.html
<div class="field">
    <label class="label" for="bank">Bancos</label>
    <div class="control">
        <input class="input" type="text" id="bank" 
            formControlName="bank" list="bank-autocomplete"
            [class.is-danger]="bank.invalid && (bank.dirty || bank.touched)">
    </div>
    <app-autocomplete [id]="'bank-autocomplete'" [list]="banks"></app-autocomplete>
</div>

Dessa forma construímos um componente com responsabilidade única que poderia ser estendido para receber uma lista dinâmica por requisição http, lista com sub-itens ou campo de entrada variado. O componente de autocomplete ficaria responsável por apresentar a lista e nada mais.

Node e conexão com banco de dados

Guilherme Carvalho Lima — Sun, 28 Jun 2020 17:05:00 +0000

Estava trabalhando num projeto em node com a dependência do koajs para montar uma API Rest. Esse projeto guardava informações em dois bancos de dados, Mongo e Postgres. A conexão era realizada pelas dependências knex(+ pg) e mongodb.

Determinado dia fiquei testando repetidamente uma chamada de busca por termos que fazia conexão com o postgres. Várias requisições depois minha base de dados parou de responder, retornando o seguinte erro: "connection error error: sorry, too many clients already.".

Arquivo de conexão db.ts

import { mongodbURI, postgresURI } from './config';
import Knex from 'knex';
import MongoClient from "mongodb";

export const mongodb = async() => {
  const client = await MongoClient.connect(
    mongodbURI,
    { useNewUrlParser: true , useUnifiedTopology: true}
  );
  const db = client.db();
  return { client, db };
};

export const postgres = async(): Promise<Knex> => Knex({
  client: 'pg',
  connection: postgresURI
});

Fui eu lá garimpar as documentações do "knex" e "mongodb". Entendi um pouco da estrategia de pool de conexão e que não era necessário fechar conexões após a execução das queries. Dessa forma o mais correto seria realizar apenas uma única conexão mantendo-a aberta em estado de observação por novas operações. No geral isso é positivo pois evita que conexões sejam mantidas abertas por engano, virando um problema de performance (caso estiver usando apenas "pg" sem "knex" ainda é necessário chamar o método "release()" após execução das queries).

Na teoria tudo certo, mas na prática...

Minha aplicação já estava utilizando a estrategia de pool por meio de abstrações das dependências do "MongoClient" e "Knex" conforme documentação, então o erro "sorry, too many clients already." não poderia estar relacionado com essas bibliotecas usadas em produção por diversas aplicações. Mesmo no Github não existiam issues abertas falando sobre esse erro.

Resolvi pesquisar sobre nodejs e conexão com base de dados. Acabei encontrando bastante informação no Stackoverflow, mas quem me deu um norte foi o @raulcarval ao explicar o conceito de singleton e que normalmente se cria uma única instância de classe generalizada na aplicação como conector na base de dados.

No código o "MongoClient" e "Knex" funcionam como esse singleton e meu erro foi não entender isso ao encapsular ambos numa função assíncrona. Esse equivoco gerava a cada execução uma nova instancia de pool de conexão, causando seus acúmulos e produzindo o erro "sorry, too many clients already." no banco de dados.

Para correção do problema foi apenas necessário remover o encapsulamento, exportando as constantes com as respectivas conexões de forma direta.

Arquivo de conexão db.ts ajustado:

import { mongodbURI, postgresURI } from './config';
import Knex from 'knex';
import MongoClient from 'mongodb';

export const mongodb = MongoClient.connect(
    mongodbURI,
    { useNewUrlParser: true , useUnifiedTopology: true }
);

export const postgres = Knex({
  client: 'pg',
  connection: postgresURI
});

DEV Community: Guilherme Carvalho Lima

Autocomplete: um simples componente nativo

Node e conexão com banco de dados