viktor/wrongmove
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Format available_from dates as human-readable on listing cards

Browse source 
Display dates like "22 Jun 2025" instead of raw ISO timestamps.
This commit is contained in:
Viktor Barzin 2026-02-21 18:02:14 +00:00
parent 578b97b0c5
commit a153f64af4
No known key found for this signature in database
GPG key ID: 0EB088298288D958
2 changed files with 14 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

8
frontend/src/components/ListingDetail.tsx
View file

@ -3,6 +3,12 @@ import { Button } from './ui/button';
import { PhotoCarousel } from './PhotoCarousel'; import { PhotoCarousel } from './PhotoCarousel';
import type { ListingDetailData, DecisionType, POIDistanceInfo } from '@/types'; import type { ListingDetailData, DecisionType, POIDistanceInfo } from '@/types';
function formatDate(value: string): string {
const date = new Date(value);
if (isNaN(date.getTime())) return value;
return date.toLocaleDateString('en-GB', { day: 'numeric', month: 'short', year: 'numeric' });
}
interface ListingDetailProps { interface ListingDetailProps {
detail: ListingDetailData; detail: ListingDetailData;
onDecide: (decision: DecisionType) => void; onDecide: (decision: DecisionType) => void;
@ -139,7 +145,7 @@ export function ListingDetail({ detail, onDecide, onClearDecision }: ListingDeta
{detail.available_from && ( {detail.available_from && (
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Clock className="h-4 w-4 text-muted-foreground" /> <Clock className="h-4 w-4 text-muted-foreground" />
<span>Available {detail.available_from}</span> <span>Available {formatDate(detail.available_from)}</span>
</div> </div>
)} )}
{detail.service_charge != null && ( {detail.service_charge != null && (

8
frontend/src/components/PropertyCard.tsx
View file

@ -2,6 +2,12 @@ import { ExternalLink, Bed, Maximize2, PoundSterling, Clock, Building, Footprint
import { Button } from './ui/button'; import { Button } from './ui/button';
import type { PropertyProperties, POIDistanceInfo, POI } from '@/types'; import type { PropertyProperties, POIDistanceInfo, POI } from '@/types';
function formatDate(value: string): string {
const date = new Date(value);
if (isNaN(date.getTime())) return value;
return date.toLocaleDateString('en-GB', { day: 'numeric', month: 'short', year: 'numeric' });
}
function formatDuration(seconds: number): string { function formatDuration(seconds: number): string {
const minutes = Math.round(seconds / 60); const minutes = Math.round(seconds / 60);
if (minutes < 60) return `${minutes}m`; if (minutes < 60) return `${minutes}m`;
@ -231,7 +237,7 @@ export function PropertyCard({
{property.listing_type !== 'BUY' && property.available_from && ( {property.listing_type !== 'BUY' && property.available_from && (
<div className="flex items-center gap-2 text-sm"> <div className="flex items-center gap-2 text-sm">
<Clock className="h-4 w-4 text-muted-foreground" /> <Clock className="h-4 w-4 text-muted-foreground" />
<span>Available <strong>{property.available_from}</strong></span> <span>Available <strong>{formatDate(property.available_from)}</strong></span>
</div> </div>
)} )}
{property.listing_type === 'BUY' && ( {property.listing_type === 'BUY' && (