I am trying to create a react/vite/node app, but I am having issues with implementing functionality where the dates taken from the database eliminate the time slots which have already been booked. My problem at this stage is having the splicedSlots be shown on the user interface although the console already shows them as jsx buttons with proper keys (times).
the code:
import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import 'bootstrap';
import axios from 'redaxios';
// code for calendar and timeSelect was here
let daySelected = localStorage.getItem('daySelected');
let allowedDates = [];
let forbiddenDates = [];
let allDates = [];
let fetchDataCalled = false;
let updatedForbiddenDates = [];
let wantedSlots = [];
let times = [];
let allDatesUnique = [];
let timeSlotKeys = [];
let timeSlots = [];
let splicedSlots = [];
const generateTimeSlots = (wantedSlots) => {
const startDate = new Date(selectedDate);
startDate.setHours(8, 0, 0, 0);
const endDate = new Date(selectedDate);
endDate.setHours(18, 0, 0, 0);
wantedSlots = allDatesUnique.filter(
(item) => !forbiddenDates.includes(item)
);
for (let i = 0; i < wantedSlots.length; i++) {
times.push(wantedSlots[i].split(', ')[1]);
}
const uniqueTimes = [...new Set(times)];
for (let i = 0; i < uniqueTimes.length; i++) {
wantedSlots.push(
<button
key={uniqueTimes[i]}
onClick={() => handleTimeSelect(uniqueTimes[i])}
className={`time-slot ${
selectedTime === uniqueTimes[i] ? 'selected' : ''
} `}
disabled={false}
>
{uniqueTimes[i]}
</button>
);
}
splicedSlots = wantedSlots.splice(19);
while (startDate < endDate) {
timeSlotKeys = timeSlots.map((timeSlot) => timeSlot.key);
let time = startDate.toLocaleTimeString('en-US', {
hour: 'numeric',
minute: '2-digit',
hour12: true,
});
startDate.setMinutes(startDate.getMinutes() + 30);
timeSlots.push(time);
}
return splicedSlots;
};
const fetchData = async () => {
if (!fetchDataCalled) {
fetchDataCalled = true;
const startDate = new Date(selectedDate);
startDate.setHours(8, 0, 0, 0);
const endDate = new Date(selectedDate);
endDate.setHours(18, 0, 0, 0);
try {
const response = await axios.get('/api/v1/booking').then((res) => {
const bookedDates = res.data.bookings.map(
(booking) => booking.selectedDateTime
);
const keysArray = timeSlots;
for (let j = 0; j < keysArray.length; j++) {
const timeKey = keysArray[j];
const hour = timeKey
.replace(`${daySelected}_`, '')
.replace('-', ':');
const splitDate = daySelected.split('-');
const monthWithZero = splitDate[1];
const monthWithoutZero = parseInt(monthWithZero, 10);
const date = monthWithoutZero + '/' + splitDate[2];
const formattedTime = `${date}, ${hour}`;
allDates.push(formattedTime);
}
allDatesUnique = [...new Set(allDates)];
// console.log(allDatesUnique);
for (let i = 0; i < allDatesUnique.length; i++) {
if (bookedDates.includes(allDatesUnique[i]) === false) {
allowedDates = allowedDates + ' ' + allDatesUnique[i];
} else {
forbiddenDates.push(allDatesUnique[i]);
}
}
for (let i = 0; i < forbiddenDates.length; i++) {
updatedForbiddenDates.push(forbiddenDates[i].split(', ')[1]);
}
});
splicedSlots = generateTimeSlots(splicedSlots);
console.log(splicedSlots);
} catch (error) {
console.error('Error fetching data:', error);
}
}
};
fetchData();
generateTimeSlots();
return (
<div className="booking-calendar-container">
<div className="month-header">
<button className="month-button" onClick={() => handleMonthChange(-1)}>
<span className="arrow left"></span>
</button>
<h2>
{currentMonth.toLocaleString('default', { month: 'long' })}{' '}
{currentMonth.getFullYear()}
</h2>
<button className="month-button" onClick={() => handleMonthChange(1)}>
<span className="arrow right"></span>
</button>
</div>
<table className="calendar">
<thead>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
</tr>
</thead>
<tbody>{generateCalendar()}</tbody>
</table>
<div>{generateTimeSlots()}</div>
<Link
className="calendar-continue-link"
to={`/booking_info/${courseID}`}
onClick={handleLinkClick}
>
next
</Link>
</div>
);
};
export default Calendar;
this is the object that is shown in the console for splicedSlots
Array(19) [ {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, … ]
0: Object { "$$typeof": Symbol("react.element"), type: "button", key: "8:00 AM", … }
1: Object { "$$typeof": Symbol("react.element"), type: "button", key: "8:30 AM", … }
2: Object { "$$typeof": Symbol("react.element"), type: "button", key: "9:00 AM", … }
3: Object { "$$typeof": Symbol("react.element"), type: "button", key: "9:30 AM", … }
4: Object { "$$typeof": Symbol("react.element"), type: "button", key: "10:00 AM", … }
5: Object { "$$typeof": Symbol("react.element"), type: "button", key: "10:30 AM", … }
6: Object { "$$typeof": Symbol("react.element"), type: "button", key: "11:00 AM", … }
7: Object { "$$typeof": Symbol("react.element"), type: "button", key: "11:30 AM", … }
8: Object { "$$typeof": Symbol("react.element"), type: "button", key: "12:00 PM", … }
9: Object { "$$typeof": Symbol("react.element"), type: "button", key: "12:30 PM", … }
10: Object { "$$typeof": Symbol("react.element"), type: "button", key: "1:00 PM", … }
11: Object { "$$typeof": Symbol("react.element"), type: "button", key: "2:00 PM", … }
12: Object { "$$typeof": Symbol("react.element"), type: "button", key: "2:30 PM", … }
13: Object { "$$typeof": Symbol("react.element"), type: "button", key: "3:00 PM", … }
14: Object { "$$typeof": Symbol("react.element"), type: "button", key: "3:30 PM", … }
15: Object { "$$typeof": Symbol("react.element"), type: "button", key: "4:00 PM", … }
16: Object { "$$typeof": Symbol("react.element"), type: "button", key: "4:30 PM", … }
17: Object { "$$typeof": Symbol("react.element"), type: "button", key: "5:00 PM", … }
18: Object { "$$typeof": Symbol("react.element"), type: "button", key: "5:30 PM", … }
length: 19
<prototype>: Array []
calender.jsx:198:16
thank you for anyone who tries to help!