Como Criar Componentes Globais e Dinâmicos com Strategy Pattern em React

Tínhamos um desafio interessante no nosso time: como desenvolver componentes de forma global, onde os dados e comportamentos seriam diferentes para cada país? Em uma das discussões com meus colegas de trabalho, André Peixoto e Guilherme Cardoso, algumas soluções surgiram em nossa mente, e hoje vou contar sobre uma que se adequou perfeitamente ao nosso contexto.

No nosso caso, o primeiro componente que implementamos com essa abordagem foi uma tabela dinâmica. Esse componente deveria exibir colunas e dados que variavam conforme o país, com regras de exibição, interações e tratamentos de dados específicos.

O Desafio: Uma Tabela Dinâmica para Cada País

Imagine que você tem uma tabela que precisa renderizar diferentes tipos de dados para cada país, variando o número de colunas, o formato dos dados, e até as interações dos usuários com ela. Como resolver isso?

Você teria algumas opções, e vamos falar sobre algumas delas:

Criar uma tabela para cada país. Essa abordagem poderia funcionar, mas traria alguns problemas:
- Código duplicado: Cada tabela para cada país levaria à duplicação de lógica, aumentando o esforço de manutenção.
- Dificuldade em sincronizar mudanças: Se um bug for encontrado, você precisaria corrigir em múltiplos lugares.
- Escalabilidade: À medida que novos países fossem adicionados, essa solução se tornaria insustentável.
Criar uma tabela única com condicionais. Outra abordagem seria desenvolver uma única tabela, com várias condicionais para renderizar cada tipo de célula ou header, dependendo do país. No entanto, isso também apresenta problemas:
- Código complexo: À medida que a tabela cresce, o número de condicionais aumenta, tornando o código difícil de entender e manter.
- Acoplamento: O código ficaria altamente acoplado, dificultando a adição de novas funcionalidades.
- Manutenção difícil: A manutenção se torna um pesadelo quando o projeto cresce e precisa ser ajustado para novos cenários.

A Solução: Strategy Pattern

Uma abordagem mais limpa e escalável que adotamos foi o uso do Strategy Pattern. Mas o que é o Strategy Pattern?

O Strategy Pattern é um padrão de design comportamental que define uma família de algoritmos e os encapsula de maneira que possam ser intercambiáveis. Ou seja, você pode alternar entre diferentes estratégias sem modificar o cliente que as utiliza.

Benefícios do Strategy Pattern

Implementar um componente utilizando o Strategy Pattern traz algumas vantagens importantes:

Separação de responsabilidades: Cada país tem sua própria estratégia para renderizar os dados, tornando o código mais modular e fácil de entender.
Redução de código duplicado: Não precisamos replicar a lógica da tabela para cada país, já que as diferenças são abstraídas em estratégias específicas.
Escalabilidade: Novos países ou mudanças nos existentes podem ser adicionados facilmente, sem impactar o código base.
Facilidade de manutenção: Se houver um bug ou nova regra para um país, basta ajustar sua estratégia específica, sem impactar o restante da aplicação.

Pontos Negativos do Strategy Pattern

Embora o Strategy Pattern seja extremamente útil, ele não está isento de desvantagens. Uma consideração importante é a necessidade de configurar múltiplas estratégias separadas, o que pode resultar em um certo grau de fragmentação. Em sistemas maiores, pode ser necessário assegurar que as estratégias sejam mantidas de maneira organizada e coesa.

Implementação: Nossa Tabela Dinâmica

Agora, vamos ver como a tabela foi implementada na prática usando o Strategy Pattern.

Primeiro, criamos um componente Table que recebe os dados e a estratégia específica de colunas para renderização:

import React from 'react';

export interface Column<T> {
  key: string;
  label: string;
  render: (row: T) => JSX.Element;
}

export interface TableProps<T = unknown>  {
  data?: T[];
  strategy?: {
    columns: Column<T>[];
  } | unknown ;
}

const Table =<T,>({ data, strategy }: TableProps<T>) => {

  const defaultStrategy = { columns: [] as Column<T>[] };
  const currentStrategy = strategy ? (strategy as { columns: Column<T>[] }) : defaultStrategy;

  return (
    <table>
      <thead>
        <tr>
          {currentStrategy?.columns?.map((col) => (
            <th key={col.key} className="px-4 py-2 border border-dashed border-border">
              {col.label}
            </th>
          ))}
        </tr>
      </thead>
      <tbody>
        {currentStrategy && data && data.length > 0  ? data?.map((row, index) => (
          <tr key={index}
            className="hover:bg-hoverTable"
          >
            {currentStrategy?.columns?.map((col) => col.render(row))}
          </tr>
        )) : (
          <tr>
            <td colSpan={currentStrategy?.columns?.length || 1} className="px-4 py-2 text-center">
              No data available
            </td>
          </tr>
        )}
      </tbody>
    </table>
  );
};

export default  React.memo(Table);

Com essa estrutura básica, conseguimos garantir que as colunas e o conteúdo sejam renderizados dinamicamente com base na estratégia específica do país. Para cada país, definimos uma estratégia diferente, como no exemplo abaixo:

export const tableStrategies = {
  BR: {
    columns: [
      {
        key: 'number',
        label: 'Número',
        render: (row: BrazilData): JSX.Element => (
          <td key={`${row.number}-br`} className="px-4 py-2 border border-dashed border-border">{row.number}</td>
        ),
      },
      {
        key: 'name',
        label: 'Nome',
        render: (row: BrazilData): JSX.Element => (
          <td key={`${row.number}-name`} className="px-4 py-2 border border-dashed border-border">{row.name}</td>
        ),
      },
      // ...outras colunas
    ] as BrazilColumn[],
  },
  ES: {
    columns: [
      {
        key: 'shirtNumber',
        label: 'Número de Camiseta',
        render: (row: SpainData): JSX.Element => (
          <td key={`${row.shirtNumber}-es`} className="px-4 py-2 border border-dashed border-border">{row.shirtNumber}</td>
        ),
      },
      {
        key: 'name',
        label: 'Nombre',
        render: (row: SpainData): JSX.Element => (
          <td key={`${row.name}-name`} className="px-4 py-2 border border-dashed border-border">{row.name}</td>
        ),
      },
      // ...outras colunas
    ] as SpainColumn[],
  },
};

Além disso, o uso do método render no contexto do Strategy Pattern traz simplicidade. Cada coluna da tabela possui uma função render, que é responsável por determinar como a célula será exibida para cada tipo de dado específico. Isso oferece grande flexibilidade e clareza para personalizar a exibição sem complexidade desnecessária.

Agora, basta chamar o componente Table com a estratégia apropriada e os dados para cada país:

<Table
  strategy={tableStrategies.BR}
  data={brazilData}
/>

Um Exemplo Simples com Seleção de Países

Para fins didáticos, no projeto criei uma simulação onde o usuário pode selecionar diferentes países através de um select. Dependendo da escolha do país, os dados e a estratégia de renderização da tabela são atualizados dinamicamente:

import React from 'react';
import {  CountryCode } from './types';
import  Table  from './components/Table';
import { americanData, brazilData, southKoreaData, spainData } from './mocks';
import { tableStrategies } from './strategies';

export default function Home() {

  const [strategy, setStrategy] = React.useState<unknown>({});
  const [selectedCountry, setSelectedCountry] = React.useState<CountryCode>('BR');
  const [data, setData] = React.useState<unknown[]>([null])

  const updateDataAndStrategy =React.useCallback((country: CountryCode) => {
    switch (country) {
      case 'BR':
        setData(brazilData);
        setStrategy(tableStrategies[country]);
        break;
      case 'US':
        setData(americanData);
        setStrategy(tableStrategies[country]);
        break;
      case 'ES':
        setData(spainData);
        setStrategy(tableStrategies[country]);
        break;
      case 'KR':
        setData(southKoreaData);
        setStrategy(tableStrategies[country]);
        break;
      default:
        setData([]);
        setStrategy({});
        break;
    }
  }, []);

  const handleChanged = (event: React.ChangeEvent<HTMLSelectElement>) => {
    const selected = event.target.value as CountryCode;
    setSelectedCountry(selected);
    updateDataAndStrategy(selected);
  };

  return (
    <>
      <h1>## Table</h1>
      <select onChange={handleChanged} value={selectedCountry} className="mb-2">
        <option value="US">United States</option>
        <option value="AR">Argentina</option>
        <option value="BR">Brazil</option>
        <option value="KR">South Korea</option>
        <option value="ES">Spain</option>
      </select>

      <Table
        strategy={strategy}
        data={data}
       />
    </>
  );
}

Nesse exemplo, o componente select permite ao usuário selecionar o país desejado, e a tabela atualiza automaticamente para exibir os dados e a estratégia de renderização específicos daquele país. Confira o Link do projeto

Alternando Entre Países

Com o seletor de país, trocamos facilmente entre diferentes estratégias, simulando a renderização personalizada da tabela de acordo com as configurações específicas de cada país. Essa abordagem permite visualizar, em tempo real, como o conteúdo se adapta a diferentes regiões e contextos.

Conclusão

Com essa abordagem utilizando Strategy Pattern, garantimos um código mais limpo, modular e escalável. Além disso, se no futuro precisarmos adicionar novos países ou ajustar as regras de um país existente, podemos fazer isso facilmente sem impactar o restante do sistema.

Eu desenvolvi um projeto no GitHub que contém todo esse código e um exemplo prático de como aplicar essa técnica.

Se quiser ver o código completo, confira o repositório no GitHub.

Valeu galera :)