From 98b5311dbf6c2e4c8b36f1e196bf878e2c1122ac Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20V=C3=A1clav=C3=ADk?= Date: Tue, 24 Dec 2024 21:24:54 +0100 Subject: [PATCH] Climbing: Open selected photo from climbing area --- .../FeaturePanel/Climbing/ClimbingView.tsx | 2 ++ .../Climbing/Editor/RoutesEditor.tsx | 4 ++++ .../Climbing/RouteList/RouteList.tsx | 1 + src/components/FeaturePanel/CragsInArea.tsx | 12 ++++++++--- .../FeatureImages/FeatureImages.tsx | 10 ++++++++- .../FeatureImages/Image/Image.tsx | 21 +++++++++++-------- .../FeatureImages/Image/helpers.tsx | 5 ++--- 7 files changed, 39 insertions(+), 16 deletions(-) diff --git a/src/components/FeaturePanel/Climbing/ClimbingView.tsx b/src/components/FeaturePanel/Climbing/ClimbingView.tsx index 399726835..23cb81e5a 100644 --- a/src/components/FeaturePanel/Climbing/ClimbingView.tsx +++ b/src/components/FeaturePanel/Climbing/ClimbingView.tsx @@ -384,6 +384,8 @@ export const ClimbingView = ({ photo }: { photo?: string }) => { Object.keys(resolutions).filter((key) => resolutions[key] === true).length > 0; + console.log('___// loadedPhotos', loadedPhotos); + const replacePhotoIfNeeded = (photos: string[], selectedIndex: number) => { if (!photos.includes(photoPath) && selectedIndex > -1 && !isPhotoLoading) { if (photos.length > 0) { diff --git a/src/components/FeaturePanel/Climbing/Editor/RoutesEditor.tsx b/src/components/FeaturePanel/Climbing/Editor/RoutesEditor.tsx index 158a22e6d..2f68176d9 100644 --- a/src/components/FeaturePanel/Climbing/Editor/RoutesEditor.tsx +++ b/src/components/FeaturePanel/Climbing/Editor/RoutesEditor.tsx @@ -155,6 +155,10 @@ export const RoutesEditor = ({ ...loadedPhotos, [photoPath]: { ...loadedPhotos[photoPath], [photoResolution]: true }, }); + console.log('___ setLoadedPhotos', { + ...loadedPhotos, + [photoPath]: { ...loadedPhotos[photoPath], [photoResolution]: true }, + }); loadPhotoRelatedData(); preloadOtherPhotos(); setIsPhotoLoading(false); diff --git a/src/components/FeaturePanel/Climbing/RouteList/RouteList.tsx b/src/components/FeaturePanel/Climbing/RouteList/RouteList.tsx index bc54a36d3..94d21e107 100644 --- a/src/components/FeaturePanel/Climbing/RouteList/RouteList.tsx +++ b/src/components/FeaturePanel/Climbing/RouteList/RouteList.tsx @@ -44,6 +44,7 @@ export const RouteList = ({ isEditable }: { isEditable?: boolean }) => { }; }, [routeSelectedIndex, routes, routeIndexExpanded]); // eslint-disable-line react-hooks/exhaustive-deps + console.log('___routes', routes); return ( {routes.length !== 0 && } diff --git a/src/components/FeaturePanel/CragsInArea.tsx b/src/components/FeaturePanel/CragsInArea.tsx index b2d54b7c7..416ff02d7 100644 --- a/src/components/FeaturePanel/CragsInArea.tsx +++ b/src/components/FeaturePanel/CragsInArea.tsx @@ -15,6 +15,7 @@ import { getInstantImage } from '../../services/images/getImageDefs'; import { intl } from '../../services/intl'; import Link from 'next/link'; import { naturalSort } from './Climbing/utils/array'; +import { handleClimbingDialogOnClick } from './FeatureImages/Image/helpers'; const ArrowIcon = styled(ArrowForwardIosIcon)` opacity: 0.2; @@ -101,12 +102,17 @@ const Header = ({ ); -const Gallery = ({ images }) => { +const Gallery = ({ images, feature }) => { return ( {naturalSort(images, (item) => item.def.k).map((item) => ( - + ))} @@ -143,7 +149,7 @@ const CragItem = ({ feature }: { feature: Feature }) => { routesCount={feature.members?.length} imagesCount={images.length} /> - {images.length ? : null} + {images.length ? : null} ); diff --git a/src/components/FeaturePanel/FeatureImages/FeatureImages.tsx b/src/components/FeaturePanel/FeatureImages/FeatureImages.tsx index 9898c6922..e1dcb6992 100644 --- a/src/components/FeaturePanel/FeatureImages/FeatureImages.tsx +++ b/src/components/FeaturePanel/FeatureImages/FeatureImages.tsx @@ -6,6 +6,8 @@ import { useLoadImages } from './useLoadImages'; import { NoImage } from './NoImage'; import { HEIGHT, ImageSkeleton } from './helpers'; import { naturalSort } from '../Climbing/utils/array'; +import { handleClimbingDialogOnClick } from './Image/helpers'; +import { useFeatureContext } from '../../utils/FeatureContext'; export const Wrapper = styled.div` width: 100%; @@ -32,6 +34,7 @@ export const Slider = ({ children }) => ( export const FeatureImages = () => { const { loading, images } = useLoadImages(); + const { feature } = useFeatureContext(); if (images.length === 0) { return {loading ? : }; } @@ -40,7 +43,12 @@ export const FeatureImages = () => { {naturalSort(images, (item) => item.def.k).map((item) => ( - + ))} diff --git a/src/components/FeaturePanel/FeatureImages/Image/Image.tsx b/src/components/FeaturePanel/FeatureImages/Image/Image.tsx index 18e179447..a53990521 100644 --- a/src/components/FeaturePanel/FeatureImages/Image/Image.tsx +++ b/src/components/FeaturePanel/FeatureImages/Image/Image.tsx @@ -7,12 +7,7 @@ import { import { PathsSvg } from '../PathsSvg'; import { HEIGHT } from '../helpers'; -import { - initialSize, - UncertainCover, - useGetOnClick, - useImgSizeOnload, -} from './helpers'; +import { initialSize, UncertainCover, useImgSizeOnload } from './helpers'; import { PanoramaImg } from './PanoramaImg'; import { InfoButton } from './InfoButton'; import { ImageDef, isTag } from '../../../../services/types'; @@ -61,18 +56,26 @@ const ImageWrapper = styled.div<{ $hasPaths: boolean }>` type Props = { def: ImageDef; image: ImageType; + onClick: (def: ImageDef) => void; }; -export const Image = ({ def, image }: Props) => { +export const Image = ({ def, image, onClick }: Props) => { const { imgRef, size, onPhotoLoad } = useImgSizeOnload(); - const onClick = useGetOnClick(def); + const hasPaths = isTag(def) && !!(def.path?.length || def.memberPaths?.length); const isImageLoaded = size !== initialSize; const showInfo = image.panoramaUrl || isImageLoaded; return ( - + { + onClick(def); + e.stopPropagation(); + e.preventDefault(); + }} + > {image.panoramaUrl ? ( ) : ( diff --git a/src/components/FeaturePanel/FeatureImages/Image/helpers.tsx b/src/components/FeaturePanel/FeatureImages/Image/helpers.tsx index 2b6106dfa..d64ac4a7c 100644 --- a/src/components/FeaturePanel/FeatureImages/Image/helpers.tsx +++ b/src/components/FeaturePanel/FeatureImages/Image/helpers.tsx @@ -38,13 +38,12 @@ export const UncertainCover = styled.div` box-shadow: inset 0 0 100px rgba(255, 255, 255, 0.3); `; -export const useGetOnClick = (def: ImageDef) => { - const { feature } = useFeatureContext(); - +export const handleClimbingDialogOnClick = (feature, def: ImageDef) => { if (isTag(def) && feature.tags.climbing === 'crag') { return () => { const featureLink = getOsmappLink(feature); const photoLink = removeFilePrefix(def.v); + console.log('___', `${featureLink}/climbing/photo/${photoLink}`); Router.push(`${featureLink}/climbing/photo/${photoLink}`); }; }