mythic-insight/calcom
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 5

AvailableTimes refactor complete, it all seems much simpler now

Browse source
This commit is contained in:
Alex van Andel 2021-06-20 00:10:08 +00:00
parent 01eacedde8
commit d904dd7a00
2 changed files with 37 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
components/booking/AvailableTimes.tsx
View file

@ -11,18 +11,7 @@ const AvailableTimes = (props) => {
const router = useRouter();
const { user, rescheduleUid } = router.query;
const [loading, setLoading] = useState(false);
const [busy, setBusy] = useState([]);
let availableTimes = [];
// Handle date change and timezone change
useEffect(() => {
setLoading(true);
fetch(`/api/availability/${user}?dateFrom=${props.date.startOf('day').utc().format()}&dateTo=${props.date.endOf('day').utc().format()}`)
.then( res => res.json())
.then(setBusy);
}, [props.date]);
const [loaded, setLoaded] = useState(false);
const times = useMemo(() =>
getSlots({
@ -35,11 +24,10 @@ const AvailableTimes = (props) => {
})
, [])
useEffect(() => {
const handleAvailableSlots = (busyTimes: []) => {
// Check for conflicts
for (let i = times.length - 1; i >= 0; i -= 1) {
busy.forEach(busyTime => {
busyTimes.forEach(busyTime => {
let startTime = dayjs(busyTime.start);
let endTime = dayjs(busyTime.end);
@ -64,23 +52,17 @@ const AvailableTimes = (props) => {
}
});
}
// Display available times
availableTimes = 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>
</Link>
</div>
);
setLoaded(true);
};
console.log(availableTimes);
setLoading(false);
}, [busy]);
// Re-render only when invitee changes date
useEffect(() => {
setLoaded(false);
fetch(`/api/availability/${user}?dateFrom=${props.date.startOf('day').utc().format()}&dateTo=${props.date.endOf('day').utc().format()}`)
.then( res => res.json())
.then(handleAvailableSlots);
}, [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">
@ -89,7 +71,17 @@ const AvailableTimes = (props) => {
{props.date.format("dddd DD MMMM YYYY")}
</span>
</div>
{!loading ? availableTimes : <div className="loader"></div>}
{
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>
</Link>
</div>
) : <div className="loader"></div>
}
</div>
);
}

20
pages/[user]/[type].tsx
View file

@ -76,6 +76,18 @@ export default function Type(props) {
</button>
)];
const handleSelectTimeZone = (selectedTimeZone: string) => {
if (selectedDate) {
setSelectedDate(selectedDate.tz(selectedTimeZone))
}
};
const handleToggle24hClock = (is24hClock: boolean) => {
if (selectedDate) {
setTimeFormat(is24hClock ? 'HH:mm' : 'h:mma');
}
}
return (
<div>
<Head>
@ -115,12 +127,8 @@ export default function Type(props) {
{timeZone()}
<ChevronDownIcon className="inline-block w-4 h-4 ml-1 -mt-1" />
</button>
{
isTimeOptionsOpen &&
<TimeOptions
onSelectTimeZone={(selectedTimeZone: string) => setSelectedDate(selectedDate.tz(selectedTimeZone))}
onToggle24hFormat={(is24hClock: boolean) => setTimeFormat(is24hClock ? 'HH:mm' : 'h:mma')}
/>}
{ isTimeOptionsOpen && <TimeOptions onSelectTimeZone={handleSelectTimeZone}
onToggle24hClock={handleToggle24hClock} />}
<p className="text-gray-600 mt-3 mb-8">
{props.eventType.description}
</p>