commit b45d0300d4d72817dae6e9059fe915ce8df0a4c5
Author: Vaclav Honzik <vaclavhonzik98@gmail.com>
Date:   Mon May 16 11:05:54 2022 +0200

    draggable map marker pt1
    
    re #9741

diff --git a/frontend/src/features/Catalog/CatalogTable.tsx b/frontend/src/features/Catalog/CatalogTable.tsx
index e34d730..b8023fd 100644
--- a/frontend/src/features/Catalog/CatalogTable.tsx
+++ b/frontend/src/features/Catalog/CatalogTable.tsx
@@ -125,9 +125,7 @@ const CatalogTable = () => {
             {mapValueOrDefault(item.countries?.join(', '))}
             {mapValueOrDefault(
                 item.latitude && item.longitude
-                    ? `${item.latitude.toFixed(2)}, ${item.longitude.toFixed(
-                          2
-                      )}`
+                    ? `${item.latitude}, ${item.longitude}`
                     : undefined
             )}
             {mapValueOrDefault(
@@ -142,7 +140,7 @@ const CatalogTable = () => {
             {loading && !displayError ? <ContentLoading /> : null}
             {!loading && !displayError ? (
                 <Fragment>
-                    <TableContainer sx={{ minHeight: '65vh', maxHeight: '65vh' }}>
+                    <TableContainer sx={{ minHeight: '60vh', maxHeight: '60vh' }}>
                         <Table
                             stickyHeader
                             sx={{ minWidth: 400 }}
diff --git a/frontend/src/features/Navigation/navigationSlice.ts b/frontend/src/features/Navigation/navigationSlice.ts
new file mode 100644
index 0000000..6096557
--- /dev/null
+++ b/frontend/src/features/Navigation/navigationSlice.ts
@@ -0,0 +1,33 @@
+import { createSlice } from '@reduxjs/toolkit'
+import persistReducer from 'redux-persist/es/persistReducer'
+import storage from 'redux-persist/lib/storage'
+
+export interface NavigationState {
+    selectedMenuItem?: string,
+    open: boolean,
+}
+
+const persistConfig = {
+    key: 'navigation',
+    storage
+}
+
+const initialState: NavigationState = {
+    selectedMenuItem: '',
+    open: false
+}
+
+export const navigationSlice = createSlice({
+    name: 'navigation',
+    initialState,
+    reducers: {
+        setSelectedMenuItem: (state: NavigationState, action: any) => ({...state, selectedMenuItem: action.payload}),
+        setOpen: (state: NavigationState, action: any) => ({...state, open: action.payload}),
+    }
+})
+
+const navigationReducer = persistReducer(persistConfig, navigationSlice.reducer)
+
+export const { setSelectedMenuItem, setOpen } = navigationSlice.actions
+
+export default navigationReducer
diff --git a/frontend/src/features/Navigation/navigationSlice.tsx b/frontend/src/features/Navigation/navigationSlice.tsx
deleted file mode 100644
index 6096557..0000000
--- a/frontend/src/features/Navigation/navigationSlice.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { createSlice } from '@reduxjs/toolkit'
-import persistReducer from 'redux-persist/es/persistReducer'
-import storage from 'redux-persist/lib/storage'
-
-export interface NavigationState {
-    selectedMenuItem?: string,
-    open: boolean,
-}
-
-const persistConfig = {
-    key: 'navigation',
-    storage
-}
-
-const initialState: NavigationState = {
-    selectedMenuItem: '',
-    open: false
-}
-
-export const navigationSlice = createSlice({
-    name: 'navigation',
-    initialState,
-    reducers: {
-        setSelectedMenuItem: (state: NavigationState, action: any) => ({...state, selectedMenuItem: action.payload}),
-        setOpen: (state: NavigationState, action: any) => ({...state, open: action.payload}),
-    }
-})
-
-const navigationReducer = persistReducer(persistConfig, navigationSlice.reducer)
-
-export const { setSelectedMenuItem, setOpen } = navigationSlice.actions
-
-export default navigationReducer
diff --git a/frontend/src/features/TrackingTool/MapMarker.tsx b/frontend/src/features/TrackingTool/MapMarker.tsx
new file mode 100644
index 0000000..0801643
--- /dev/null
+++ b/frontend/src/features/TrackingTool/MapMarker.tsx
@@ -0,0 +1,41 @@
+import { LatLngTuple, Marker as MarkerPOJO } from 'leaflet'
+import { FunctionComponent, ReactNode, useMemo, useRef, useState } from 'react'
+import { Marker } from 'react-leaflet'
+
+export interface MapMarkerProps {
+    position: LatLngTuple
+    children?: ReactNode
+}
+
+// Custom Map Marker component
+const MapMarker: FunctionComponent<MapMarkerProps> = ({ position, children }) => {
+    const [currentPosition, setCurrentPosition] = useState(position)
+    const markerRef = useRef<MarkerPOJO | null>(null)
+    const eventHandlers = useMemo(
+        () => ({
+            dragend: () => {
+                const marker = markerRef.current
+                console.log(markerRef)
+                if (!marker) {
+                    return
+                }
+                const latlng = marker.getLatLng()
+                setCurrentPosition([latlng.lat, latlng.lng])
+            },
+        }),
+        []
+    )
+
+    return (
+        <Marker
+            draggable={true}
+            position={currentPosition}
+            eventHandlers={eventHandlers}
+            ref={markerRef}
+        >
+            {children}
+        </Marker>
+    )
+}
+
+export default MapMarker
diff --git a/frontend/src/features/TrackingTool/MapPath.tsx b/frontend/src/features/TrackingTool/MapPath.tsx
index ee279e3..8c592fc 100644
--- a/frontend/src/features/TrackingTool/MapPath.tsx
+++ b/frontend/src/features/TrackingTool/MapPath.tsx
@@ -14,6 +14,7 @@ import { formatHtmlStringToReactDom } from '../../utils/formatting/HtmlUtils'
 import { DialogCatalogItemDetail as CatalogItemDetailDialog } from '../Catalog/CatalogItemDetail'
 import { useDispatch, useSelector } from 'react-redux'
 import { RootState } from '../redux/store'
+import MapMarker from './MapMarker'
 
 // CatalogItemDto wrapper to keep track whether the item is active or not
 class DisplayableMapPoint {
@@ -123,7 +124,7 @@ const MapPath: FunctionComponent<MapPathProps> = ({ idx, pathVariant }) => {
      */
     const buildVertices = () => {
         return mapPoints.map((mapPoint, idx) => (
-            <Marker
+            <MapMarker
                 key={idx}
                 position={[
                     mapPoint.catalogItem.latitude as number,
@@ -161,7 +162,7 @@ const MapPath: FunctionComponent<MapPathProps> = ({ idx, pathVariant }) => {
                         </Stack>
                     </Fragment>
                 </Popup>
-            </Marker>
+            </MapMarker>
         ))
     }
 
diff --git a/frontend/src/features/TrackingTool/trackingToolSlice.ts b/frontend/src/features/TrackingTool/trackingToolSlice.ts
index 856bb43..1e4c1bc 100644
--- a/frontend/src/features/TrackingTool/trackingToolSlice.ts
+++ b/frontend/src/features/TrackingTool/trackingToolSlice.ts
@@ -88,7 +88,7 @@ export const trackingToolSlice = createSlice({
                 currentPage: 0,
             }
         })
-        builder.addCase(sendTextForProcessing.rejected, (state, action) => ({
+        builder.addCase(sendTextForProcessing.rejected, (_, action) => ({
             ...initialState,
             lastError: action.error.message,
             isLoading: false,
diff --git a/frontend/src/features/redux/store.ts b/frontend/src/features/redux/store.ts
index 2de4359..9dd6113 100644
--- a/frontend/src/features/redux/store.ts
+++ b/frontend/src/features/redux/store.ts
@@ -25,7 +25,6 @@ const store = createStore(
         trackingTool: trackingToolReducer,
         usersDetail: usersDetailReducer,
         navigation: navigationReducer,
-        usersDetail: usersDetailReducer,
     }),
     process.env.REACT_APP_DEV_ENV === 'true'
         ? composeEnhancers(
