458a06a620
- Converted several async components to synchronous functions, including `Layout`, `AddOrdersPage`, `ProfilePage`, `SlotPage`, and `ServicePage`, enhancing rendering efficiency. - Removed unnecessary prefetching logic and hydration boundaries, simplifying component structure and improving maintainability. - Updated the `TelegramProvider` to return null during the initial mount instead of a loading message, streamlining the loading state handling. - Enhanced loading state management in order-related components by adding loading spinners and data not found alerts, improving user experience during data fetching.
35 lines
1.0 KiB
TypeScript
35 lines
1.0 KiB
TypeScript
'use client';
|
|
|
|
import { ReadonlyTimeRange } from '../shared/time-range';
|
|
import { type OrderComponentProps } from './types';
|
|
import { useOrderQuery } from '@/hooks/api/orders';
|
|
import { formatDate } from '@repo/utils/datetime-format';
|
|
|
|
export function OrderDateTime({ documentId }: Readonly<OrderComponentProps>) {
|
|
const { data: { order } = {}, isLoading } = useOrderQuery({ documentId });
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="flex animate-pulse flex-col space-y-1">
|
|
<div className="h-5 w-28 rounded bg-muted" />
|
|
<div className="h-9 w-48 rounded bg-muted" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (!order) return null;
|
|
|
|
return (
|
|
<div className="flex flex-col">
|
|
<span className="text-sm tracking-wide text-muted-foreground">
|
|
{order.slot?.datetime_start ? formatDate(order.slot.datetime_start).user() : ''}
|
|
</span>
|
|
<ReadonlyTimeRange
|
|
className="text-3xl"
|
|
datetimeEnd={order?.datetime_end}
|
|
datetimeStart={order?.datetime_start}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|