From 7675212efe2c5292db46e46641888e250d252f3c Mon Sep 17 00:00:00 2001 From: vaibhavdani007 Date: Wed, 5 Nov 2025 16:25:10 +0530 Subject: [PATCH] refactor: standardize import formatting and improve code readability in listing-information component --- .../listing-information.tsx | 666 +++++++++--------- 1 file changed, 333 insertions(+), 333 deletions(-) diff --git a/apps/ui-sharethrift/src/components/layouts/home/components/view-listing/listing-information/listing-information.tsx b/apps/ui-sharethrift/src/components/layouts/home/components/view-listing/listing-information/listing-information.tsx index ba472e4a6..8e63a7954 100644 --- a/apps/ui-sharethrift/src/components/layouts/home/components/view-listing/listing-information/listing-information.tsx +++ b/apps/ui-sharethrift/src/components/layouts/home/components/view-listing/listing-information/listing-information.tsx @@ -1,357 +1,357 @@ -import { Row, Col, DatePicker, Button } from 'antd'; -import dayjs from 'dayjs'; -import type { Dayjs } from 'dayjs'; +import { Row, Col, DatePicker, Button } from "antd"; +import dayjs from "dayjs"; +import type { Dayjs } from "dayjs"; import type { - ViewListingQueryActiveByListingIdQuery, - ItemListing, - ViewListingActiveReservationRequestForListingQuery, -} from '../../../../../../generated.tsx'; -import { LoadingOutlined } from '@ant-design/icons'; -import { useState } from 'react'; -import { useNavigate } from 'react-router-dom'; + ViewListingQueryActiveByListingIdQuery, + ItemListing, + ViewListingActiveReservationRequestForListingQuery, +} from "../../../../../../generated.tsx"; +import { LoadingOutlined } from "@ant-design/icons"; +import { useState } from "react"; +import { useNavigate } from "react-router-dom"; // Manual isBetween logic for Dayjs function isBetweenManual( - date: Dayjs, - start: Dayjs, - end: Dayjs, - unit: dayjs.OpUnitType = 'millisecond', - inclusive: '()' | '[]' | '[)' | '(]' = '()', + date: Dayjs, + start: Dayjs, + end: Dayjs, + unit: dayjs.OpUnitType = "millisecond", + inclusive: "()" | "[]" | "[)" | "(]" = "()" ): boolean { - const isAfterStart = inclusive.startsWith('[') - ? date.isSame(start, unit) || date.isAfter(start, unit) - : date.isAfter(start, unit); - const isBeforeEnd = inclusive.endsWith(']') - ? date.isSame(end, unit) || date.isBefore(end, unit) - : date.isBefore(end, unit); - return isAfterStart && isBeforeEnd; + const isAfterStart = inclusive.startsWith("[") + ? date.isSame(start, unit) || date.isAfter(start, unit) + : date.isAfter(start, unit); + const isBeforeEnd = inclusive.endsWith("]") + ? date.isSame(end, unit) || date.isBefore(end, unit) + : date.isBefore(end, unit); + return isAfterStart && isBeforeEnd; } export interface ListingInformationProps { - listing: ItemListing; - userIsSharer: boolean; - isAuthenticated: boolean; - userReservationRequest: - | ViewListingActiveReservationRequestForListingQuery['myActiveReservationForListing'] - | null; - onReserveClick?: () => void; - onLoginClick?: () => void; - onSignUpClick?: () => void; - onCancelClick?: () => void; - className?: string; - reservationDates?: { - startDate: Date | null; - endDate: Date | null; - }; - onReservationDatesChange?: (dates: { - startDate: Date | null; - endDate: Date | null; - }) => void; - reservationLoading?: boolean; - otherReservationsLoading?: boolean; - otherReservationsError?: Error; - otherReservations?: ViewListingQueryActiveByListingIdQuery['queryActiveByListingId']; + listing: ItemListing; + userIsSharer: boolean; + isAuthenticated: boolean; + userReservationRequest: + | ViewListingActiveReservationRequestForListingQuery["myActiveReservationForListing"] + | null; + onReserveClick?: () => void; + onLoginClick?: () => void; + onSignUpClick?: () => void; + onCancelClick?: () => void; + className?: string; + reservationDates?: { + startDate: Date | null; + endDate: Date | null; + }; + onReservationDatesChange?: (dates: { + startDate: Date | null; + endDate: Date | null; + }) => void; + reservationLoading?: boolean; + otherReservationsLoading?: boolean; + otherReservationsError?: Error; + otherReservations?: ViewListingQueryActiveByListingIdQuery["queryActiveByListingId"]; } export const ListingInformation: React.FC = ({ - listing, - onReserveClick, - onCancelClick, - className = '', - userIsSharer, - isAuthenticated, - userReservationRequest, - reservationDates, - onReservationDatesChange, - reservationLoading = false, - otherReservationsLoading = false, - otherReservationsError, - otherReservations, + listing, + onReserveClick, + onCancelClick, + className = "", + userIsSharer, + isAuthenticated, + userReservationRequest, + reservationDates, + onReservationDatesChange, + reservationLoading = false, + otherReservationsLoading = false, + otherReservationsError, + otherReservations, }) => { - const navigate = useNavigate(); - const [dateSelectionError, setDateSelectionError] = useState( - null, - ); + const navigate = useNavigate(); + const [dateSelectionError, setDateSelectionError] = useState( + null + ); - if (listing.state !== 'Published') { - return ( -
- -
- ); - } + if (listing.state !== "Published") { + return ( +
+ +
+ ); + } - // Check if dates are selected for enabling the Reserve button - const areDatesSelected = - reservationDates?.startDate && reservationDates?.endDate; + // Check if dates are selected for enabling the Reserve button + const areDatesSelected = + reservationDates?.startDate && reservationDates?.endDate; - console.log('is authenticated', isAuthenticated); - console.log( - 'user reservation request', - userReservationRequest?.reservationPeriodEnd, - ); + console.log("is authenticated", isAuthenticated); + console.log( + "user reservation request", + userReservationRequest?.reservationPeriodEnd + ); - const handleDateRangeChange = ( - dates: [Dayjs | null, Dayjs | null] | null, - ): void => { - if (!onReservationDatesChange) { - return; - } - if (!dates?.[0] || !dates?.[1]) { - onReservationDatesChange({ startDate: null, endDate: null }); - return; - } - const [start, end] = dates; - if (start.isBefore(dayjs().startOf('day'))) { - setDateSelectionError('Selected date range is before today.'); - onReservationDatesChange({ startDate: null, endDate: null }); - return; - } + const handleDateRangeChange = ( + dates: [Dayjs | null, Dayjs | null] | null + ): void => { + if (!onReservationDatesChange) { + return; + } + if (!dates?.[0] || !dates?.[1]) { + onReservationDatesChange({ startDate: null, endDate: null }); + return; + } + const [start, end] = dates; + if (start.isBefore(dayjs().startOf("day"))) { + setDateSelectionError("Selected date range is before today."); + onReservationDatesChange({ startDate: null, endDate: null }); + return; + } - const isRangeValid = (startDate: Dayjs, endDate: Dayjs): boolean => { - if (otherReservationsError || !otherReservations) { - return true; - } - let currentDate = startDate.clone(); - while ( - currentDate.isBefore(endDate, 'day') || - currentDate.isSame(endDate, 'day') - ) { - const isDisabled = otherReservations.some((otherRes) => { - const otherResStart = dayjs(Number(otherRes?.reservationPeriodStart)); - const otherResEnd = dayjs(Number(otherRes?.reservationPeriodEnd)); - return isBetweenManual( - currentDate, - otherResStart, - otherResEnd, - 'day', - '[]', - ); - }); - if (isDisabled) { - return false; - } - currentDate = currentDate.add(1, 'day'); - } - return true; - }; + const isRangeValid = (startDate: Dayjs, endDate: Dayjs): boolean => { + if (otherReservationsError || !otherReservations) { + return true; + } + let currentDate = startDate.clone(); + while ( + currentDate.isBefore(endDate, "day") || + currentDate.isSame(endDate, "day") + ) { + const isDisabled = otherReservations.some((otherRes) => { + const otherResStart = dayjs(Number(otherRes?.reservationPeriodStart)); + const otherResEnd = dayjs(Number(otherRes?.reservationPeriodEnd)); + return isBetweenManual( + currentDate, + otherResStart, + otherResEnd, + "day", + "[]" + ); + }); + if (isDisabled) { + return false; + } + currentDate = currentDate.add(1, "day"); + } + return true; + }; - if (!isRangeValid(start, end)) { - setDateSelectionError( - 'Selected date range overlaps with existing reservations.', - ); - return; - } + if (!isRangeValid(start, end)) { + setDateSelectionError( + "Selected date range overlaps with existing reservations." + ); + return; + } - setDateSelectionError(null); - onReservationDatesChange({ - startDate: start.toDate(), - endDate: end.toDate(), - }); - console.log('Selected dates:', dates); - }; + setDateSelectionError(null); + onReservationDatesChange({ + startDate: start.toDate(), + endDate: end.toDate(), + }); + console.log("Selected dates:", dates); + }; - const reservationRequestStatus = userReservationRequest?.state ?? null; - return ( - - - {/* Title at top, using title42 class */} -
{listing.title}
- - - {/* Location and Category */} - - -
- Located in -
-
- Category -
- - -
-

- {listing.location} -

-
-
-

- {listing.category} -

-
- - - - - {/* Description */} - - -
-

{listing.description}

-
- - - {/* Reservation Period Section - Only show if authenticated */} - - - {(() => { - if (otherReservationsLoading) { - return ( - - ); - } + const reservationRequestStatus = userReservationRequest?.state ?? null; + return ( + + + {/* Title at top, using title42 class */} +
{listing.title}
+ + + {/* Location and Category */} + + +
+ Located in +
+
+ Category +
+ + +
+

+ {listing.location} +

+
+
+

+ {listing.category} +

+
+ + + + + {/* Description */} + + +
+

{listing.description}

+
+ + + {/* Reservation Period Section - Only show if authenticated */} + + + {(() => { + if (otherReservationsLoading) { + return ( + + ); + } - if (!isAuthenticated) { - return null; - } + if (!isAuthenticated) { + return null; + } - return ( - <> -

Reservation Period

- { - // Disable dates that overlap with other active reservations - if (current.isBefore(dayjs().startOf('day'))) { - return true; - } - if (otherReservationsError || !otherReservations) { - return false; - } - return otherReservations.some((reservation) => { - const resStart = dayjs( - Number(reservation?.reservationPeriodStart), - ); - const resEnd = dayjs( - Number(reservation?.reservationPeriodEnd), - ); - return isBetweenManual( - current, - resStart, - resEnd, - 'day', - '[]', - ); - }); - }} - /> -
- {dateSelectionError} -
- - ); - })()} - - - - - {/* Reserve Button - Only show if authenticated */} - - - {(() => { - if (!userIsSharer && isAuthenticated) { - return ( - - ); - } + return ( + <> +

Reservation Period

+ { + // Disable dates that overlap with other active reservations + if (current.isBefore(dayjs().startOf("day"))) { + return true; + } + if (otherReservationsError || !otherReservations) { + return false; + } + return otherReservations.some((reservation) => { + const resStart = dayjs( + Number(reservation?.reservationPeriodStart) + ); + const resEnd = dayjs( + Number(reservation?.reservationPeriodEnd) + ); + return isBetweenManual( + current, + resStart, + resEnd, + "day", + "[]" + ); + }); + }} + /> +
+ {dateSelectionError} +
+ + ); + })()} + + + + + {/* Reserve Button - Only show if authenticated */} + + + {(() => { + if (!userIsSharer && isAuthenticated) { + return ( + + ); + } - if (!isAuthenticated) { - return ( - - ); - } + if (!isAuthenticated) { + return ( + + ); + } - return null; - })()} - - - - - ); + return null; + })()} + + + + + ); };