fix: sửa lỗi hiển thị trên browser của điện thoại
This commit is contained in:
@@ -329,6 +329,15 @@ const MapContextMenu = ({ onAction }: { onAction: (action: string, latlng: L.Lat
|
||||
);
|
||||
};
|
||||
|
||||
const getMostLikedPhoto = (photos: any[]) => {
|
||||
if (!photos || photos.length === 0) return null;
|
||||
return [...photos].sort((a, b) => {
|
||||
const likesA = a.metadata?.likedUserIds?.length || 0;
|
||||
const likesB = b.metadata?.likedUserIds?.length || 0;
|
||||
return likesB - likesA;
|
||||
})[0];
|
||||
};
|
||||
|
||||
export const TourDetailPage = ({
|
||||
onBack,
|
||||
tourId,
|
||||
@@ -682,9 +691,9 @@ export const TourDetailPage = ({
|
||||
// Effect to set initial selected photo for display or reset if current one is no longer in filtered list
|
||||
useEffect(() => {
|
||||
if (filteredPhotos.length > 0 && !selectedPhotoForDisplay) {
|
||||
setSelectedPhotoForDisplay(filteredPhotos[0]);
|
||||
setSelectedPhotoForDisplay(getMostLikedPhoto(filteredPhotos));
|
||||
} else if (selectedPhotoForDisplay && !filteredPhotos.some(p => p.id === selectedPhotoForDisplay.id)) {
|
||||
setSelectedPhotoForDisplay(filteredPhotos.length > 0 ? filteredPhotos[0] : null);
|
||||
setSelectedPhotoForDisplay(filteredPhotos.length > 0 ? getMostLikedPhoto(filteredPhotos) : null);
|
||||
}
|
||||
}, [filteredPhotos, selectedPhotoForDisplay]);
|
||||
const [isCommentModalOpen, setIsCommentModalOpen] = useState(false);
|
||||
@@ -835,7 +844,7 @@ export const TourDetailPage = ({
|
||||
if (currentTour && currentTour.photos && currentTour.photos.length > 0) {
|
||||
// If there are photos, and no leg is selected, default to 'all' and first photo
|
||||
if (selectedLegIdForPhoto === 'all' && !selectedPhotoForDisplay) {
|
||||
setSelectedPhotoForDisplay(currentTour.photos[0]);
|
||||
setSelectedPhotoForDisplay(getMostLikedPhoto(currentTour.photos));
|
||||
} else if (selectedLegIdForPhoto !== 'all') {
|
||||
// If a specific leg is selected, try to find a photo for that leg
|
||||
const targetLeg = legs.find(l => l.id === selectedLegIdForPhoto);
|
||||
@@ -843,9 +852,9 @@ export const TourDetailPage = ({
|
||||
const locationIdsInLeg = targetLeg.locations.map((loc: any) => loc.id);
|
||||
const photosInLeg = currentTour.photos.filter((p: any) => p.locationId && locationIdsInLeg.includes(p.locationId));
|
||||
if (photosInLeg.length > 0 && !selectedPhotoForDisplay) {
|
||||
setSelectedPhotoForDisplay(photosInLeg[0]);
|
||||
setSelectedPhotoForDisplay(getMostLikedPhoto(photosInLeg));
|
||||
} else if (selectedPhotoForDisplay && !photosInLeg.some(p => p.id === selectedPhotoForDisplay.id)) {
|
||||
setSelectedPhotoForDisplay(photosInLeg.length > 0 ? photosInLeg[0] : null);
|
||||
setSelectedPhotoForDisplay(photosInLeg.length > 0 ? getMostLikedPhoto(photosInLeg) : null);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1345,7 +1354,7 @@ export const TourDetailPage = ({
|
||||
date: tourDateDisplay,
|
||||
membersCount: currentTour?.participants?.length || 0,
|
||||
budget: currentTour?.totalCost ? `${Number(currentTour.totalCost).toLocaleString()} VND` : "0 VND",
|
||||
coverImage: currentTour?.photos?.[0]?.imageUrl || "https://images.unsplash.com/photo-1476514525535-07fb3b4ae5f1?q=80&w=2070&auto=format&fit=crop"
|
||||
coverImage: getMostLikedPhoto(currentTour?.photos || [])?.imageUrl || "https://images.unsplash.com/photo-1476514525535-07fb3b4ae5f1?q=80&w=2070&auto=format&fit=crop"
|
||||
};
|
||||
|
||||
return (
|
||||
|
||||
Reference in New Issue
Block a user