DEV Community: Maycon Alves

React: Criando um componente que transforma Json para Csv

Maycon Alves — Wed, 21 Aug 2024 14:39:58 +0000

Recentemente tive que implementar uma feature onde era necessário transformar dados que vinham de uma API (json) para csv, eu vi uma boa lib para fazer isso, react-csv, é uma lib que resolveu o problema, porém quando fui dar uma olhada no github dessa lib, vi que o último commit foi há mais de 2 anos, isso me preocupou um pouco, além disso, tem mais de 100 issues abertas.

Tendo isso em mente resolvi dar uma estudada na lib e percebi que poderia implementar na mão e de forma optimizada, além de que se acontecer algum bug eu mesmo posso resolver o problema em algumas horas.

Dito isso, bora para a implementação que é bem tranquila de ser feita:

import React from "react";

const ExportCSV = ({ data, fileName, children, headers }) => {
  const downloadCSV = () => {
    const csvString = [
      headers,
      ...data.map((item) =>
        headers.map((header) => {
          const value = item[header];
          return typeof value === "string" && value.includes(",")
            ? `"${value}"`
            : value;
        })
      ),
    ]
      .map((row) => row.join(","))
      .join("\n");
    const blob = new Blob([csvString], { type: "text/csv" });
    const url = URL.createObjectURL(blob);
    const link = document.createElement("a");

    link.href = url;
    link.download = fileName || "download.csv";
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(url);
  };

  return (
    <button onClick={downloadCSV}>
      {children}
    </button>
  );
};

export default ExportCSV;

Vamos para algumas explicações dentro da função downloadCSV recebemos os headers da tabela, também usamos o data que recebe o json a ser convertido e distribuído por cada coluna.

Tive que adicionar esse trecho de código, pois estava gerando um bug quando recebia um valor número que incluia uma vírgula, por exemplo, R$ 10.544,53.

return typeof value === "string" && value.includes(",")
  ? `"${value}"`
  : value;

Esse bug acontecia, pois eu precisava usar o método join para remover as vírgulas e por em cada casa dentro do arquivo csv. Também usei a API nativa Blob para transformar o meu json para csv.

No fim retorno um componente react que recebe quatro propriedades, data: dados da API, headers: cabeçalho do csv, filename: nome do arquivo que tu vai querer usar, children: podendo colocar um componente aqui ou uma simples string.

Para usar esse componente é bem simples:

 <CsvButton data={data} fileName="file-name.csv" headers={headers}>
   <>Export data</>
 </CsvButton>

Bem é isso, espero que tenham gostado e se ajudar deixe compartilhe esse post com mais alguém, e se tem algo para melhorar qualquer feedback é muito bem-vindo, obrigado.

Configurando pipeline com github actions para um projeto React

Maycon Alves — Tue, 02 Jul 2024 17:33:24 +0000

Fazia tempo que não configurava um serviço de ci/cd e esses dias fui fazer isso no github usando o github actions e percebi ser bem simples, e podemos fazer várias rotinas, é bem legal, mesmo se você estiver trabalhando sozinho, pois consegue que todo commit seja verificado para saber se não quebrou nada.

Vou mostrar uma configuração simples e você pode adaptar para o que você vai precisar no seu dia-a-dia

Primeiro passo, dentro da raiz do seu projeto, crie uma pasta .github dentro dessa pasta crie outra pasta chamada workflows e dentro crie o seu arquivo para rodar sempre que um commit entrar na sua branch main ou sempre que abrir Pull Request. Vou chamar o arquivo de build.yaml para o exemplo:

name: Build and Deploy

on:
  push:
    branches: 'main'
  pull_request:
    branches: 'main'

jobs:
  tests:
    name: Run Tests
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v3

      - name: Use Node.js 20.x
        uses: actions/setup-node@v3
        with:
          node-version: 20.x
          cache: 'yarn'

      - name: Install Dependencies
        run: yarn install

      - name: Run Tests
        run: yarn test

  deploy:
    name: Build and Deploy
    needs: [tests]
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v3

      - name: Use Node.js 20.x
        uses: actions/setup-node@v3
        with:
          node-version: 20.x
          cache: 'yarn'

      - name: Install Dependencies
        run: yarn install

      - name: Run Build
        run: yarn build

Bora para uma simples explicação

1 On nessa propriedade dizemos quando a action deve rodar, no caso, quando acontecer um commit ou um PR para a branch main.

2 Jobs nessa rotina dizemos quais scripts que queremos que nosso action execute no meu caso só tem dois o de tests e deploy o primeiro argumento é nome da tarefa no meu caso são Run Tests e Build and Deploy, depois temos runs-on que vai ser o ambiente que vamos querer que o nossa pipe rode, ou seja, vamos querer uma máquina virtual ubuntu na última versão, antes de entrar nos steps nosso job de build tem uma instrução chamada needs passando o argumento [tests], ou seja, para o nosso deploy rodar, precisa rodar os testes antes sem que nada quebre.

3 Steps temos algumas rotinas aqui dentro, no primeiro name e uses as actions fazem checkout do seu código e “pedem autorização” para seguir com as próximas rotinas:

- name: Checkout code
    uses: actions/checkout@v3

Depois podemos declarar qual versão do node ele vai usar para rodar os scripts do nosso projeto:

- name: Use Node.js 20.x
    uses: actions/setup-node@v3
      with:
        node-version: 20.x
        cache: 'yarn'

Normalmente você vai ver essa propriedade cache com npm, mas eu preferi usar o yarn, pois estava usando ele localmente também.

Por último pedimos para de fato ele rodar o script de instalação e logo em seguida o de testes:

- name: Install Dependencies
    run: yarn install

- name: Run Tests
    run: yarn test

O de build é o mesmo, porém só muda de yarn test para yarn build.

Bem é isso, é algo bem simples de se construir, é legal implementar em ambientes diferentes e fazer vários testes. Espero que tenham gostado e qualquer feedback será muito bem-vindo, muito obrigado.

3 coisas bizarras no JavaScript

Maycon Alves — Thu, 01 Jun 2023 12:05:36 +0000

"Nós sabemos que todos são iguais em todos os lugares, há o bem e o mal em todo mundo" — Paul McCartney

Para mim o js sem dúvidas uma das melhores linguagens de programação da atualidade. Podemos fazer coisas bem legais com ela tanto no frontend (onde ela ganhou bastante notoriedade) quanto no backend, podemos usa-la em frameworks e também podemos criar funções para arquivos terraform consumirem, ou seja, é uma linguagem bem versátil.

Mas nesse artigo vou mostrar cinco coisas bizarras que podemos fazer e "talvez" você não saiba ainda, então chega de enrolar e bora.

1 — Magic number
Uma das coisas mais estranhas do nosso querido JavaScript, ou como de fato ele é conhecido como o número que cresce magicamente basta você digitar fazer isso:

// digite o nove, dezesseis vezes
const magicNumber = 9999999999999999
console.log(magicNumber) // 10000000000000000

2 — Verdadeiro é igual a falso
Podemos fazer várias coisas legais com JS, porém podemos ficar com uma pulga atrás da orelha.

Usamos !! para converter valores para boolean

console.log(!!false) // false
console.log(!!true) // true

Beleza, fazendo com strings

console.log(!!"false") // true
console.log(!!"true") // true

Então isso é igual ?!

console.log(!!"false" == !!"true") // true

Comparando tipos

console.log(!!"false" === !!"true") // true

Vamos de novo

console.log(!!false == !!true) // false

Porém

console.log(!!"false" == !!true) // true
console.log(!!"false" === !!true) // true

3 — Quem é maior e quem é menor ?

console.log(3 > 2) // true
console.log(2 > 1) // true

console.log(1 < 2) // true
console.log(2 < 3) // true

console.log(3 > 2 > 1) // false wtf ???
console.log(1 < 2 < 3) // true

Esses são apenas três casos, mas o JavaScript tem bastante ocorrência de coisas bizarras, essas aqui eu tirei do incrível site wtfjs recomendo que também deem uma olhada em mais coisas por lá.

Bem é isso galera, espero que tenham gostado, faz muito tempo que não escrevo nada então fui com algo mais leve hoje, não esqueçam que qualquer sugestão é muito bem-vinda. Muito obrigado e abraços quentinhos para vocês.

Esvaziar arrays em JavaScript

Maycon Alves — Tue, 09 May 2023 13:36:17 +0000

Galera no dia-a-dia estamos acostumados a trabalhar muito com objetos e arrays, mas as vezes eles podem complicar nossa vida se não soubermos estruturar bem um objeto ou se não soubermos manipular um array, em ambos os casos temos diversos caminhos e fazer diversas coisas diferentes, mas nesse post resolvi trazer uma coisa mais de base do JavaScript que nada mais é do que esvaziar um array, ou seja, vamos preencher um array de várias formas e vamos ver como deixar ele vazio.

Mas o que é um array ?
Na faculdade é bem comum, os professores falaram que precisamos criar uma lista e iterar sobre ela, e se você é novo em tecnologia e começou aprender HTML e CSS agora, não estou falando das tags:

<ul>, <li> e <ol>

e sim criar um array 😃.

Arrays são objetos ( sim arrays são objetos, confuso não ? 😕 ) que na verdade são listas e eles tem vários métodos que nos ajudam a manipularmos de várias formas diferentes, não vou falar sobre todos eles, pois são muitos, mas escrevi três artigos explicando os principais, vou deixar os links aqui ( parte 1, parte 2, parte 3 ). Um array não tem tamanho nem tipo fixo, então o array é dinâmico e podemos colocar, strings, number, objetos etc…

Agora vamos brincar um pouco com nossos arrays, primeiro vamos de fato conferir se arrays são ou não objetos:

var arr = [1, 2, 3]
console.log(typeof arr) // object

Vamos ver checar o tamanho de um array:

var arr = [1, 2, 3]
console.log(arr.length) // 3

Obs: um array é iniciado na posição zero, então as posições do array acima serão:

elementos [1, 2, 3]
posições [0, 1, 2]

Agora o motivo desse artigo, vamos aprender algumas formas de zerar um array, podemos simplesmente redeclarar um array:

var arr = [1, 2, 3]
arr = []
console.log(arr) // []
console.log(arr.length) // 0
ou
var arr = [1, 2, 3]
arr = 0
console.log(arr) // 0
console.log(arr.length) // undefined

No segundo caso temos undefined pois transformamos nosso array em um number e esse tipo de dado em JavaScript não possui a propriedade length, podemos falar sobre tipos de dados em outro post 😃.

Podemos mudar o length dele na força bruta 👊:

var arr = [1, 2, 3]
arr.length = 0

Também podemos usar da maneira mais moderna:

let arr = [1, 2, 3] // usando let
arr = []
console.log(arr) // []
console.log(arr.length) // 0
ou
let arr = [1, 2, 3]
arr = 0
console.log(arr) // 0
console.log(typeof arr) // number
console.log(arr.length) // undefined

Também podemos tentar dessa forma:

const arr = [1, 2, 3] // usando const
arr = []
console.log(arr)

Isso gera um erro, pois não podemos reatribuir uma const e também podemos usar o método splice() para fazer esse serviço para nós:

let arr = [1, 2, 3]
arr.splice(0, arr.length)
console.log(arr) // []

Bom espero que tenham gostado, lembrando que qualquer feedback é muito bem vindo, espero vocês no próximo artigo, abraços quentinhos para vocês…

Fontes:

Resolvendo erro delete `CR` prettier/prettier em projetos react

Maycon Alves — Tue, 09 May 2023 13:15:30 +0000

Essa semana eu tive o prazer de configurar meu primeiro projeto do zero 😃 pensando em manter a qualidade boa e o projeto padronizado, configurei o eslint e o prettier subi o projeto e estava tudo ok. Porem quando os outros desenvolvedores da equipe baixaram o projetos estávamos tendo o erro da imagem acima delete 'CR' [prettier/prettier].

Esse erro aconteceu pois estamos desenvolvendo em ambiente windows, isso por que, por padrão quando você baixa um repositório ele quebra linha no formato CRLF isso não importa se o seu editor está configurado com o padrão LF que é o padrão usado no linux e no mac ( nos macs mais antigos era usado o CR ).

Para corrigir esse erro é bem simples, basta abrir o terminal e digitar o seguinte comando git config --global core.autocrlf false depois disso delete o repositório e baixe de novo que o problema estará resolvido.

Eu disse que era um artigo bem curto e simples, espero que tenham gostado, qualquer crítica, sugestão ou feedback é só comentar. É isso ai nos vemos no próximo artigo, abraços quentinhos para vocês !!