0

I am developing a MERN app where I have members with their time and date slot, the time slot is an array which could be more than one slot for one staff or member, so whenever the user clicks on the date picker after clicking on a specific staff, the user should get time slot of this slot depending on what is in their slot, the problem that I am facing is if a staff has more than one busy slot for example (two slots), which becomes an array of objects, the time slot render twice and each one updates seperatly depending on the data. Here is the code:

So first I get the data from an array and pass it to a function:

{members.timeSlot.map((slot, is) =>
    <div key={is} >
       {counter(slot.slot_date ,slot.slot_start_time, slot.slot_end_time)}
    </div>
)}

The function above it:

 let counter = (storedDate, startTime, endTime) => {

        var times = ['09:00 AM', '10:00 AM', '11:00 AM', '12:00 PM','01:00 PM', '02:00 PM', '03:00 PM', '04:00 PM', '05:00 PM', '06:00 PM'];
        var rows = [];
      

           var sDate = new Date(storedDate); 
           let storedDay = sDate.getDate();
           let storedMonth = (sDate.getMonth() + 1 );
           let storedYear = sDate.getFullYear();

           let selectedDate = date  
           let selectedDay = selectedDate.getDate(); // 11
           let selectedMonth = (selectedDate.getMonth() + 1);
           let selectedYear =  selectedDate.getFullYear();
        
        for (var j = 0; j < times.length; j++) {
            let count = j + 9;
            if(storedDay === selectedDay && storedMonth === selectedMonth ) {

            if(count >= startTime && count <= endTime ) {
                 continue;
            } else {
                rows.push(
                    <>
                         <label style={{backgroundColor:'pink', color:'blue'}}><input type="radio" value={count} key={j} style={{position:'relative'}} name="schedule-weekly-option" onClick={()=> setTimes(count)} />&nbsp;{times[j]} &nbsp;</label>
                    </>
                  );
               }
        } else  {
                rows.push(
                <>
                     <label style={{backgroundColor:'blue', color:'pink'}} ><input type="radio" value={count} key={j} style={{position:'relative'}} name="schedule-weekly-option" onClick={()=> setTimes(count)} />&nbsp;{times[j]} &nbsp;</label>
                </>
              );
        }
        } return <div >{rows}</div>;
       
    }

so the output shows twice because there are two slots in the database like this

enter image description here

Should I update the array? and which is the best way to do it? I am using react hooks.

I would appreciate your help!

Thanks.

Dark shadow
  • 225
  • 2
  • 8
jd1008
  • 1
  • 2
  • 1
    What should the expected output be if there is more than one time slot? Your question is a bit unclear. – Drew Reese Nov 23 '20 at 06:15
  • It should show the timing from 9 to 6 pm only once. and it should be updated if I change the datepicker to a date where the staff has busy slots and the busy times will be removed. – jd1008 Nov 23 '20 at 06:17
  • u have 2 IF statements that overlaps one another. Try to fix your if-else logic. – Someone Special Nov 23 '20 at 06:19
  • Is it that `members.timeSlot` is an array with more than 1 element in it? Array.prototype.map maps a one-to-one array, so if there are two time slots, the array returned from the mapping will also have two elements. Maybe you need to figure which time slot element from the array you want to render first as it looks like you rendered both slots with "identical" radio buttons & labels. – Drew Reese Nov 23 '20 at 06:23
  • Yes, I think it reappears based on the length of timeslot array, that's what I am trying to fix. – jd1008 Nov 23 '20 at 06:28
  • Ok, so if you get a `members.timeslot` array with 2+ length, how do you decide which index/element/slot to process and display? If you were expecting to only get one slot then why do you sometimes get more? – Drew Reese Nov 23 '20 at 06:34
  • It depends on the value of the date picker, so if the staff has a busy slot in that selected date it should update – jd1008 Nov 23 '20 at 06:36
  • Perhaps your issue would be better understood if you provided a bit more context. Can you include some example `members.timeslot` and expected result pairs? If I had to guess I think you meant to process the timeslot array into a single `times` array and toggle the style of individual slot versus creating a (*mostly*) duplicate slot array for each member slot. – Drew Reese Nov 23 '20 at 16:51
  • ```{ "_id": "5fba06cdd6ee2c3cc083ab30", "staff": "5fb24c201c6be13bb84c7acc", "slot_date": "2020-12-25T20:00:00.000Z", "slot_start_time": 12, "slot_end_time": 15, "createdAt": "2020-11-22T06:35:57.911Z", "updatedAt": "2020-11-23T06:48:06.799Z", "__v": 0, "duration": 3 }``` – jd1008 Nov 24 '20 at 05:32
  • This is a single timeSlot – jd1008 Nov 24 '20 at 05:32
  • So for each staff could have more than one slot, so my goal is to get the free times of this staff so the times will update depending to their slots and their free times for example: someone is busy between 12pm and 2pm, I should get radio buttons between 9 and 6 o'clock without 12,1, 2 pm.between 9 and 6 o'clock without 12,1, 2 pm. – jd1008 Nov 24 '20 at 05:36
  • I think my problem is I am adding to array rows twice, maybe I should update the arrays instead, I am trying to figure it out. Please, if you have suggestions on how to do that, I'll really appreciate. Thank you – jd1008 Nov 24 '20 at 06:46

0 Answers0