FullCalendar 重复事件

Question

I'm a junior with a legacy project(

We have a page with fullCalendar component. And a lot of eventListeners in it. If we change any state on eventDragStart, we get a duplication animation event on draging event to another place on eventChange. If we get rid of changing any state on eventDragStart, everythitg is OK. In the first case after reloading the page we have right location of the event. How can I rid of this duplication?

import './Schedule.css';
import SmartSelect from '../../Root/Components/SmartSelect';
import PeopleList from '../Containers/PeopleList';
import SessionModal from '../Containers/SessionModal';
import FunkFullCalendar from '../../Root/Components/FunkFullCalendar';
import moment from 'moment-timezone';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { ISO_DATE_WITHOUT_TIME } from '../../constants';
import BinModal from '../Containers/BinModal';
import localizer from '../../localizer';
import { useDispatch, useSelector } from 'react-redux';
import { useHistory } from 'react-router-dom';
import { setInterval, loadSessions, changeTime } from '../Actions/ScheduleActions';
import { openSessionById, openNewSession } from '../Actions/SessionModalActions';
import { datesToKey, extractName } from '../../helpers';

const Schedule = () => {
    const dispatch = useDispatch();
    const history = useHistory();
    const [showBin, setShowBin] = useState(false);

     {/* <> ... </> */}
    const room = useSelector((state) => state.schedule.selectedRoom);
    const startDate = useSelector(
        (state) =>
            state.schedule.calendarStartDate &&
            moment(state.schedule.calendarStartDate).tz(selectedStudio?.timeZoneName)?.format(ISO_DATE_WITHOUT_TIME)
    );
    const endDate = useSelector(
        (state) =>
            state.schedule.calendarEndDate &&
            moment(state.schedule.calendarEndDate).tz(selectedStudio?.timeZoneName)?.format(ISO_DATE_WITHOUT_TIME)
    );

    let key = datesToKey(startDate, endDate);
    const _sessions = useSelector((state) => state.schedule.sessions[key] || []);
    const persons = useSelector((state) => state.schedule?.actors);
    const sessions = _sessions?.map((session) => {
        let title = session.actorIds
            ?.map((w) => {
                let personName = persons.find((person) => person.id === w);
                if (!personName) return '';
                return extractName(personName);
            })
            .join('; ');
        return {
            title: title,
            start: moment(session.start).tz(selectedStudio?.timeZoneName).format(),
            end: moment(session.end).tz(selectedStudio?.timeZoneName).format(),
            id: session.id,
        };
    });

    const changeInterval = (startDate, endDate) => {
        dispatch(loadSessions(room, startDate, endDate));
        dispatch(setInterval(startDate, endDate));
        if (room) {
            history.push('/schedule/' + room + '/week/' + moment(startDate).tz(timeZone).format(ISO_DATE_WITHOUT_TIME));
        }
    };
    const openSession = (id) => {
        dispatch(openSessionById(id));
    };

    const changeSessionTime = (sessionId, start, due) => {
        dispatch(changeTime(sessionId, start, due));
    };
    const createSession = (startDate, actorId) => {
        dispatch(openNewSession(startDate, actorId));
    };

    const handleDragStart = () => setShowBin(true);
    const handleDragEnd = () => setShowBin(false);

    return (
        <div className="sch-container">
            <div className="tpl-header">
                 {/* <> ... </> */}
            </div>
            <div className="sch-calendar-layout">
                <div className="sch-calendar-container">
                    <FunkFullCalendar
                        next={() => {
                            let newStartDate = moment(startDate).tz(timeZone, true).startOf('week').add(1, 'week');
                            let newEndDate = moment(newStartDate).endOf('week');
                            changeInterval(newStartDate.toISOString(), newEndDate.toISOString());
                        }}
                        prev={() => {
                            let newStartDate = moment(startDate).tz(timeZone, true).subtract(1, 'week');
                            let newEndDate = moment(newStartDate).endOf('week');
                            changeInterval(newStartDate.toISOString(), newEndDate.toISOString());
                        }}
                        today={() => {
                            let startDate = moment().tz(timeZone, true).startOf('week');
                            let endDate = moment().tz(timeZone, true).endOf('week');
                            changeInterval(startDate.toISOString(), endDate.toISOString());
                        }}
                        timeGridWeek={() => {
                            setView('timeGridWeek');
                        }}
                        allDaySlot={false}
                        defaultView={'timeGridWeek'}
                        view={view}
                        events={sessions}
                        eventDragStart={handleDragStart}
                        eventDragStop={handleDragEnd}
                        dateClick={(evt) => {
                            let correctedDate = moment(evt.date).utc().tz(timeZone, true);
                            createSession(correctedDate);
                        }}
                        drop={(evt) => {
                            let correctedDate = moment(evt.date).utc().tz(timeZone, true);
                            createSession(correctedDate, evt.draggedEl.dataset.actorid);
                        }}
                        eventClick={(evt) => {
                            openSession(evt.event.id);
                        }}
                        eventChange={(evt) => {
                            let correctedStart = moment(evt.event.start).utc().tz(timeZone, true);
                            let correctedEnd = moment(evt.event.end).utc().tz(timeZone, true);
                            changeSessionTime(evt.event.id, correctedStart, correctedEnd);
                        }}
                        startDate={startDate}
                        endDate={endDate}
                        eventTimeFormat={{
                            hour: '2-digit',
                            minute: '2-digit',
                            meridiem: false,
                            hour12: false,
                        }}
                        dateFormat={dateFormat}
                        timeZone={timeZone}
                        timeZoneParam={timeZone}
                        timeZoneOffsetName={timeZoneOffset}
                        language={language}
                    />
                </div>
                {showBin ? (
                    <div className="sch-actors-list trash-panel">
                        {localizer.getString('interface:dragHeretoCancelSession', language)}
                    </div>
                ) : (
                    <div className="sch-actors-list">
                      {/* <> ... </> */}
                    </div>
                )}
            </div>
        </div>
    );
};

export default Schedule;

This is Calendar component

import { useEffect, useState, useRef, useCallback } from 'react';
import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridWeek from '@fullcalendar/timegrid';
// import momentPlugin from '@fullcalendar/moment'
import interactionPlugin from '@fullcalendar/interaction';
import './FullCalendarWraper.css';
import moment from 'moment-timezone';
import { ISO_DATE_WITHOUT_TIME } from '../../constants';
import { useSelector } from 'react-redux';

const FunkFullCalendar = (props) => {
    const calendar = useRef();
    const calendarRef = useRef();
    const sessions = useSelector((state) => state.schedule.sessions);

    const findEvents = useCallback(
        (events, sessions, status, color, drop) => {
            const result = [];
            let filteredSessions = Object.values(sessions)
                .flat()
                .filter((session) => session.status === status);
            filteredSessions.map((session) => {
                events.forEach((event) => {
                    if (event.id === session.id) {
                        result.push(event);
                    }
                });
            });
            return result.flat().map((x) => ({ ...x, color: color, droppable: drop }));
        },
        [sessions, props.events]
    );
    calendarRef.current = findEvents(props.events, sessions, 'Scheduled', '#3788D8', true).concat(
        findEvents(props.events, sessions, 'Completed', '#c0a65e', false)
    );

    const startDate = moment(props.startDate).isValid() ? props.startDate : moment().startOf('week').toISOString();
    const [calendarState, setCalendarState] = useState({
        view: 'timeGridWeek',
        startDate: startDate,
        timeZone: props.timeZone,
        events: [],
        language: props.language,
    });

    useEffect(() => {
        let unsubscribe = false;
        if (!unsubscribe) {
            setCalendarDate(props.startDate);
        }
        return () => {
            unsubscribe = true;
        };
    }, []);

    const setCalendarDate = (date) => {
        if (calendar.current) {
            let newDate = moment(date).isValid ? moment(date) : moment();
            let localDate = moment(newDate.format(ISO_DATE_WITHOUT_TIME)).utc(true);
            calendar?.current?.getApi().gotoDate(localDate.toISOString());
        }
    };

    if (props?.startDate !== calendarState.startDate || props.timeZone !== calendarState.timeZone) {
        if (props.startDate) {
            setCalendarState({ ...calendarState, startDate: props.startDate, timeZone: props.timeZone });
            setCalendarDate(props.startDate);
        }
    }
    return (
        <div className="fcw-container">
            <div className="fcw-inline-buttons">
            {/* <>...</> */}
            </div>
            <div className="fcw-calendar-parent">
                <FullCalendar
                    height="100%"
                    initialView={props.defaultView}
                    firstDay={1}
                    headerToolbar={false}
                    plugins={[dayGridPlugin, timeGridWeek, interactionPlugin]}
                    eventTextColor="white"
                    droppable
                    editable
                    events={calendarRef.current}
                    ref={calendar}
                    allDaySlot={false}
                    eventTimeFormat={props.eventTimeFormat}
                    locale={props.dateFormat}
                    timeZone={props.timeZone}
                    timeZoneParam={props.timeZone}
                    eventDragStart={props.eventDragStart}
                    eventDragStop={props.eventDragStop}
                    dateClick={(d) => {
                        props.dateClick(d);
                    }}
                    drop={(evt) => {
                        if (props.drop) props.drop(evt);
                    }}
                    eventClick={(evt) => {
                        props.eventClick(evt);
                    }}
                    eventChange={(e) => {
                        props.eventChange(e);
                    }}
                />
            </div>
        </div>
    );
};

export default FunkFullCalendar;

changeTime function

export function changeTime(sessionId, startDate, dueDate) {
    return async function (dispatch, getState) {
        let diff = moment(dueDate).diff(moment(startDate));
        let duration = moment.duration(diff);
        let deltaDays = duration.days();
        let deltaHours = duration.hours();
        let deltaMinutes = duration.minutes();
        const state = getState();
        // const sessions = ;
        const selectedSession = Object.values(state.schedule.sessions)
            .flat()
            .find((session) => session.id === sessionId);
        if (selectedSession.status === 'Completed') {
            dispatch(createNotification('change_time_error', 'notification:cantRescheduleCompletedSession', 'ERROR', 5000));
        } else {
            if (deltaDays > 0 || deltaHours > 6 || (deltaHours === 6 && deltaMinutes > 0)) {
                dueDate = moment(startDate).add(6, 'hours');
            }
            try {
                let result = await post(Connections.backend + SESSIONS_URL + '/' + sessionId + '/reschedule', {
                    start: startDate.toISOString(),
                    end: dueDate.toISOString(),
                });
            } catch (e) {
                dispatch(createNotification('change_time_error', e.message, 'ERROR', 5000));
            } finally {
                dispatch(
                    loadSessions(state.schedule.selectedRoom, state.schedule.calendarStartDate, state.schedule.calendarEndDate)
                );
            }
        }
    };
}```