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

chore: improvements

pull/12060/head
Udit Takkar 2023-10-27 19:59:22 +05:30
parent cde7b60b98
commit e1c68fd616
2 changed files with 32 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -45,14 +45,18 @@ type BookingItem = RouterOutputs["viewer"]["bookings"]["get"]["bookings"][number
type BookingItemProps = BookingItem & { type BookingItemProps = BookingItem & {
listingStatus: BookingListingStatus; listingStatus: BookingListingStatus;
recurringInfo: RouterOutputs["viewer"]["bookings"]["get"]["recurringInfo"][number] | undefined; recurringInfo: RouterOutputs["viewer"]["bookings"]["get"]["recurringInfo"][number] | undefined;
loggedInUser: {
userId: number | undefined;
userTimeZone: string | undefined;
userTimeFormat: number | null | undefined;
userEmail: string | undefined;
};
}; };
function BookingListItem(booking: BookingItemProps) { function BookingListItem(booking: BookingItemProps) {
// Get user so we can determine 12/24 hour format preferences
const query = useMeQuery();
const bookerUrl = useBookerUrl(); const bookerUrl = useBookerUrl();
const { userId, userTimeZone, userTimeFormat, userEmail } = booking.loggedInUser;
const user = query.data;
const { const {
t, t,
i18n: { language }, i18n: { language },
@ -226,7 +230,7 @@ function BookingListItem(booking: BookingItemProps) {
}; };
const startTime = dayjs(booking.startTime) const startTime = dayjs(booking.startTime)
.tz(user?.timeZone) .tz(userTimeZone)
.locale(language) .locale(language)
.format(isUpcoming ? "ddd, D MMM" : "D MMMM YYYY"); .format(isUpcoming ? "ddd, D MMM" : "D MMMM YYYY");
const [isOpenRescheduleDialog, setIsOpenRescheduleDialog] = useState(false); const [isOpenRescheduleDialog, setIsOpenRescheduleDialog] = useState(false);
@ -304,7 +308,7 @@ function BookingListItem(booking: BookingItemProps) {
booking={booking} booking={booking}
isOpenDialog={viewRecordingsDialogIsOpen} isOpenDialog={viewRecordingsDialogIsOpen}
setIsOpenDialog={setViewRecordingsDialogIsOpen} setIsOpenDialog={setViewRecordingsDialogIsOpen}
timeFormat={user?.timeFormat ?? null} timeFormat={userTimeFormat ?? null}
/> />
)} )}
{/* NOTE: Should refactor this dialog component as is being rendered multiple times */} {/* NOTE: Should refactor this dialog component as is being rendered multiple times */}
@ -344,11 +348,11 @@ function BookingListItem(booking: BookingItemProps) {
<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">
{formatTime(booking.startTime, user?.timeFormat, user?.timeZone)} -{" "} {formatTime(booking.startTime, userTimeFormat, userTimeZone)} -{" "}
{formatTime(booking.endTime, user?.timeFormat, user?.timeZone)} {formatTime(booking.endTime, userTimeFormat, userTimeZone)}
<MeetingTimeInTimezones <MeetingTimeInTimezones
timeFormat={user?.timeFormat} timeFormat={userTimeFormat}
userTimezone={user?.timeZone} userTimezone={userTimeZone}
startTime={booking.startTime} startTime={booking.startTime}
endTime={booking.endTime} endTime={booking.endTime}
attendees={booking.attendees} attendees={booking.attendees}
@ -388,11 +392,11 @@ function BookingListItem(booking: BookingItemProps) {
<div className="flex w-full items-center justify-between sm:hidden"> <div className="flex w-full items-center justify-between sm:hidden">
<div className="text-emphasis text-sm leading-6">{startTime}</div> <div className="text-emphasis text-sm leading-6">{startTime}</div>
<div className="text-subtle pr-2 text-sm"> <div className="text-subtle pr-2 text-sm">
{formatTime(booking.startTime, user?.timeFormat, user?.timeZone)} -{" "} {formatTime(booking.startTime, userTimeFormat, userTimeZone)} -{" "}
{formatTime(booking.endTime, user?.timeFormat, user?.timeZone)} {formatTime(booking.endTime, userTimeFormat, userTimeZone)}
<MeetingTimeInTimezones <MeetingTimeInTimezones
timeFormat={user?.timeFormat} timeFormat={userTimeFormat}
userTimezone={user?.timeZone} userTimezone={userTimeZone}
startTime={booking.startTime} startTime={booking.startTime}
endTime={booking.endTime} endTime={booking.endTime}
attendees={booking.attendees} attendees={booking.attendees}
@ -449,7 +453,7 @@ function BookingListItem(booking: BookingItemProps) {
<DisplayAttendees <DisplayAttendees
attendees={booking.attendees} attendees={booking.attendees}
user={booking.user} user={booking.user}
currentEmail={user?.email} currentEmail={userEmail}
/> />
)} )}
{isCancelled && booking.rescheduled && ( {isCancelled && booking.rescheduled && (
@ -463,7 +467,7 @@ function BookingListItem(booking: BookingItemProps) {
<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 ? (
<> <>
{isPending && user?.id === booking.user?.id && <TableActions actions={pendingActions} />} {isPending && userId === booking.user?.id && <TableActions actions={pendingActions} />}
{isConfirmed && <TableActions actions={bookedActions} />} {isConfirmed && <TableActions actions={bookedActions} />}
{isRejected && <div className="text-subtle text-sm">{t("rejected")}</div>} {isRejected && <div className="text-subtle text-sm">{t("rejected")}</div>}
</> </>
@ -526,7 +530,7 @@ const RecurringBookingsTooltip = ({ booking, recurringDates }: RecurringBookings
.includes(aDate.toDateString()); .includes(aDate.toDateString());
return ( return (
<p key={key} className={classNames(pastOrCancelled && "line-through")}> <p key={key} className={classNames(pastOrCancelled && "line-through")}>
{formatTime(aDate, user?.timeFormat, user?.timeZone)} {formatTime(aDate, userTimeFormat, userTimeZone)}
{" - "} {" - "}
{dayjs(aDate).locale(language).format("D MMMM YYYY")} {dayjs(aDate).locale(language).format("D MMMM YYYY")}
</p> </p>

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

@ -176,6 +176,12 @@ export default function Bookings() {
{bookingsToday.map((booking: BookingOutput) => ( {bookingsToday.map((booking: BookingOutput) => (
<BookingListItem <BookingListItem
key={booking.id} key={booking.id}
loggedInUser={{
userId: user?.id,
userTimeZone: user?.timeZone,
userTimeFormat: user?.timeFormat,
userEmail: user?.email,
}}
listingStatus={status} listingStatus={status}
recurringInfo={recurringInfoToday} recurringInfo={recurringInfoToday}
{...booking} {...booking}
@ -200,6 +206,12 @@ export default function Bookings() {
return ( return (
<BookingListItem <BookingListItem
key={booking.id} key={booking.id}
loggedInUser={{
userId: user?.id,
userTimeZone: user?.timeZone,
userTimeFormat: user?.timeFormat,
userEmail: user?.email,
}}
listingStatus={status} listingStatus={status}
recurringInfo={recurringInfo} recurringInfo={recurringInfo}
{...booking} {...booking}