+
+
changeDayData(date)}
+ startTimeListStyle={'grid'}
+ />
+
+
+
+
+
{dayData?.displayDate}
+ {dayData && (
+
+ {allHoursPerDay.length === 0 ? (
+
+ ) : (
+ allHoursPerDay.map((hour, index) => {
+ const buttonTime = Number(moment(dayData.selectedDate).set('hour', hour).format('HH'))
+ const isUnavailable = allGapsPerDay.some((day: Date) => buttonTime === day.getHours())
+ const isPast =
+ moment(dayData.selectedDate).add(buttonTime, 'hour').unix() <= moment().unix()
+ const isSelected =
+ selectedTimeSlot[0] === moment(dayData.selectedDate).set('hour', hour).unix()
+
+ const buttonClass = isSelected ? styles.hourButtonActive : styles.hourButton
+ const buttonOnClick = () =>
+ setSelectedTimeSlot([
+ moment(dayData.selectedDate).set('hour', hour).unix(),
+ moment(dayData.selectedDate).set('hour', hour).add(eventDuration, 'minute').unix(),
+ ])
+
+ return (
+
+
+
+ )
+ })
+ )}
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+ {view === 'upcoming' ? (
+ <>
+ {user?.meetings.map(({ trainerID, startTime, endTime }, index) => {
+ if (moment(startTime).unix() > moment().unix()) {
+ return (
+
+
+
Training
+
w/ {trainers?.find(trainer => trainer.id === trainerID)?.name}
+
+
+
+
{moment(startTime).format('DD.MM.YYYY, HH:mm')} -{' '}{moment(endTime).format('HH:mm')}
+
+
+
+ )
+ }
+ })}
+
+ ) : (
+ <>
+ {user?.meetings.map(({ trainerID, startTime, endTime }, index) => {
+ if (moment(endTime).unix() < moment().unix()) {
+ return (
+
+
+
Training
+
w/ {trainers?.find(trainer => trainer.id === trainerID)?.name}
+
+
+
+
{moment(startTime).format('DD.MM.YYYY, HH:mm')} -{' '}{moment(endTime).format('HH:mm')}
+
+
+
+ )
+ }
+ })}
+
+ )}
+
+