add select position to item menu on index page

src/Components/Map/Subcomponents/SelectPosition.tsx

@@ -1,5 +1,13 @@
-/* eslint-disable @typescript-eslint/no-unsafe-call */
+import type { Item } from '#types/Item'
-export const SelectPosition = ({ setSelectNewItemPosition }: { setSelectNewItemPosition }) => {
+import type { LayerProps } from '#types/LayerProps'
+
+export const SelectPosition = ({
+  setSelectNewItemPosition,
+  selectNewItemPosition,
+}: {
+  setSelectNewItemPosition: React.Dispatch<React.SetStateAction<Item | LayerProps | null>>
+  selectNewItemPosition?: Item | LayerProps | null
+}) => {
   return (
     <div className='tw:animate-pulseGrow tw:button tw:z-1000 tw:absolute tw:right-5 tw:top-4 tw:drop-shadow-md'>
       <label
@@ -12,7 +20,14 @@ export const SelectPosition = ({ setSelectNewItemPosition }: { setSelectNewItemP
       </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>
+          {selectNewItemPosition && 'text' in selectNewItemPosition && (
+            <span className='tw:text-lg'>
+              Select new position of <b>{selectNewItemPosition.name}</b> on the map!
+            </span>
+          )}
+          {selectNewItemPosition && 'menuIcon' in selectNewItemPosition && (
+            <span className='tw:text-lg'>Select position on the map!</span>
+          )}
         </div>
       </div>
     </div>

src/Components/Map/UtopiaMapInner.tsx

@@ -307,7 +307,10 @@ export function UtopiaMapInner({
       <MapEventListener />
       <AddButton triggerAction={setSelectNewItemPosition} />
       {selectNewItemPosition != null && (
-        <SelectPosition setSelectNewItemPosition={setSelectNewItemPosition} />
+        <SelectPosition
+          selectNewItemPosition={selectNewItemPosition}
+          setSelectNewItemPosition={setSelectNewItemPosition}
+        />
       )}
     </div>
   )

src/Components/Templates/ItemCard.tsx

@@ -1,5 +1,7 @@
+import { useMap } from 'react-leaflet'
 import { useNavigate } from 'react-router-dom'
 
+import { useSetSelectPosition } from '#components/Map/hooks/useSelectPosition'
 import useWindowDimensions from '#components/Map/hooks/useWindowDimension'
 import { StartEndView, TextView } from '#components/Map/Subcomponents/ItemPopupComponents'
 import { HeaderView } from '#components/Map/Subcomponents/ItemPopupComponents/HeaderView'
@@ -21,6 +23,8 @@ export const ItemCard = ({
 }) => {
   const navigate = useNavigate()
   const windowDimensions = useWindowDimensions()
+  const map = useMap()
+  const setSelectPosition = useSetSelectPosition()
 
   return (
     <div
@@ -38,6 +42,11 @@ export const ItemCard = ({
         item={i}
         api={i.layer?.api}
         editCallback={() => navigate('/edit-item/' + i.id)}
+        setPositionCallback={() => {
+          map.closePopup()
+          setSelectPosition(i)
+          navigate('/')
+        }}
         deleteCallback={() => deleteCallback(i)}
       ></HeaderView>
       <div className='tw:overflow-y-auto tw:overflow-x-hidden tw:max-h-64 fade'>