95 lines
No EOL
2.5 KiB
JavaScript
95 lines
No EOL
2.5 KiB
JavaScript
import { useState, useEffect, useMemo } from 'react';
|
|
import { useParams, useNavigate, Link } from 'react-router-dom';
|
|
import { formatDate } from '../utils/dateFormatter';
|
|
import { useTrip } from '../hooks/useTrip';
|
|
import PlannablesList from './plannables/PlannablesList';
|
|
import './TripDetail.css';
|
|
|
|
const TripDetail = () => {
|
|
const { id } = useParams();
|
|
const navigate = useNavigate();
|
|
const [trip, setTrip] = useState(null);
|
|
const { fetchTrip, loading, error } = useTrip();
|
|
|
|
useEffect(() => {
|
|
const loadTrip = async () => {
|
|
try {
|
|
const tripData = await fetchTrip(id);
|
|
setTrip(tripData);
|
|
} catch (err) {
|
|
console.error('Error loading trip:', err);
|
|
}
|
|
};
|
|
|
|
loadTrip();
|
|
}, [id, fetchTrip]);
|
|
|
|
// Memoize trip dates display to prevent unnecessary re-renders
|
|
const tripDatesDisplay = useMemo(() => {
|
|
if (!trip) return null;
|
|
|
|
return (
|
|
<div className="trip-dates">
|
|
<span className="date-label">Start:</span>
|
|
<span className="date-value">{formatDate(trip.start_date)}</span>
|
|
<span className="date-separator">•</span>
|
|
<span className="date-label">End:</span>
|
|
<span className="date-value">{formatDate(trip.end_date)}</span>
|
|
</div>
|
|
);
|
|
}, [trip]);
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="trip-detail-loading">
|
|
<div className="spinner"></div>
|
|
<p>Loading trip details...</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (error) {
|
|
return (
|
|
<div className="trip-detail-error">
|
|
<h2>Error</h2>
|
|
<p>{error}</p>
|
|
<Link to="/" className="btn-back">Back to Dashboard</Link>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (!trip) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className="trip-detail">
|
|
<header className="trip-detail-header">
|
|
<div className="header-nav">
|
|
<Link to="/" className="btn-back">← Back to Dashboard</Link>
|
|
</div>
|
|
<div className="header-content">
|
|
<h1>{trip.name}</h1>
|
|
{trip.description && (
|
|
<p className="trip-description">{trip.description}</p>
|
|
)}
|
|
{tripDatesDisplay}
|
|
</div>
|
|
</header>
|
|
|
|
<div className="trip-detail-content">
|
|
<div className="trip-detail-sidebar">
|
|
<PlannablesList tripId={trip.id} />
|
|
</div>
|
|
<div className="trip-detail-main">
|
|
<div className="calendar-placeholder">
|
|
<h2>Calendar View</h2>
|
|
<p>Calendar view will be implemented here in the future</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default TripDetail; |