raisess/frontend-test

Teste para vaga de desenvolvedor front-end na WORKALOVE EDTECH.

WORKALOVE EDTECH

Teste para vaga front-end na WORKALOVE EDTECH

Como rodar

Tenha o NodeJS LTS e o Typescript LTS instalados.

Execute o comando:

npm run start

Pronto, só ver o resultado no seu browser.

Tecnologias utilizadas

Além das bibliotecas Formik, yup e axios.

Documentação de componentes reutilizaveis

Greeting

Componente de saudações do remetente.

<Greeting
	name="Chatnilson" // nome de exibição
	profilePicture="image_link" // imagem de perfil
/>

Message Bubble

A bolha de mensagem é o componente para mensagem de remetente.

<MessageBubble
	profilePicture="image_link" // imagem de perfil
	display={true} // flag de exibição da mensagem, true para show e false para hidden
	message="Bom dia!" // conteudo da mensagem
/>

Message Input

Bolha de entrada de texto para o receptor.

<MessageInput
	placeholder="E-mail" // opcional
	type="text" // opcional
	propName="email" // nome da propriedade
	display={true} // flag de exibição da mensagem, true para show e false para hidden
	validator={ emailValidator } // função que recebe uma string como parametro e retorne booleano, para validação do campo
/>

Como as mensagens são passadas através dos componentes sem o uso de props?

Utilizando a API de eventos do NodeJS.

import emitter from "./utils/emitter"

emitter.emit("msg", { email: "email" });

emitter.on("msg", ({ email }: { email: string }): void => {
	console.log(email);
	// email
});