From a57c51d6760e55729c30d1f6b6fa6c4235b0d1b0 Mon Sep 17 00:00:00 2001
From: Anton Tranelis <mail@antontranelis.de>
Date: Wed, 31 Jul 2024 18:32:24 +0200
Subject: [PATCH] animate select position

---
 .../Map/Subcomponents/SelectPosition.tsx      | 16 +++++++++
 src/Components/Map/UtopiaMap.tsx              | 35 ++++++++-----------
 2 files changed, 30 insertions(+), 21 deletions(-)
 create mode 100644 src/Components/Map/Subcomponents/SelectPosition.tsx

diff --git a/src/Components/Map/Subcomponents/SelectPosition.tsx b/src/Components/Map/Subcomponents/SelectPosition.tsx
new file mode 100644
index 00000000..a3144606
--- /dev/null
+++ b/src/Components/Map/Subcomponents/SelectPosition.tsx
@@ -0,0 +1,16 @@
+
+export const SelectPosition = ({  setSelectNewItemPosition }: { setSelectNewItemPosition }) => {
+    return (
+        <div className="tw-animate-pulseGrow tw-button tw-z-1000 tw-absolute tw-right-5 tw-top-4 tw-drop-shadow-md">
+            <label className="tw-btn tw-btn-sm tw-rounded-2xl tw-btn-circle tw-btn-ghost hover:tw-bg-transparent tw-absolute tw-right-0 tw-top-0 tw-text-gray-600" onClick={() => {
+                setSelectNewItemPosition(null)
+            }}>
+                <p className='tw-text-center '>✕</p></label>
+            <div className="tw-alert tw-bg-base-100 tw-text-base-content">
+                <div>
+                    <span className="tw-text-lg">Select position on the map!</span>
+                </div>
+            </div>
+        </div>
+    )
+}
diff --git a/src/Components/Map/UtopiaMap.tsx b/src/Components/Map/UtopiaMap.tsx
index 16a7f3eb..f3be3e10 100644
--- a/src/Components/Map/UtopiaMap.tsx
+++ b/src/Components/Map/UtopiaMap.tsx
@@ -13,13 +13,14 @@ import { SearchControl } from "./Subcomponents/Controls/SearchControl";
 import { Control } from "./Subcomponents/Controls/Control";
 import { Outlet, useLocation, useNavigate } from "react-router-dom";
 import { TagsControl } from "./Subcomponents/Controls/TagsControl";
-import { useSelectPosition, useSetMapClicked,useSetSelectPosition } from "./hooks/useSelectPosition";
+import { useSelectPosition, useSetMapClicked, useSetSelectPosition } from "./hooks/useSelectPosition";
 import { useClusterRef, useSetClusterRef } from "./hooks/useClusterRef";
 import { Feature, Geometry as GeoJSONGeometry } from 'geojson';
-import {FilterControl} from "./Subcomponents/Controls/FilterControl";
-import {LayerControl} from "./Subcomponents/Controls/LayerControl";
+import { FilterControl } from "./Subcomponents/Controls/FilterControl";
+import { LayerControl } from "./Subcomponents/Controls/LayerControl";
 import { useLayers } from "./hooks/useLayers";
 import { useAddVisibleLayer } from "./hooks/useFilter";
+import { SelectPosition } from "./Subcomponents/SelectPosition";
 
 // for refreshing map on resize (needs to be implemented)
 const mapDivRef = React.createRef();
@@ -31,9 +32,9 @@ function UtopiaMap({
     zoom = 10,
     children,
     geo,
-    showFilterControl=false,
+    showFilterControl = false,
     showLayerControl = true
- }
+}
     : UtopiaMapProps) {
 
     function MapEventListener() {
@@ -51,7 +52,9 @@ function UtopiaMap({
 
     const resetMetaTags = () => {
         let params = new URLSearchParams(window.location.search);
-        window.history.pushState({}, "", `/` + `${params.toString() !== "" ? `?${params}` : ""}`)
+        if (!location.pathname.includes("/item/")) {
+            window.history.pushState({}, "", `/` + `${params.toString() !== "" ? `?${params}` : ""}`)
+        }
         document.title = document.title.split("-")[0];
         document.querySelector('meta[property="og:title"]')?.setAttribute("content", document.title);
         document.querySelector('meta[property="og:description"]')?.setAttribute("content", `${document.querySelector('meta[name="description"]')?.getAttribute("content")}`);
@@ -82,9 +85,9 @@ function UtopiaMap({
 
     useEffect(() => {
         layers.map(l => addVisibleLayer(l))
-        
+
     }, [layers])
-    
+
 
 
 
@@ -107,7 +110,7 @@ function UtopiaMap({
                         {/*{!embedded && (*/}
                         {/*    <QuestControl></QuestControl>*/}
                         {/*)}*/}
-                        {showFilterControl && <FilterControl/>}
+                        {showFilterControl && <FilterControl />}
                         {/*todo: needed layer handling is located LayerControl*/}
                         {showLayerControl && <LayerControl></LayerControl>}
                     </Control>
@@ -131,19 +134,9 @@ function UtopiaMap({
                     }} />}
                     <MapEventListener />
                 </MapContainer>
-                    <AddButton triggerAction={setSelectNewItemPosition}></AddButton>
+                <AddButton triggerAction={setSelectNewItemPosition}></AddButton>
                 {selectNewItemPosition != null &&
-                    <div className="tw-button tw-z-1000 tw-absolute tw-right-5 tw-top-4 tw-drop-shadow-md">
-                        <label className="tw-btn tw-btn-sm tw-rounded-2xl tw-btn-circle tw-btn-ghost hover:tw-bg-transparent tw-absolute tw-right-0 tw-top-0 tw-text-gray-600" onClick={() => {
-                            setSelectNewItemPosition(null)
-                        }}>
-                            <p className='tw-text-center '>✕</p></label>
-                        <div className="tw-alert tw-bg-base-100 tw-text-base-content">
-                            <div>
-                                <span>Select {selectNewItemPosition.name} position!</span>
-                            </div>
-                        </div>
-                    </div>
+                    <SelectPosition setSelectNewItemPosition={setSelectNewItemPosition} />
                 }
             </div>