React function generating available time slots doesn't generate the correct time slots

Question

Hi I want to make a function that generates available time slots. It should generate the time slots while keeping in mind that the time slot can't overlap with an already made appointment.Before the time slots are generated a user can specify which kind of appointment to schedule. Each appointment sort has a duration. So it should also check if the time slot added with the duration doesn't overlap.

I'm struggling to make this all working so far I get time slots but it seems to only checks the start of an already made appointment. I'm kind of running in circles here and would love for some advice or part solutions that I can implement to make my idea work

const GenerateAvailableTimeSlots = (start, serviceObject, allAppointments) => {

  const moment = extendMoment(Moment);

  var x = {
    nextSlot: 15,
    appointmentsOfThatDay: [],
    startTime: '8:00',
    endTime: '20:00'
  };
  // function to filter only the appointment that occur on specified day --> ( start )
  let filterAppointments = (allAppointments, start) => {
    let results = [];
    let filterAppoinments = allAppointments.filter(appoinment => appoinment.date === start.format('MMMM Do YYYY'));
    filterAppoinments.map(appoinment => results.push([appoinment.start.format('HH:mm'), appoinment.end.format('HH:mm')]))
    console.log("results", results);
    return results;
  };

  x.appointmentsOfThatDay = filterAppointments(allAppointments, start)
  console.log("appointmentsOfThatDay", x.appointmentsOfThatDay)

  var slotTime = moment(x.startTime, "HH:mm");
  var endTime = moment(x.endTime, "HH:mm");

  // function to check time slot overlaps with already made appointments 
  function OverlapsScheduledAppointment(slotTime, appointments) {

    //added duration to timeslot so I could check if a suggested timeslot + the duration also doesn't overlap with already made appointment
    var slotTimeWithDuration = slotTime.clone().add(serviceObject.hours, 'hours').add(serviceObject.minutes, 'minutes');

    // I don't know where I also could check for slotTimeWithDuration overlap
    return appointments.some((br) => {
      console.log(slotTime >= moment(br[0], "HH:mm") && slotTime < moment(br[1], "HH:mm"));
      return (slotTime >= moment(br[0], "HH:mm") && slotTime < moment(br[1], "HH:mm"));
    });
  }

  let times = [];
  while (slotTime < endTime) {
    if (!OverlapsScheduledAppointment(slotTime, x.appointmentsOfThatDay)) {
      times.push(slotTime.format("HH:mm"));
    }
    slotTime = slotTime.add(x.nextSlot, 'minutes');
  }

  return times;
};

Answer 1

I've found the answer to my question. I was going in the right direction with the above code but in order for generating available time slots that keep in mind the duration of the service you want to schedule and the appointment that are already scheduled.

I had to change this line of code:

// this line just pushes the filtered appointment for a specific day

filterAppoinments.map(appoinment => results.push([appoinment.start.format('HH:mm'), appoinment.end.format('HH:mm')]))

To this

// this line filters the appointment for a specific day and also adds the duration of a service to the start time of an already scheduled appointment. This way when I check if a generated time slot for a service will overlap with an already scheduled appointment it filters out the ones that will overlap

filterAppoinments.map(appoinment => results.push([appoinment.start.clone().subtract(serviceObject.hours, 'hours').subtract(serviceObject.minutes, 'minutes').format('HH:mm'), appoinment.end.format('HH:mm')]))