OnDelete is not working

[ssslowl]

Hello!

I'm trying to delete an event from server, but when I call property onDelete, It just passes undefined value for id.

objects in array stored with this parameters:

        event_id: event.id,
        start: new Date(event.start),
        end: new Date(event.end),
        title: event.patient.firstName + " " + event.patient.lastName,
        description: event.description,
        visited: event.isVisited,
        patient: event.patient,
        doctor: event.doctor,
        color: event.isVisited ? "green" : "red",

[aldabil21]

Im not sure how you are handling this, you did not show the code related to onDelete

check this example: https://codesandbox.io/p/sandbox/remote-data-forked-x38p27

[ssslowl]

Im not sure how you are handling this, you did not show the code related to onDelete

check this example: https://codesandbox.io/p/sandbox/remote-data-forked-x38p27

const handleDelete = async (deletedId) => {    
 await axios.post(`http://localhost:8080/patientRecords/${deletedId}`, {headers: {'Authorization': `Bearer ${localStorage.getItem('token')}`, 'Content-Type': 'application/json'}});

    return new Promise((res, rej) => {
      setTimeout(() => {
        res(deletedId);
      }, 3000);
    });
  };

const fetchRemote = async (query) => {
    console.log("Query: ", query);
    let startDate = new Date(query.start).toISOString();
    let endDate = new Date(query.end).toISOString();
    const newQuery = `?start=${startDate}&end=${endDate}`;
    getEvents();
    return new Promise((res) => {
        res(data);
    });
  };

I took the code for fetch remote and delete from the example

const data = [];

  const getEvents = async () => {

    const result = await axios.get("http://localhost:8080/patientRecords", { headers: { 'Authorization': `Bearer ${localStorage.getItem('token')}` } });


    const formattedEvents = [];

    for (const event of result.data) {
      await data.push({
        event_id: event.id,
        start: new Date(event.start),
        end: new Date(event.end),
        title: event.patient.firstName + " " + event.patient.lastName,
        description: event.description,
        visited: event.isVisited,
        patient: event.patient,
        doctor: event.doctor,
        color: event.isVisited ? "green" : "red",
      });
    }

  }

Well, I used the example you send, but this example is on version 2.1.0 while I'm using 2.9.3. Do i need to change version of component?

[ssslowl]

<Scheduler
        customEditor={(scheduler) => <RecordEditor scheduler={scheduler} />}
        getRemoteEvents={fetchRemote}
        onDelete={handleDelete}
        hourFormat='24'

        week={
          {
            startHour: 9,
            endHour: 22
          }
        }
        day={
          {
            startHour: 9,
            endHour: 22
          }
        }

        translations={
          {navigation:{
            month: "Месяц",
            week: "Неделя",
            day: "День",
            today: "Сегодня",
            agenda: "Список"
          }
        }}
  
  />

Also, here is the component

[aldabil21]

The sandbox I shared is using latest version 2.9.3 https://codesandbox.io/p/sandbox/remote-data-forked-x38p27

Are you sure the delete http call doesn't throw error?

I see couple things in the code that can be adjusted:

const handleDelete = async (deletedId) => {
  try {
    console.log(`Deleting record with id: ${deletedId}`)
    await axios.post(`http://localhost:8080/patientRecords/${deletedId}`, {
      headers: {
        Authorization: `Bearer ${localStorage.getItem("token")}`,
        "Content-Type": "application/json",
      },
    });
    // Probably better to return id from the server
    return deletedId;
  } catch (error) {
    // Handle report error
    console.error(error);
  }
};

const getEvents = async () => {
  try {
    const result = await axios.get("http://localhost:8080/patientRecords", {
      headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
    });
    return result.data.map((event) => ({
      event_id: event.id,
      start: new Date(event.start),
      end: new Date(event.end),
      title: event.patient.firstName + " " + event.patient.lastName,
      description: event.description,
      visited: event.isVisited,
      patient: event.patient,
      doctor: event.doctor,
      color: event.isVisited ? "green" : "red",
    }));
  } catch (error) {
    // Handle report error
    console.error(error);
  }
};

[ssslowl]

I guess I'm not being able to open the example you provided.

Also, the issue is that on console log the link that he trying to access is http:/localhost:8080/patientRecords/undefined

I also tried with handleDelete(props...) to see what props is function sending, but it returned an empty array

[aldabil21]

I guess I'm not being able to open the example you provided.
🤔