Merge pull request #33 from rezahedi/places-popup

Solve Two Issues Related to Places Markers and Popups

Author: rezahedi

src/pages/ExplorePage/PlanPopup.tsx

@@ -7,7 +7,7 @@ const PlanPopup = ({ plan }: { plan: Plan }) => {
     <Link to={`/plans/${plan._id}`}>
       <div className="flex gap-1 sm:w-xs sm:h-32">
         <img
-          className="w-24 h-full object-cover rounded-sm hidden sm:block"
+          className="w-24 object-cover rounded-sm hidden sm:block"
           src={plan.images[0]}
           alt={plan.title}
         />

src/pages/ExplorePage/places/PlacesMarkers.tsx

@@ -12,14 +12,16 @@ const PlacesMarkers = function Markers() {
 
   const handleClick = useCallback(
     (placeId?: string, location?: [number, number]) => {
+      if (selection && placeId === selection.placeId) return;
       if (placeId) setSelection({ placeId, location, source: "marker" });
     },
-    [setSelection],
+    [selection, setSelection],
   );
 
   const handleMouseOver = useCallback(
     (placeId?: string, location?: [number, number]) => {
       if (placeId) {
+        if (selection && placeId === selection.placeId) return;
         if (mouseOverTimeoutRef.current)
           clearTimeout(mouseOverTimeoutRef.current);
         mouseOverTimeoutRef.current = window.setTimeout(
@@ -28,7 +30,7 @@ const PlacesMarkers = function Markers() {
         );
       }
     },
-    [setSelection],
+    [selection, setSelection],
   );
 
   const handleMouseOut = useCallback(

src/pages/ExplorePage/places/Popup.tsx

@@ -55,9 +55,9 @@ const Popup = () => {
   if (!place) return null;
 
   return (
-    <div className="flex gap-1 sm:w-xs sm:h-32">
+    <div className="flex gap-1 sm:w-xs">
       <img
-        className="w-24 h-full object-cover rounded-sm hidden sm:block"
+        className="w-24 object-cover rounded-sm hidden sm:block"
         src={place.imageURL}
         alt={place.name}
       />

src/pages/PlanPage/Markers.tsx

@@ -53,9 +53,9 @@ const Markers = ({ stops }: { stops: StopType[] }) => {
           position={selectedPlace.location}
           onClose={handlePopupClose}
         >
-          <div className="flex gap-1 sm:w-xs sm:h-32">
+          <div className="flex gap-1 sm:w-xs">
             <img
-              className="w-24 h-full object-cover rounded-sm hidden sm:block"
+              className="w-24 object-cover rounded-sm hidden sm:block"
               src={selectedPlace.imageURL}
               alt={selectedPlace.name}
             />

src/pages/dashboard/create/Markers.tsx

@@ -10,9 +10,10 @@ const Markers = memo(function Markers() {
 
   const handleClick = useCallback(
     (placeId?: string, location?: [number, number]) => {
+      if (selection && placeId === selection.placeId) return;
       if (placeId) setSelection({ placeId, location, source: "marker" });
     },
-    [setSelection],
+    [selection, setSelection],
   );
 
   const handlePopupClose = useCallback(() => {

src/pages/dashboard/create/PlacePopup.tsx

@@ -56,9 +56,9 @@ const PlacePopup = () => {
   if (!place) return null;
 
   return (
-    <div className="flex gap-1 sm:w-xs sm:h-32">
+    <div className="flex gap-1 sm:w-xs">
       <img
-        className="w-24 h-full object-cover rounded-sm hidden sm:block"
+        className="w-24 object-cover rounded-sm hidden sm:block"
         src={place.imageURL}
         alt={place.name}
       />