Adicionando Firebase como base de dados. #95

filipeleonelbatista · 2023-09-18T11:38:38Z

Adicionei o firebase como base de dados. Não modifiquei nada de muito preciso embora acredite em uma refatoração do projeto usando algumas outras tecnologias que possam melhorar e agilizar a entrega de um serviço para a comunidade.

Optei pelo uso do firebase pois ele tem um plano gratuito que tem como limite de leituras diario 50 mil requisições o que pode ser muito neste inicio.

Com esse refactor fiz uma area administrativa com login de email/senha do firebase onde se tem mum semi crud para adicionar e remover os desafios.

Fiz alguns ajustes nos links da página inicial e nos selects da pagina de desafios para trazerem os desafios de acordo com a estrutura do firebase mas sem alterar os componentes no geral.

Como nao tem a integração com o dev nesta versão eu adicionei o link do repositório e o usuário no cadastro do desafio..

Existe uma flag no desafio chamada active que é boolean e que pode nos ajudar a controlar se os desafios enviados foram aprovados ou não.

A estrutura do desafio ficou assim

interface Challenges {
            type: "Back-end" | "Front-end" | "Mobile",
            level: "Iniciante" | "Intermediário" | "Avançado",
            techs: string[],
            githubRepository: string,
            username: string,
            background: string,
            name: string,
            description: string,
            createdAt: number,
            active: boolean,
        };

Junto com isso adicionei uma tabela de newsletter para podermos trabalhar com isso em um futuro proximo automatizando com cron jobs (que ja tenho um serviço similar rodando hoje). Usei uma estrutura bem básica.

interface Newsletter {
            email: string,
            optInDate: number,
            optOutDate: number,
            createdAt: number,
            active: boolean,
        };

Para finalizar a implementação teria que criar uma base no firebase, e colocar as chaves que forem geradas nas variaveis de ambiente do projeto e configurar os buckets storage e firestore database para poder usar.

Alguns pontos a considerar e que adoraria participar:

Adicionar Typescript
Migrar de CRA para VITE
Usar alguma ferramenta que adiante o processo de criação dos componentes, eu curto Material UI ou ShadCn/ui
Usar validadores de forms, como implementado, YUP e formik para manipulação dos estados do form.
Criar um roadmap de release de features para podermos implementar com a comunidade.

Fica aí o pr para aprovação. Qualquer dúvida estou aqui animado e ansioso para colaborar mais.

vercel · 2023-09-18T11:38:41Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
dev	❌ Failed (Inspect)			Sep 18, 2023 11:38am

filipeleonelbatista · 2023-09-18T11:41:41Z

Isaac-alencar · 2023-09-18T13:12:57Z

frontend/src/components/ChallengeCard/index.js

+const colorMatch = (option) => {
+    switch (option) {
+        case 'Iniciante':
+            return 'nephritis';
+        case 'Intermediário':
+            return 'pumpkin';
+        case 'Avançado':
+            return 'pomegranate';
+        case 'Mobile':
+            return 'blue';
+        case 'Front-end':
+            return 'red';
+        case 'Back-end':
+            return 'light-purple';
+        default:
+            return 'green';
+    }


Acho que seria uma boa manter o objeto para fazer o matching, apenas para fins de simplicidade, já que podemos acessar com colorMatch[option]

Isaac-alencar · 2023-09-18T13:15:31Z

frontend/src/components/ChallengeCard/index.js

-                <p>{challenge.description}</p>{' '}
+                <p>
+                    {challenge.description.length > 120
+                        ? challenge.description.substr(0, 120) + '...'


String.substr está depreciado pela linguagem (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/substr), contudo, você pode usar substring ou slice para mesma finalidade

Isaac-alencar · 2023-09-18T13:23:24Z

frontend/src/contexts/AuthContext.js

+        return signInWithEmailAndPassword(authentication, email, password)
+            .then(async (re) => {
+                setIsLogged(true);
+                setKeyLocalStorage('UID', re.user.uid);
+                const currentUser = await getUserByID(re.user.uid);
+                setUser(currentUser);
+                const status = {
+                    user: currentUser,
+                    status: true,
+                };
+                return status;
+            })
+            .catch((err) => {
+                const status = {
+                    status: false,
+                    message: AuthErrorHandler[err.code],
+                    err,
+                };
+
+                console.log('signInUser error', status);
+                return status;
+            });
+    }


Ao invés de retornar diretamente a chamada da função, seria mais adequado um bloco de try/catch com o retorno apropriado para cada situação (erro ou sucesso). Além disso, você pode usar async/await para uma vez que signInWithEmailAndPassword é uma função assíncrona e retorna uma promise resolvida ou rejeitada, e assim você naõ precisa usar o then e o catch (esse último é uma sugestão bem pessoal, acredito que aumenta a legibilidade do código)

Isaac-alencar · 2023-09-18T13:24:06Z

frontend/src/contexts/AuthContext.js

+        return createUserWithEmailAndPassword(authentication, email, password)
+            .then(async (re) => {
+                const newUser = {
+                    uid: re.user.uid,
+                    ...user,
+                };
+                try {
+                    await setDoc(doc(db, 'users', re.user.uid), newUser);
+
+                    setKeyLocalStorage('UID', re.user.uid);
+
+                    setUser(newUser);
+                    return true;
+                } catch (err) {
+                    ToastNotification.notify(
+                        'error',
+                        'Houve um erro ao cadastrar o usuario. Tente novamente mais tarde'
+                    );
+                    return false;
+                }
+            })
+            .catch((err) => {
+                ToastNotification.notify('error', AuthErrorHandler[err.code]);
+                return false;
+            });


o mesmo aqui e todas a funções com estrutura análogas a que eu comentei acima

Isaac-alencar · 2023-09-18T13:30:37Z

frontend/src/contexts/AuthContext.js

+            value={{
+                user,
+                RegisterUser,
+                signInUser,
+                logout,
+                handleForgotUser,
+                isLogged,
+                getUserByID,
+                isMenuHide,
+                setIsMenuHide,
+            }}


É sempre importante salvar esses valores em um useMemo, pois em cada renderização o React vai calcular eses valores novamente, já que a referência dele será perdida entre as renderizações, logo serão tratados como um novo objeto e consequentemente recalculados.

Isaac-alencar · 2023-09-18T13:31:34Z

frontend/src/contexts/ChallengesContext.js

+            value={{
+                challengesList,
+                selectedChallenge,
+                setSelectedChallenge,
+                updateChallengesList,
+                handleDeleteChallenge,
+                addChallenge,
+                updateChallenge,
+                getChallengeByID,
+            }}


o mesmo aqui, sobre usar o useMemo

Isaac-alencar · 2023-09-18T13:34:55Z

frontend/src/hooks/useAuth.js

+import { AuthContext } from '../contexts/AuthContext';
+
+export function useAuth() {
+    const value = useContext(AuthContext);


é uma boa prática conferir se o Provider desse context está sendo usado da árvore de elementos, dessa forma:

export function useAuth() { const context = useContext(AuthContext); if (!context) { throw new Error('useAuth must be inside an AuthProvider with a value'); } return context; }

Isaac-alencar · 2023-09-18T13:35:10Z

frontend/src/hooks/useChallenges.js

+export function useChallenges() {
+    const value = useContext(ChallengesContext);
+    return value;
+}


Isaac-alencar · 2023-09-18T13:40:01Z

frontend/src/pages/Admin/Login/index.js

+            if (isLogged.status) {
+                if (isLogged.user.active) {
+                    history.push('/admin/challenges');
+                } else {
+                    alert(
+                        'Solicite permissão ao administrador para acessar o sistema'
+                    );
+                }
+            } else {
+                alert(isLogged.message);
+                setShowRegister(true);
+            }


isso tá um pouquinho confuso, porém dá pra refatorar assim:

if (!isLogged.status) { alert(isLogged.message); setShowRegister(true); return; } if (!isLogged.user.active) { alert("Solicite permissão ao administrador para acessar o sistema"); return; } history.push("/admin/challenges");

que fica mais fácil de entender o que tá acontecendo e evita aninhamento de if/else (que no geral, usar else não é legal)

Isaac-alencar · 2023-09-18T13:41:06Z

frontend/src/pages/Admin/Login/index.js

+            if (isRegistered) {
+                alert(
+                    'Solicite a liberação do acesso ao administrador do sistema'
+                );
+            } else {
+                alert('Houve um problema ao cadastrar');
+                setShowRegister(true);
+            }


mesma coisa, usar else não é muito legal, então você pode inverter a orderm e fazer um "early return" no if pra remover o else

Isaac-alencar · 2023-09-18T13:42:21Z

frontend/src/pages/Detail/index.js

+const colorMatch = (option) => {
+    switch (option) {
+        case 'Iniciante':
+            return 'nephritis';
+        case 'Intermediário':
+            return 'pumpkin';
+        case 'Avançado':
+            return 'pomegranate';
+        case 'Mobile':
+            return 'blue';
+        case 'Front-end':
+            return 'red';
+        case 'Back-end':
+            return 'light-purple';
+        default:
+            return 'green';
+    }


como disse anteriormente, melhor manter o objeto, só por simplicidade

Isaac-alencar · 2023-09-18T13:42:43Z

frontend/src/pages/Detail/index.js

    const [challenge, setChallenge] = useState({});
    const [techs, setTechs] = useState([]);
-    const [dev, setDev] = useState({});
+    // const [dev, setDev] = useState({});


comentários 😿

Isaac-alencar · 2023-09-18T13:42:48Z

frontend/src/pages/Detail/index.js

+            // setDev(response.data.dev_id);
+            setImages([response[0]?.background]);
+            setTechs(response[0]?.techs);
        }


comentários 😿

Isaac-alencar · 2023-09-18T13:44:12Z

frontend/src/services/NewsLetterFunctions.js

+
+        await addDoc(newsletterRef, data);
+
+        return true;


não entendi por quê está retornando true/false

Isaac-alencar · 2023-09-18T13:44:53Z

frontend/.env

+REACT_APP_FIREBASE_APIKEY=AIzaSyDlSDvVRBTuEBULLJ7F1Zny9uEKvm34U8I
+REACT_APP_FIREBASE_AUTHDOMAIN=devchallenge-16edf.firebaseapp.com
+REACT_APP_FIREBASE_PROJECTID=devchallenge-16edf
+REACT_APP_FIREBASE_STORAGEBUCKET=devchallenge-16edf.appspot.com
+REACT_APP_FIREBASE_MESSAGINGSENDERID=457450543508
+REACT_APP_FIREBASE_APPID=1:457450543508:web:6afbe9416f72e9830b5781
+REACT_APP_FIREBASE_MEASUREMENTID=G-KKVZ30J836


acho que isso está aqui por engano!

Isaac-alencar

Muito obrigado pela contrib, @filipeleonelbatista , mandou bem!

Só umas coisinhas aqui pra revisar, quando você puder dá uma olhadinha dps!

Filipe Batista added 12 commits September 15, 2023 14:42

ajuste para as novas versões do node

fb05691

ajustes nos cards de cateegorias

b755f72

adicionando firebase

f19eecb

adicionando emails na doc newsletter do firebase

feeba82

verifica se o email ja esta cadastrado na newsletter

85d2ac0

adicionando e removendo desafios

d36b2ae

refactor nas listas de desafios do site e detalhes

506530d

bugs na navegação e cores do levels

605d517

footer só com discord

8d497f9

autentication context e protected routes

2e9b744

login do admin

afe770b

ajustes no dashboard admin

cc68c51

vercel bot had a problem deploying to Preview September 18, 2023 11:38 Failure

Isaac-alencar reviewed Sep 18, 2023

View reviewed changes

Isaac-alencar suggested changes Sep 18, 2023

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Adicionando Firebase como base de dados. #95

Adicionando Firebase como base de dados. #95

filipeleonelbatista commented Sep 18, 2023 •

edited

Loading

vercel bot commented Sep 18, 2023 •

edited

Loading

filipeleonelbatista commented Sep 18, 2023

Isaac-alencar Sep 18, 2023

Isaac-alencar Sep 18, 2023

Isaac-alencar Sep 18, 2023

Isaac-alencar Sep 18, 2023

Isaac-alencar Sep 18, 2023

Isaac-alencar Sep 18, 2023

Isaac-alencar Sep 18, 2023

Isaac-alencar Sep 18, 2023

Isaac-alencar Sep 18, 2023

Isaac-alencar Sep 18, 2023

Isaac-alencar Sep 18, 2023

Isaac-alencar Sep 18, 2023

Isaac-alencar Sep 18, 2023

Isaac-alencar Sep 18, 2023

Isaac-alencar Sep 18, 2023

Isaac-alencar left a comment

Adicionando Firebase como base de dados. #95

Are you sure you want to change the base?

Adicionando Firebase como base de dados. #95

Conversation

filipeleonelbatista commented Sep 18, 2023 • edited Loading

vercel bot commented Sep 18, 2023 • edited Loading

filipeleonelbatista commented Sep 18, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Isaac-alencar left a comment

Choose a reason for hiding this comment

filipeleonelbatista commented Sep 18, 2023 •

edited

Loading

vercel bot commented Sep 18, 2023 •

edited

Loading