diff --git a/web-components/src/components/organisms/PostFiles/PostFiles.Public.tsx b/web-components/src/components/organisms/PostFiles/PostFiles.Public.tsx index e1c17f0b67..a22b6d44c1 100644 --- a/web-components/src/components/organisms/PostFiles/PostFiles.Public.tsx +++ b/web-components/src/components/organisms/PostFiles/PostFiles.Public.tsx @@ -1,8 +1,9 @@ -import { lazy, Suspense, useMemo, useRef, useState } from 'react'; +import { lazy, Suspense, useCallback, useMemo, useRef, useState } from 'react'; import type { MapRef } from 'react-map-gl'; import { CircularProgress, useMediaQuery, useTheme } from '@mui/material'; import bbox from '@turf/bbox'; import { Point } from 'geojson'; +import { VideoIcon } from 'web-components/src/components/icons/VideoIcon'; import { cn } from '../../../utils/styles/cn'; import { AudioFileIcon } from '../../icons/AudioFileIcon'; @@ -96,6 +97,27 @@ const PostFilesPublic = ({ } }; + const handleMarkerClick = useCallback( + (geometry: Point, group: PostFile[]): void => { + const newSelectedUrl = group[0].url; + setSelectedLocation(geometry); + setSelectedUrl(newSelectedUrl); + + if (newSelectedUrl !== selectedUrl) { + setIsFilesWindowOpen(true); + } else { + if (isFilesWindowOpen) { + setSelectedUrl(undefined); + setSelectedLocation(undefined); + setIsFilesWindowOpen(false); + } else { + setIsFilesWindowOpen(true); + } + } + }, + [selectedUrl, isFilesWindowOpen], + ); + return (
}> @@ -139,16 +161,7 @@ const PostFilesPublic = ({ longitude={geometry.coordinates[0]} >
{ - setSelectedLocation(geometry); - // Set first file of group as selected - setSelectedUrl(group[0].url); - if (group[0].url !== selectedUrl) { - setIsFilesWindowOpen(true); - } else { - setIsFilesWindowOpen(current => !current); - } - }} + onClick={() => handleMarkerClick(geometry, group)} className={cn( 'transition duration-500 cursor-pointer flex items-center justify-center border border-solid rounded-[30px] h-30', selectedLocation === geometry @@ -176,7 +189,7 @@ const PostFilesPublic = ({ (isImage(mimeType) ? ( ) : isVideo(mimeType) ? ( - <> + ) : isAudio(mimeType) ? ( ) : isPdf(mimeType) ? (