Refatorando projeto para nova API do Firebase com React

Tive a oportunidade de contribuir com um projeto em React da comunidade de desenvolvedores Agência Gift, no qual realizei a refatoração do código para o uso da nova versão da API do Firebase.

A aplicação é uma página em que usuários cadastrados compartilham links que possam ser interessantes a membros da comunidade e outros desenvolvedores que visitam o site. O projeto utiliza os recursos de autenticação e o Realtime Database.

Migrando para o Firebase SDK v9

A grande mudança para a nova versão do Firebase é a sua modularidade. Por isso, você só usa o código relacionado aos recursos necessários do serviço, diminuindo o tamanho da aplicação e aumentando o seu desempenho.

Veja um exemplo adaptado do código do projeto antes:

import firebase from 'firebase/compat/app';
import 'firebase/compat/firestore';

const firebaseConfig = {
    // configuração do projeto firebase
};

firebase.initializeApp(firebaseConfig);

const projectFirestore = firebase.firestore();
const timestamp = firebase.firestore.FieldValue.serverTimestamp;

export const getUserCollection = async (collectionName, user) => {
    const collectionRef = projectFirestore.collection(collections.USERS)
        .doc(user.uid).collection('lists').doc(collectionName);
    const collectionData = await collectionRef.get();
    return { collectionRef, collectionData };
};

E depois:

import { initializeApp } from 'firebase/app';
import { getFirestore, serverTimestamp } from 'firebase/firestore';

const firebaseConfig = {
    // configuração do projeto firebase
};

initializeApp(firebaseConfig);

const projectFirestore = getFirestore();
const timestamp = serverTimestamp();

export const getUserCollection = async (collectionName, user) => {
    const collectionRef = doc(projectFirestore, collections.USERS, user.uid, 'lists', collectionName);
    const collectionData = await getDoc(collectionRef);
    return { collectionRef, collectionData };
};

Note que, além de importar apenas as funções necessárias, lidar com algumas partes do código como recuperar dados do Realtime Database ficou mais simples.

Mais informações sobre compatibilidade e update para a versão modular do SDK do Firebase estão na documentação oficial.

Além disso, aproveitei para habilitar também a possibilidade de logar na aplicação usando a conta do GitHub. Antes só era possível entrar com uma conta Google. Além de habilitar o uso pelo console do Firebase e no painel do GitHub, foi necessário apenas importar e inserir a função GithubAuthProvider do pacote firebase/auth.

A aplicação de compartilhamento de links está online, com o repositório disponível no GitHub da comunidade Agência Gift.