eslint fixes
This commit is contained in:
Malte Delfs committed
1 parent
917b2c4821
commit
646ff4a107
3 files changed
+438
-419
No files matched your search
@@ -1,38 +1,37 @@
|
||||
import dayjs, {Dayjs} from "dayjs";
|
||||
import isBetween from 'dayjs/plugin/isBetween';
|
||||
import dayjs from "dayjs";
|
||||
import isBetween from "dayjs/plugin/isBetween";
|
||||
dayjs.extend(isBetween);
|
||||
import {useEffect, useMemo, useState} from "react";
|
||||
import { useEffect, useState } from "react";
|
||||
import getSlots from "../../lib/slots";
|
||||
import Link from "next/link";
|
||||
import {timeZone} from "../../lib/clock";
|
||||
import {useRouter} from "next/router";
|
||||
import {ExclamationIcon} from "@heroicons/react/solid";
|
||||
import { timeZone } from "../../lib/clock";
|
||||
import { useRouter } from "next/router";
|
||||
import { ExclamationIcon } from "@heroicons/react/solid";
|
||||
|
||||
const AvailableTimes = (props) => {
|
||||
|
||||
const router = useRouter();
|
||||
const { user, rescheduleUid } = router.query;
|
||||
const [loaded, setLoaded] = useState(false);
|
||||
const [error, setError] = useState(false);
|
||||
|
||||
const times = getSlots({
|
||||
calendarTimeZone: props.user.timeZone,
|
||||
selectedTimeZone: timeZone(),
|
||||
eventLength: props.eventType.length,
|
||||
selectedDate: props.date,
|
||||
dayStartTime: props.user.startTime,
|
||||
dayEndTime: props.user.endTime,
|
||||
});
|
||||
calendarTimeZone: props.user.timeZone,
|
||||
selectedTimeZone: timeZone(),
|
||||
eventLength: props.eventType.length,
|
||||
selectedDate: props.date,
|
||||
dayStartTime: props.user.startTime,
|
||||
dayEndTime: props.user.endTime,
|
||||
});
|
||||
|
||||
const handleAvailableSlots = (busyTimes: []) => {
|
||||
// Check for conflicts
|
||||
for (let i = times.length - 1; i >= 0; i -= 1) {
|
||||
busyTimes.forEach(busyTime => {
|
||||
let startTime = dayjs(busyTime.start);
|
||||
let endTime = dayjs(busyTime.end);
|
||||
busyTimes.forEach((busyTime) => {
|
||||
const startTime = dayjs(busyTime.start);
|
||||
const endTime = dayjs(busyTime.end);
|
||||
|
||||
// Check if start times are the same
|
||||
if (dayjs(times[i]).format('HH:mm') == startTime.format('HH:mm')) {
|
||||
if (dayjs(times[i]).format("HH:mm") == startTime.format("HH:mm")) {
|
||||
times.splice(i, 1);
|
||||
}
|
||||
|
||||
@@ -42,12 +41,12 @@ const AvailableTimes = (props) => {
|
||||
}
|
||||
|
||||
// Check if slot end time is between start and end time
|
||||
if (dayjs(times[i]).add(props.eventType.length, 'minutes').isBetween(startTime, endTime)) {
|
||||
if (dayjs(times[i]).add(props.eventType.length, "minutes").isBetween(startTime, endTime)) {
|
||||
times.splice(i, 1);
|
||||
}
|
||||
|
||||
// Check if startTime is between slot
|
||||
if (startTime.isBetween(dayjs(times[i]), dayjs(times[i]).add(props.eventType.length, 'minutes'))) {
|
||||
if (startTime.isBetween(dayjs(times[i]), dayjs(times[i]).add(props.eventType.length, "minutes"))) {
|
||||
times.splice(i, 1);
|
||||
}
|
||||
});
|
||||
@@ -60,49 +59,64 @@ const AvailableTimes = (props) => {
|
||||
useEffect(() => {
|
||||
setLoaded(false);
|
||||
setError(false);
|
||||
fetch(`/api/availability/${user}?dateFrom=${props.date.startOf('day').utc().format()}&dateTo=${props.date.endOf('day').utc().format()}`)
|
||||
.then( res => res.json())
|
||||
fetch(
|
||||
`/api/availability/${user}?dateFrom=${props.date.startOf("day").utc().format()}&dateTo=${props.date
|
||||
.endOf("day")
|
||||
.utc()
|
||||
.format()}`
|
||||
)
|
||||
.then((res) => res.json())
|
||||
.then(handleAvailableSlots)
|
||||
.catch(e => setError(true))
|
||||
.catch((e) => {
|
||||
console.error(e);
|
||||
setError(true);
|
||||
});
|
||||
}, [props.date]);
|
||||
|
||||
return (
|
||||
<div className="sm:pl-4 mt-8 sm:mt-0 text-center sm:w-1/3 md:max-h-97 overflow-y-auto">
|
||||
<div className="text-gray-600 font-light text-xl mb-4 text-left">
|
||||
<span className="w-1/2">
|
||||
{props.date.format("dddd DD MMMM YYYY")}
|
||||
</span>
|
||||
<span className="w-1/2">{props.date.format("dddd DD MMMM YYYY")}</span>
|
||||
</div>
|
||||
{
|
||||
!error && loaded && times.map((time) =>
|
||||
{!error &&
|
||||
loaded &&
|
||||
times.map((time) => (
|
||||
<div key={dayjs(time).utc().format()}>
|
||||
<Link
|
||||
href={`/${props.user.username}/book?date=${dayjs(time).utc().format()}&type=${props.eventType.id}` + (rescheduleUid ? "&rescheduleUid=" + rescheduleUid : "")}>
|
||||
<a key={dayjs(time).format("hh:mma")}
|
||||
className="block font-medium mb-4 text-blue-600 border border-blue-600 rounded hover:text-white hover:bg-blue-600 py-4">{dayjs(time).tz(timeZone()).format(props.timeFormat)}</a>
|
||||
href={
|
||||
`/${props.user.username}/book?date=${dayjs(time).utc().format()}&type=${props.eventType.id}` +
|
||||
(rescheduleUid ? "&rescheduleUid=" + rescheduleUid : "")
|
||||
}>
|
||||
<a
|
||||
key={dayjs(time).format("hh:mma")}
|
||||
className="block font-medium mb-4 text-blue-600 border border-blue-600 rounded hover:text-white hover:bg-blue-600 py-4">
|
||||
{dayjs(time).tz(timeZone()).format(props.timeFormat)}
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
{!error && !loaded && <div className="loader"/>}
|
||||
{error &&
|
||||
<div className="bg-yellow-50 border-l-4 border-yellow-400 p-4">
|
||||
))}
|
||||
{!error && !loaded && <div className="loader" />}
|
||||
{error && (
|
||||
<div className="bg-yellow-50 border-l-4 border-yellow-400 p-4">
|
||||
<div className="flex">
|
||||
<div className="flex-shrink-0">
|
||||
<ExclamationIcon className="h-5 w-5 text-yellow-400" aria-hidden="true" />
|
||||
</div>
|
||||
<div className="ml-3">
|
||||
<p className="text-sm text-yellow-700">
|
||||
Could not load the available time slots.{' '}
|
||||
<a href={"mailto:" + props.user.email} className="font-medium underline text-yellow-700 hover:text-yellow-600">
|
||||
Contact {props.user.name} via e-mail
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex-shrink-0">
|
||||
<ExclamationIcon className="h-5 w-5 text-yellow-400" aria-hidden="true" />
|
||||
</div>
|
||||
<div className="ml-3">
|
||||
<p className="text-sm text-yellow-700">
|
||||
Could not load the available time slots.{" "}
|
||||
<a
|
||||
href={"mailto:" + props.user.email}
|
||||
className="font-medium underline text-yellow-700 hover:text-yellow-600">
|
||||
Contact {props.user.name} via e-mail
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default AvailableTimes;
|
||||
Reference in new issue
Block a user