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