search

StepsForm

Componente responsável por armazenar e enviar as respostas do teste.

hashtag
Introdução

O componente StepsForm é composto de um formulário por onde serão encaminhadas as respostas do teste para futura avaliação do gestor.

Além disso, ele também é responsável por toda a lógica de condução da avaliação entre os steps com as questões.

hashtag
Perguntas do Form

As questões do formulário são recebidas através da API e armazenadas no context test.tsx (src\contexts\test.tsx). Para tal, é necessário que haja um usuário logado na aplicação para que seja feita a requisição do teste ao banco de dados.

export const TestContextProvider = ({ children }: TestContextProps) => {
  const [test, setTest] = useState<any>({} as any);

  const { logged } = useAuth();

  const handleGetTest = () => {
    let token: any;

    if (typeof window !== "undefined") {
      token = localStorage.getItem("token") || "";
    }

    const headers = {
      headers: {
        Authorization: `Bearer ${token}`,
      },
    };

    api
      .get(`/Test/allTests`, headers)
      .then((res) => {
        setTest(res.data[0]);
      })
      .catch((err) => console.log(err));
  };

  useEffect(() => {
    if (logged) handleGetTest();
  }, [logged]);

  return (
    <TestContext.Provider value={{ test, handleGetTest }}>
      {children}
    </TestContext.Provider>
  );
};

export const useTest = () => useContext(TestContext);

Caso as condições sejam satisfeitas, o servidor irá retornar o teste através de um JSON:

hashtag
Sobre: Lógica e Dinâmica do Form

Uma vez que o cliente renderize as informações do formulário, o usuário em avaliação terá duas opções de resposta para toda pergunta que for exibida na tela.

Caso o usuário marque "Sim" ele prosseguirá com o teste no Step ativo, indo para a próxima pergunta do eixo.

Gif - Option "Sim"

Entretanto, caso o usuário marque a opção "Não", ele saltará para o próximo Step da avaliação.

Gif - Option "Não"

hashtag
Form & Submissão

Conforme o usuário responde as questões do teste, suas respostas vão sendo armazenadas em uma variável para posteriormente serem encaminhadas ao servidor e salvas no banco.

A submissão ocorre ao final da avaliação.

hashtag
Componentes Integrados

  • Chackra-UI-Steps -> Navegação entre subdivisões dos eixos de avaliação.

  • React Toast -> Tratamento de respostas.

hashtag
Requisitos Funcionais

Descrição
Entradas
Saídas
Observações ⭐

Envio do teste para o servidor

Campos do teste listados aqui

-

✅

Acessibilidade via Color Mode - White e Dark

Evento de clique no primeiro ícone do componente AsideMenu

[☀ - 🌙]

Alteração na visualização de cores dentro de toda a aplicação

O controle do modo de cores ocorre através do context ToggleModeStyle.

Tratamento de respostas via ReactToast

-

ERROR: "Erro ao enviar resultado!" SUCCESS: "Resultado enviado com sucesso!"

✅

Responsividade

-

-

✅

PreviousTeste - Interview 🧾NextPerfil 🙎🏽‍♂️

Last updated