mardi 7 janvier 2020

React Native DateTimePicker: Conditional Logic Issues with showing date and time

A little Overview:

I have created three states: appointmentDate (appointment date), appointmentTime (appointment start time), appointmentEndTime (appointment end time).

And, I have tried to make each appointment unique by using if-else condition. For example,

IF user already creates an appointment (Appointment 1), with values such as:

appointmentDate: 20-01-2020 //date appointmentTime: 1:00pm //start time appointmentEndTime: 2:00pm //end time

THEN the user cannot create another NEW APPOINTMENT (Appointment 2) with the same start time and end time (which is 1pm to 2pm with the same date).

For the above example user CANNOT create NEW appointment with these values:

1.appointmentDate: 20-01-2020 //date appointmentTime: 1:00pm //start time appointmentEndTime: 2:00pm //end time

  1. appointmentDate: 20-01-2020 //date appointmentTime: 1:30pm //start time appointmentEndTime: 2:30pm //end time

  2. appointmentDate: 20-01-2020 //date appointmentTime: 1:31pm //start time appointmentEndTime: 1:59pm //end time

User either have to pick a DIFFERENT DATE or a DIFFERENT TIME INTERVAL (start time, end time) in order to create Appointment 2.

So my problem are the following:

  1. Firstly, if I create an appointment (appointment 1), for example, with start time 5pm and end time 6pm, and if I try to create another appointment (appointment 2) with start time 4pm and end time 5pm, the system doesn't allow me to create the latter appointment (i.e. appointment 2).
  2. Secondly, if I create an appointment (appointment 1) with start time 10pm and end time 6pm (start time > end time), the app will show error message (or a toast message). In this case, it's working as intended since start time must always be less than end time. HOWEVER, if I again try to create an appointment with the same start time 10pm, but, with different end time 11pm (start time < end time), the app still shows the same error message ( which is start time cannot be greater than end time, even though it's not the case)

So, from the above problem, these are the things I am trying to fix and achieve:

  1. Being able to create two appointments, for example, (Appointment 1) having start time 4pm and end time 5pm and then creating another appointment (Appointment 2) with start time 3pm and end time 4pm. Basically, the second appointment's start and end time is less the first appointment's start and end time.

  2. Prevent user from creating appointment within the 1 hour interval (or any time interval in-between the existing start time and end time) of an already existing appointment. If an existing appointment is from 4pm to 5pm, user can only create appointment before or after this time interval (i.e. start time must be equal to or greater than 5pm (which could have an end time of 6pm) OR with an end time equal to or less than 4pm (which could have a start time of 3pm))

  3. START TIME must always be less than END TIME. For example: start time: 4pm and end time: 3pm should show error message (or in this case, a toast message).

The following are the code snippet:

constructor(props) {
    super(props);
    this.state = {
        //Date
        appointmentDate: new Date(moment()),
        modeAppointmentDate: 'date',
        showAppointmentDate: false,
        textAppointmentDate: moment().format('Do MMMM YYYY').toString(),

        //Time
        appointmentTime: new Date(moment()),
        appointmentEndTime: new Date(moment().add(1, 'hours')),

        modeAppointmentTime: 'time',
        modeEndTime: 'time',

        showAppointmentTime: false,
        showEndTime: false,

        textAppointmentTime: moment().format('h:mm a').toString(),
        textEndTime: moment().add(1, 'hours').format('h:mm a').toString(),

        //new timeSlots
        timeSlots: [],

        //new date, new start time, new end time
        initial_date: '',
        initial_start_time: '',
        initial_end_time: '',
    }
}

 addDateTimeAppt = () => {
    let self = this;

    self.setState({
        initial_date: self.state.appointmentDate,
        initial_start_time: self.state.appointmentTime,
        initial_end_time: self.state.appointmentEndTime,
    });

    let date = self.state.initial_date;
    let start_time = self.state.initial_start_time;
    let end_time = self.state.initial_end_time;

    if (start_time < end_time){
        if (date !== self.state.appointmentDate ||
            (
                (
                    start_time !== self.state.appointmentTime &&
                    start_time <= self.state.appointmentEndTime
                ) &&
                (
                    end_time !== self.state.appointmentEndTime &&
                    end_time <= self.state.appointmentTime
                )
            )
        ) {
            self.addAppointmentApi(); //add appointment
        } else {
            ToastAndroid.show('Sorry! Appointment Time already booked', ToastAndroid.SHORT);
        }
    } else {
        ToastAndroid.show('Invalid appointment time', ToastAndroid.SHORT);
    }
}

Aucun commentaire:

Enregistrer un commentaire