Climbing: Open selected photo from climbing area

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) {

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);

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 (
     <Container>
       {routes.length !== 0 && <RouteListDndContent isEditable={isEditable} />}

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 = ({
   </HeadingRow>
 );
 
-const Gallery = ({ images }) => {
+const Gallery = ({ images, feature }) => {
   return (
     <Wrapper>
       <Slider>
         {naturalSort(images, (item) => item.def.k).map((item) => (
-          <Image key={item.image.imageUrl} def={item.def} image={item.image} />
+          <Image
+            key={item.image.imageUrl}
+            def={item.def}
+            image={item.image}
+            onClick={handleClimbingDialogOnClick(feature, item.def)}
+          />
         ))}
       </Slider>
     </Wrapper>
@@ -143,7 +149,7 @@ const CragItem = ({ feature }: { feature: Feature }) => {
           routesCount={feature.members?.length}
           imagesCount={images.length}
         />
-        {images.length ? <Gallery images={images} /> : null}
+        {images.length ? <Gallery feature={feature} images={images} /> : null}
       </Container>
     </StyledLink>
   );

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 <Wrapper>{loading ? <ImageSkeleton /> : <NoImage />}</Wrapper>;
   }
@@ -40,7 +43,12 @@ export const FeatureImages = () => {
     <Wrapper>
       <Slider>
         {naturalSort(images, (item) => item.def.k).map((item) => (
-          <Image key={item.image.imageUrl} def={item.def} image={item.image} />
+          <Image
+            key={item.image.imageUrl}
+            def={item.def}
+            image={item.image}
+            onClick={handleClimbingDialogOnClick(feature, item.def)}
+          />
         ))}
       </Slider>
     </Wrapper>

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 (
-    <ImageWrapper $hasPaths={hasPaths} onClick={onClick}>
+    <ImageWrapper
+      $hasPaths={hasPaths}
+      onClick={(e) => {
+        onClick(def);
+        e.stopPropagation();
+        e.preventDefault();
+      }}
+    >
       {image.panoramaUrl ? (
         <PanoramaImg small={image.imageUrl} large={image.panoramaUrl} />
       ) : (

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}`);
     };
   }