public-offering
/
cal.pub0.org
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[CAL-103] All Bookings show up under Today and Today should be uppercase (#5155) 

Co-authored-by: Nitesh Singh <nitesh.singh@gitstart.dev>
Co-authored-by: gitstart <gitstart@users.noreply.github.com>
Co-authored-by: Thiago Nascimbeni <tnascimbeni@gmail.com>
Co-authored-by: Rafael Toledo <87545086+Toledodev@users.noreply.github.com>
Co-authored-by: Matheus Benini Ferreira <88898100+MatheusBeniniF@users.noreply.github.com>
Co-authored-by: Matheus Muniz <87545749+matheusmuniz03@users.noreply.github.com>
Co-authored-by: Rafael <rafael.toledo@engenharia.ufjf.br>
Co-authored-by: gitstart <gitstart@gitstart.com>
Co-authored-by: niteshsingh1357 <niteshsingh1357@gmail.com>

Co-authored-by: gitstart <gitstart@users.noreply.github.com>
Co-authored-by: Nitesh Singh <nitesh.singh@gitstart.dev>
Co-authored-by: Thiago Nascimbeni <tnascimbeni@gmail.com>
Co-authored-by: Rafael Toledo <87545086+Toledodev@users.noreply.github.com>
Co-authored-by: Matheus Benini Ferreira <88898100+MatheusBeniniF@users.noreply.github.com>
Co-authored-by: Matheus Muniz <87545749+matheusmuniz03@users.noreply.github.com>
Co-authored-by: Rafael <rafael.toledo@engenharia.ufjf.br>
Co-authored-by: gitstart <gitstart@gitstart.com>
Co-authored-by: niteshsingh1357 <niteshsingh1357@gmail.com>
Co-authored-by: Peer Richelsen <peeroke@gmail.com>
pull/5838/head
GitStart 2022-12-02 18:08:12 +08:00 committed by GitHub
parent 19d00e691c
commit d8c1c103a1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 72 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

105
apps/web/pages/bookings/[status].tsx
View File

@ -17,6 +17,13 @@ import SkeletonLoader from "@components/booking/SkeletonLoader";
type BookingListingStatus = RouterInputs["viewer"]["bookings"]["get"]["status"]; type BookingListingStatus = RouterInputs["viewer"]["bookings"]["get"]["status"];
type BookingOutput = RouterOutputs["viewer"]["bookings"]["get"]["bookings"][0]; type BookingOutput = RouterOutputs["viewer"]["bookings"]["get"]["bookings"][0];
type RecurringInfo = {
recurringEventId: string | null;
count: number;
firstDate: Date | null;
bookings: { [key: string]: Date[] };
};
const validStatuses = ["upcoming", "recurring", "past", "cancelled", "unconfirmed"] as const; const validStatuses = ["upcoming", "recurring", "past", "cancelled", "unconfirmed"] as const;
const descriptionByStatus: Record<BookingListingStatus, string> = { const descriptionByStatus: Record<BookingListingStatus, string> = {
@ -73,6 +80,18 @@ export default function Bookings() {
return true; return true;
}; };
let recurringInfoToday: RecurringInfo | undefined;
const bookingsToday =
query.data?.pages.map((page) =>
page.bookings.filter((booking: BookingOutput) => {
recurringInfoToday = page.recurringInfo.find(
(info) => info.recurringEventId === booking.recurringEventId
);
return new Date(booking.startTime).toDateString() === new Date().toDateString();
})
)[0] || [];
const [animationParentRef] = useAutoAnimate<HTMLDivElement>(); const [animationParentRef] = useAutoAnimate<HTMLDivElement>();
return ( return (
@ -83,45 +102,65 @@ export default function Bookings() {
)} )}
{(query.status === "loading" || query.isPaused) && <SkeletonLoader />} {(query.status === "loading" || query.isPaused) && <SkeletonLoader />}
{query.status === "success" && !isEmpty && ( {query.status === "success" && !isEmpty && (
<div className="pt-2 xl:pt-0"> <>
<WipeMyCalActionButton bookingStatus={status} bookingsEmpty={isEmpty} /> {!!bookingsToday.length && status === "upcoming" && (
{/* TODO: add today only for the current day <div className="mb-6 pt-2 xl:pt-0">
<p className="pb-3 text-xs font-medium leading-4 text-gray-500 uppercase">{t("today")}</p> <WipeMyCalActionButton bookingStatus={status} bookingsEmpty={isEmpty} />
*/} <p className="mb-2 text-xs font-medium uppercase leading-4 text-gray-500">{t("today")}</p>
<div className="overflow-hidden rounded-md border border-gray-200">
<div className="overflow-hidden rounded-md border border-gray-200"> <table className="w-full max-w-full table-fixed">
<table className="w-full max-w-full table-fixed"> <tbody className="divide-y divide-gray-200 bg-white">
<tbody className="divide-y divide-gray-200 bg-white" data-testid="bookings"> <Fragment>
{query.data.pages.map((page, index) => ( {bookingsToday.map((booking: BookingOutput) => (
<Fragment key={index}>
{page.bookings.filter(filterBookings).map((booking: BookingOutput) => {
const recurringInfo = page.recurringInfo.find(
(info) => info.recurringEventId === booking.recurringEventId
);
return (
<BookingListItem <BookingListItem
key={booking.id} key={booking.id}
listingStatus={status} listingStatus={status}
recurringInfo={recurringInfo} recurringInfo={recurringInfoToday}
{...booking} {...booking}
/> />
); ))}
})} </Fragment>
</Fragment> </tbody>
))} </table>
</tbody> </div>
</table> </div>
)}
<div className="pt-2 xl:pt-0">
<p className="mb-2 text-xs font-medium uppercase leading-4 text-gray-500">{t("all")}</p>
<div className="overflow-hidden rounded-md border border-gray-200">
<table className="w-full max-w-full table-fixed">
<tbody className="divide-y divide-gray-200 bg-white" data-testid="bookings">
{query.data.pages.map((page, index) => (
<Fragment key={index}>
{page.bookings.filter(filterBookings).map((booking: BookingOutput) => {
const recurringInfo = page.recurringInfo.find(
(info) => info.recurringEventId === booking.recurringEventId
);
return (
<BookingListItem
key={booking.id}
listingStatus={status}
recurringInfo={recurringInfo}
{...booking}
/>
);
})}
</Fragment>
))}
</tbody>
</table>
</div>
<div className="p-4 text-center" ref={buttonInView.ref}>
<Button
color="minimal"
loading={query.isFetchingNextPage}
disabled={!query.hasNextPage}
onClick={() => query.fetchNextPage()}>
{query.hasNextPage ? t("load_more_results") : t("no_more_results")}
</Button>
</div>
</div> </div>
<div className="p-4 text-center" ref={buttonInView.ref}> </>
<Button
color="minimal"
loading={query.isFetchingNextPage}
disabled={!query.hasNextPage}
onClick={() => query.fetchNextPage()}>
{query.hasNextPage ? t("load_more_results") : t("no_more_results")}
</Button>
</div>
</div>
)} )}
{query.status === "success" && isEmpty && ( {query.status === "success" && isEmpty && (
<div className="flex items-center justify-center pt-2 xl:mx-6 xl:pt-0"> <div className="flex items-center justify-center pt-2 xl:mx-6 xl:pt-0">