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

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

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