Estou usando React e TypeScript.
A aplicação tem o objetivo de gravar agendamentos.
No onChange() da data selecionado pelo usuário, chamo a função handleChangeData(), nela disparo a atualização da data pelo setStateData().
Na sequencia chamo outra função async buscarHorarios() (descrevo suas funcionalidades mais abaixo).
Após isso, executo atravéz de um setShowHorarios() a atualização da variável showHorarios que uso para controlar a exibição dos horários na renderização.
Essa função handleChangeData() está assim:
function handleChangeData(e: React.ChangeEvent<HTMLInputElement>) {
let data = e.target.value;
setStateData(data);
buscarHorarios(data);
setShowHorarios(true);
}
Na função buscarHorarios() chamo outras duas funções também async, primeiro a buscarAgendamentosNaData() que faz uma consulta ao banco via api e devolve os horários já reservados na data recebida como parâmetro. Depois, chamo a segunda função async atualizarHorariosDisponiveis() que atualiza os horários tornando indisponíveis aqueles que já estão reservados.
A seguir a transcrição da função buscarHorarios():
async function buscarHorarios(data: string) {
buscarAgendamentosNaData(data);
atualizarHorariosDisponiveis();
}
A função async buscarAgendamentosNaData() conforme digo, consulta via api o banco de dados, e está assim:
async function buscarAgendamentosNaData(data: string) {
const response = await api.get('agendamentos', {
params: {
data_agend: data,
organizacao_agend: state.organizacao_atd,
}
});
setAgendamentosNaData(response.data);
}
Já a async atualizarHorariosDisponiveis(), percorre o objeto array de horários, atualizando o objeto horarios() com o objeto de horários padrões para evitar trabalhar com lixos de buscas anteriores. Depois em um map, verifica se já existe reserva do horário lido, setando a propriedade disponível=”N” e efetuando o return para atualizar o elemento no objeto array horarios().
Assim está atualizarHorariosDisponiveis():
async function atualizarHorariosDisponiveis() {
horarios.map((horario, index) => {
horario.disponivel = 'S';
agendamentosNaData.map((agendamento: Agendamento) => {
if(horario.hora === agendamento.hora_agend) {
horario.disponivel = 'N';
}
return horario;
});
});
}
O objeto array horariospadroes contém apenas a propriedade “hora” e “disponível” que são passados à um objeto visto como global, como a seguir (resumido):
const horariospadroes = (
{ hora: '08:00', disponivel: "S"},
{ hora: '08:30', disponivel: "S"},
...
{ hora: '17:00', disponivel: "S"},
{ hora: '17:30', disponivel: "S"}
)
let horarios = horariospadroes;
Ocorre que os horários renderizados são apresentados sempre em relação à uma data selecionada anteriomente.
Exemplo:
Se seleciono a data 11/07/2021 renderiza todas os horários com meu vetor original, conforme o padrão acima.
Se Troco a data para 12/07/2021 renderiza o conteúdo de horários, só que apresenta os dados que deveriam ter sido apresentados na data selecionada antes, que foi 11/07/2021.
E assim sucessivamente.
Acredito que seja uma execução fora de ordem mas não consegui identificar as razões.
Como isso pode ocorrer se as chamadas estão sempre com async, async / await, ou seja, primeiro deve esperar a conclusão de um processo para na sequencia executar as instruções seguintes?
Este é o tratamento correto para essa situação?
Não consegui identificar o problema. Podem por favor me ajudar?
Toda ajuda é bem vinda.
A seguir, apresento para entendimento do “todo” de forma resumida a estrutura do código como está:
import React, { FormEvent, useEffect, useState } from 'react';
...
const horariospadroes = (
{ hora: '08:00', disponivel: "S"},
{ hora: '08:30', disponivel: "S"},
...
{ hora: '17:00', disponivel: "S"},
{ hora: '17:30', disponivel: "S"}
)
let horarios = horariospadroes;
export interface Horario {
hora: string;
disponivel: string;
}
interface AtendimentoItemProps { atendimento: Atendimento; }
export interface Agendamento { ...omitido... }
const CadastroAgendamento: React.FC<AtendimentoItemProps> = ({atendimento}) => {
const history = useHistory();
const { state } = useLocation<Atendimento>();
const (showHorarios, setShowHorarios) = React.useState(false);
...
const (agendamentosNaData, setAgendamentosNaData) = useState(());
// não sei porque, a primeira execução sempre retorna vazio, então força a primeira execução com data vazia
useEffect(() => {
buscarAgendamentosNaData('1900-01-01');
}, ());
useEffect(() => {
buscarHorarios('1900-01-01');
}, ());
async function buscarHorarios(data: string) {
buscarAgendamentosNaData(data);
atualizarHorariosDisponiveis();
}
async function buscarAgendamentosNaData(data: string) {
const response = await api.get('agendamentos', {
params: {
data_agend: data,
organizacao_agend: state.organizacao_atd,
}
});
setAgendamentosNaData(response.data);
}
async function atualizarHorariosDisponiveis() {
let horario = horariospadroes;
horario.map((horario, index) => {
agendamentosNaData.map((agendamento: Agendamento) => {
if(horario.hora === agendamento.hora_agend) {
horario.disponivel = 'N';
}
return horario;
});
});
}
interface HorariosProps {...omitido...}
const Horarios: React.FC<HorariosProps> = (props) => {
let horarioRenderizado;
if (props.disponivel==="S"){
horarioRenderizado =
<div className="horario-item" style={{ color:"#FFFFFF" }} onClick={(e) => { setHoraAgend( props.hora ) }} >
{props.hora}
</div>;
} else {
horarioRenderizado =
<div style={{ color:"#FFFFFF", background:"#C7B7B7", cursor:"none", textDecoration:"line-through" }} className="horario-item" >
{props.hora}
</div>;
}
return(
<div>
{ horarioRenderizado }
</div>
);
}
function handleIncluirAgendamento(e: FormEvent ) { ... omitido ... }
function handleChangeData(e: React.ChangeEvent<HTMLInputElement>) {
let data = e.target.value;
setStateData(data);
buscarHorarios(data);
setShowHorarios(true);
}
function ShowHorariosDisponiveis(props: any) {
return(
props.showHorarios ?
<div className="horario-container">
{horarios.map((horario) => {
return <Horarios hora={horario.hora} disponivel={horario.disponivel} />;
})}
</div>
:
null
);
}
return (
<div id="cadastro-agendamento" className="container-cadastroagendamento">
<Cabecalho />
<main className="container-cadastroagendamento">
<form onSubmit={handleIncluirAgendamento}>
<fieldset className="container-form">
<ShowHorariosDisponiveis showHorarios={showHorarios}/>
<div className="input-block">
<br></br>
<ThemeProvider theme={theme}>
<Button type="submit" variant="contained" color="primary" style={{ borderRadius: 50 }} className="botao" >
Confirmar
</Button>
</ThemeProvider>
</div>
</fieldset>
</form>
</main>
</div>
);
};
export default CadastroAgendamento;
