Opa, Boa tarde Vinicios, tudo beleza?
Repositorio: https://github.com/Notnox/Event-Tracker
Ainda estou fazendo o curso, então você vai encontrar o projeto na branch main-des.
Um resumo para tentar ser mais assertivo para replicar o bug.
- passo 1: Cadastrar um novo evento.
- passo 2: Arrastar o evento para outro dia.
Nesse case acontece duas coisas.
- 1: Caso arraste para outro dia ou no mesmo dia, querendo mudar apenas o horario, funciona normal.
- 2: Caso mude de dia, o novo evento na lista de eventos, permanece com a data de cadastro inicial.
Fazer o mesmo passo nos registros que temos como default no arquivo atom.ts, funciona normal.
<<<<atom.ts>>>>
mport { atom } from "recoil";
import { IEvento } from "../interfaces/IEvento";
export const listaDeEventosState = atom<IEvento[]>({
key: 'listaDeEventosState',
default: [
{
"descricao": "Estudar React",
"inicio": new Date("2022-01-15T09:00"),
"fim": new Date("2022-01-15T13:00"),
"completo": false,
"id": 1642342747
},
{
"descricao": "Estudar Recoil",
"inicio": new Date("2022-01-16T09:00"),
"fim": new Date("2022-01-16T11:00"),
"completo": false,
"id": 1642342959
}
]
})
Mas como eu comentei no primeiro comentário, se utilizar um console.log(eventos) dentro da função onEventDragFinish do arquivo index.tsx do Calendário, a função acessa o state default em seguida persiste a nova configuração utilizando nosso hook do recoil, porem se utilizarmos novamente a função, o console vai exibir o estado default e não o state persistido, o mesmo vale para se cadastrar um novo evento.
<<<<src/components/Calendario/index.tsx>>>>
import React, { useEffect, useState } from 'react'
import style from './Calendario.module.scss';
import ptBR from './localizacao/ptBR.json'
import Kalend, { CalendarEvent, CalendarView, OnEventDragFinish } from 'kalend'
import 'kalend/dist/styles/index.css';
import { listaDeEventosState } from '../../state/atom';
import { useRecoilValue, useSetRecoilState } from 'recoil';
import useAtualizarEvento from '../../state/hooks/useAtualizarEventos';
import { IEvento } from '../../interfaces/IEvento';
interface IKalendEvento {
id?: number
startAt: string
endAt: string
summary: string
color: string
}
const Calendario: React.FC = () => {
const atualizarEvento = useAtualizarEvento();
const eventos = useRecoilValue(listaDeEventosState);
const eventosKalend = new Map<string, IKalendEvento[]>();
eventos.forEach(evento => {
const chave = evento.inicio.toISOString().slice(0, 10)
if (!eventosKalend.has(chave)) {
eventosKalend.set(chave, [])
}
eventosKalend.get(chave)?.push({
id: evento.id,
startAt: evento.inicio.toISOString(),
endAt: evento.fim.toISOString(),
summary: evento.descricao,
color: 'blue'
})
})
const onEventDragFinish: OnEventDragFinish = (
kalendEventoInalterado : CalendarEvent,
kalendEventoAtualizado: CalendarEvent,
) => {
const evento = eventos.find(evento => evento.descricao === kalendEventoAtualizado.summary);
console.log(eventos);
if(evento){
const eventoAtualizado = { ...evento }
eventoAtualizado.inicio = new Date(kalendEventoAtualizado.startAt);
eventoAtualizado.fim = new Date(kalendEventoAtualizado.endAt);
atualizarEvento(eventoAtualizado);
}
};
return (
<div className={style.Container}>
{eventos &&
<Kalend
events={Object.fromEntries(eventosKalend)}
initialDate={new Date().toISOString()}
hourHeight={60}
initialView={CalendarView.WEEK}
timeFormat={'24'}
weekDayStart={'Monday'}
calendarIDsHidden={['work']}
language={'customLanguage'}
customLanguage={ptBR}
onEventDragFinish={onEventDragFinish}
/>
}
</div>
);
}
export default Calendario
