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

refactor: <BookingListItem/> to use <Link/> to navigate instead of r… (#11602) 

Co-authored-by: Peer Richelsen <peeroke@gmail.com>
pull/11628/head
Aldrin 2023-09-30 03:24:22 +05:30 committed by GitHub
parent e5b88bd0b0
commit 0bb99fc667
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 107 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
apps/web/components/booking/BookingListItem.tsx
View File

@ -1,4 +1,4 @@
import { useRouter } from "next/navigation"; import Link from "next/link";
import { useState } from "react"; import { useState } from "react";
import type { EventLocationType } from "@calcom/app-store/locations"; import type { EventLocationType } from "@calcom/app-store/locations";
@ -26,11 +26,11 @@ import {
DialogFooter, DialogFooter,
MeetingTimeInTimezones, MeetingTimeInTimezones,
showToast, showToast,
Tooltip,
TableActions, TableActions,
TextAreaField, TextAreaField,
Tooltip,
} from "@calcom/ui"; } from "@calcom/ui";
import { Check, Clock, MapPin, RefreshCcw, Send, Ban, X, CreditCard } from "@calcom/ui/components/icon"; import { Ban, Check, Clock, CreditCard, MapPin, RefreshCcw, Send, X } from "@calcom/ui/components/icon";
import useMeQuery from "@lib/hooks/useMeQuery"; import useMeQuery from "@lib/hooks/useMeQuery";
@ -58,7 +58,6 @@ function BookingListItem(booking: BookingItemProps) {
i18n: { language }, i18n: { language },
} = useLocale(); } = useLocale();
const utils = trpc.useContext(); const utils = trpc.useContext();
const router = useRouter();
const [rejectionReason, setRejectionReason] = useState<string>(""); const [rejectionReason, setRejectionReason] = useState<string>("");
const [rejectionDialogIsOpen, setRejectionDialogIsOpen] = useState(false); const [rejectionDialogIsOpen, setRejectionDialogIsOpen] = useState(false);
const [chargeCardDialogIsOpen, setChargeCardDialogIsOpen] = useState(false); const [chargeCardDialogIsOpen, setChargeCardDialogIsOpen] = useState(false);
@ -259,14 +258,16 @@ function BookingListItem(booking: BookingItemProps) {
.concat(booking.recurringInfo?.bookings[BookingStatus.PENDING]) .concat(booking.recurringInfo?.bookings[BookingStatus.PENDING])
.sort((date1: Date, date2: Date) => date1.getTime() - date2.getTime()); .sort((date1: Date, date2: Date) => date1.getTime() - date2.getTime());
const onClickTableData = () => { const buildBookingLink = () => {
const urlSearchParams = new URLSearchParams({ const urlSearchParams = new URLSearchParams({
allRemainingBookings: isTabRecurring.toString(), allRemainingBookings: isTabRecurring.toString(),
}); });
if (booking.attendees[0]) urlSearchParams.set("email", booking.attendees[0].email); if (booking.attendees[0]) urlSearchParams.set("email", booking.attendees[0].email);
router.push(`/booking/${booking.uid}?${urlSearchParams.toString()}`); return `/booking/${booking.uid}?${urlSearchParams.toString()}`;
}; };
const bookingLink = buildBookingLink();
const title = booking.title; const title = booking.title;
// To be used after we run query on legacy bookings // To be used after we run query on legacy bookings
// const showRecordingsButtons = booking.isRecorded && isPast && isConfirmed; // const showRecordingsButtons = booking.isRecorded && isPast && isConfirmed;
@ -337,9 +338,8 @@ function BookingListItem(booking: BookingItemProps) {
</Dialog> </Dialog>
<tr data-testid="booking-item" className="hover:bg-muted group flex flex-col sm:flex-row"> <tr data-testid="booking-item" className="hover:bg-muted group flex flex-col sm:flex-row">
<td <td className="hidden align-top ltr:pl-6 rtl:pr-6 sm:table-cell sm:min-w-[12rem]">
className="hidden align-top ltr:pl-6 rtl:pr-6 sm:table-cell sm:min-w-[12rem]" <Link href={bookingLink}>
onClick={onClickTableData}>
<div className="cursor-pointer py-4"> <div className="cursor-pointer py-4">
<div className="text-emphasis text-sm leading-6">{startTime}</div> <div className="text-emphasis text-sm leading-6">{startTime}</div>
<div className="text-subtle text-sm"> <div className="text-subtle text-sm">
@ -378,8 +378,10 @@ function BookingListItem(booking: BookingItemProps) {
</div> </div>
)} )}
</div> </div>
</Link>
</td> </td>
<td className={"w-full px-4" + (isRejected ? " line-through" : "")} onClick={onClickTableData}> <td className={"w-full px-4" + (isRejected ? " line-through" : "")}>
<Link href={bookingLink}>
{/* Time and Badges for mobile */} {/* Time and Badges for mobile */}
<div className="w-full pb-2 pt-4 sm:hidden"> <div className="w-full pb-2 pt-4 sm:hidden">
<div className="flex w-full items-center justify-between sm:hidden"> <div className="flex w-full items-center justify-between sm:hidden">
@ -455,6 +457,7 @@ function BookingListItem(booking: BookingItemProps) {
</div> </div>
)} )}
</div> </div>
</Link>
</td> </td>
<td className="flex w-full justify-end py-4 pl-4 text-right text-sm font-medium ltr:pr-4 rtl:pl-4 sm:pl-0"> <td className="flex w-full justify-end py-4 pl-4 text-right text-sm font-medium ltr:pr-4 rtl:pl-4 sm:pl-0">
{isUpcoming && !isCancelled ? ( {isUpcoming && !isCancelled ? (