fix: Search results expand bug (#207)

frontend/e2e/pages/map.ts

@@ -12,14 +12,6 @@ export const map_page = async (page: Page) => {
 
   await expect(page.getByTestId('map-view')).toBeVisible()
 
-  // Find map markers - expect there to be some
-  const markers = await page.getByAltText('Authorization marker').all()
-  if (markers.length === 0) {
-    console.log('No markers')
-  }
-  // TODO not sure why this fails on CI (chromium/Chrome)
-  // expect(markers.length > 0).toBe(true)
-
   // Search components
   await expect(page.getByPlaceholder('Search')).toBeVisible()
   await expect(page.getByRole('button', { name: 'Find Me' })).toBeVisible()

frontend/src/features/map/map-slice.ts

@@ -17,12 +17,14 @@ export interface MapSliceState {
   isMyLocationVisible: boolean
   zoomPosition?: ZoomPosition
   zoomBounds?: LatLngBoundsLiteral
-  // Whether the search results sidebar OR bottom drawer is expanded
-  isDrawerExpanded: boolean
-  // The right sidebar width
+  // The width of the right sidebar (will be 0 when collapsed)
   sidebarWidth: number
+  // The bottom drawer height (will be 0 when collapsed, does change when full height)
+  bottomDrawerHeight: number
   // Keep track of if a single item has been selected
   selectedItem?: OmrrData
+  // The time when it was selected
+  selectedItemTime?: number
   // Selected data layers
   dataLayers: DataLayer[]
   // Keeps track of the active tool - point/polygon search (all screen sizes), and
@@ -34,8 +36,8 @@ export const initialState: MapSliceState = {
   isMyLocationVisible: false,
   zoomPosition: undefined,
   zoomBounds: undefined,
-  isDrawerExpanded: false,
   sidebarWidth: 0,
+  bottomDrawerHeight: 0,
   selectedItem: undefined,
   dataLayers: [],
   activeTool: undefined,
@@ -56,19 +58,15 @@ export const mapSlice = createSlice({
       state.zoomPosition = undefined
       state.zoomBounds = action.payload
     },
-    setDrawerExpanded: (state, action: PayloadAction<boolean>) => {
-      state.isDrawerExpanded = action.payload
-    },
     setSidebarWidth: (state, action: PayloadAction<number>) => {
       state.sidebarWidth = action.payload
     },
-    setSelectedItem: (state, action: PayloadAction<OmrrData>) => {
-      state.selectedItem = action.payload
-      // Also expand drawer
-      state.isDrawerExpanded = true
+    setBottomDrawerHeight: (state, action: PayloadAction<number>) => {
+      state.bottomDrawerHeight = action.payload
     },
-    clearSelectedItem: (state) => {
-      state.selectedItem = undefined
+    setSelectedItem: (state, action: PayloadAction<OmrrData | undefined>) => {
+      state.selectedItem = action.payload
+      state.selectedItemTime = action.payload ? Date.now() : undefined
     },
     toggleDataLayer: (state, action: PayloadAction<DataLayer>) => {
       const layer = action.payload
@@ -87,28 +85,28 @@ export const mapSlice = createSlice({
     resetDataLayers: (state) => {
       state.dataLayers = []
     },
-    setActiveTool: (
-      state,
-      action: PayloadAction<ActiveToolEnum | undefined>,
-    ) => {
+    toggleActiveTool: (state, action: PayloadAction<ActiveToolEnum>) => {
       // Toggle the tool
       const tool = action.payload
       state.activeTool = state.activeTool === tool ? undefined : tool
     },
+    clearActiveTool: (state) => {
+      state.activeTool = undefined
+    },
   },
 })
 
 export const {
   setMyLocationVisible,
   setZoomPosition,
   setZoomBounds,
-  setDrawerExpanded,
   setSidebarWidth,
+  setBottomDrawerHeight,
   setSelectedItem,
-  clearSelectedItem,
   toggleDataLayer,
   resetDataLayers,
-  setActiveTool,
+  toggleActiveTool,
+  clearActiveTool,
 } = mapSlice.actions
 
 // Selectors
@@ -119,14 +117,17 @@ export const useMyLocationVisible = () => useSelector(selectMyLocationVisible)
 export const selectZoomPosition = (state: RootState) => state.map.zoomPosition
 export const selectZoomBounds = (state: RootState) => state.map.zoomBounds
 
-const selectDrawerExpanded = (state: RootState) => state.map.isDrawerExpanded
-export const useDrawerExpanded = () => useSelector(selectDrawerExpanded)
-
 const selectSidebarWidth = (state: RootState) => state.map.sidebarWidth
 export const useSidebarWidth = () => useSelector(selectSidebarWidth)
 
+const selectBottomDrawerHeight = (state: RootState) =>
+  state.map.bottomDrawerHeight
+export const useBottomDrawerHeight = () => useSelector(selectBottomDrawerHeight)
+
 const selectSelectedItem = (state: RootState) => state.map.selectedItem
 export const useSelectedItem = () => useSelector(selectSelectedItem)
+const selectSelectedItemTime = (state: RootState) => state.map.selectedItemTime
+export const useSelectedItemTime = () => useSelector(selectSelectedItemTime)
 
 const selectDataLayers = (state: RootState) => state.map.dataLayers
 export const useDataLayers = () => useSelector(selectDataLayers)

frontend/src/features/omrr/omrr-slice.ts

@@ -143,23 +143,28 @@ export const omrrSlice = createSlice({
       state.page = action.payload
     },
     setSearchTextFilter: (state, action: PayloadAction<string>) => {
-      state.searchTextFilter = action.payload
-      performSearch(state)
+      if (state.searchTextFilter !== action.payload) {
+        state.searchTextFilter = action.payload
+        performSearch(state)
+      }
     },
-    setPolygonFilter: (
-      state,
-      action: PayloadAction<PolygonFilter | undefined>,
-    ) => {
+    setPolygonFilter: (state, action: PayloadAction<PolygonFilter>) => {
       state.polygonFilter = action.payload
+      state.circleFilter = undefined
       performSearch(state)
     },
-    setCircleFilter: (
-      state,
-      action: PayloadAction<CircleFilter | undefined>,
-    ) => {
+    setCircleFilter: (state, action: PayloadAction<CircleFilter>) => {
       state.circleFilter = action.payload
+      state.polygonFilter = undefined
       performSearch(state)
     },
+    clearShapeFilters: (state) => {
+      if (state.polygonFilter || state.circleFilter) {
+        state.polygonFilter = undefined
+        state.circleFilter = undefined
+        performSearch(state)
+      }
+    },
   },
   extraReducers: (builder: ActionReducerMapBuilder<OmrrSliceState>) => {
     // Handle the pending action
@@ -206,6 +211,7 @@ export const {
   setSearchTextFilter,
   setPolygonFilter,
   setCircleFilter,
+  clearShapeFilters,
 } = omrrSlice.actions
 
 export default omrrSlice.reducer

frontend/src/pages/map/drawer/MapBottomDrawer.css

@@ -14,16 +14,6 @@
   transition: height 0.5s ease-in-out;
 }
 
-.map-bottom-drawer.map-bottom-drawer--expanded {
-  height: 320px;
-}
-
-.map-bottom-drawer--expanded.map-bottom-drawer--searchBy,
-.map-bottom-drawer--expanded.map-bottom-drawer--pointSearch,
-.map-bottom-drawer--expanded.map-bottom-drawer--polygonSearch {
-  height: 160px;
-}
-
 .map-bottom-drawer.map-bottom-drawer--full-height {
   height: calc(100% - var(--header-height));
 }

frontend/src/pages/map/drawer/MapBottomDrawer.tsx

@@ -1,15 +1,16 @@
 import { useRef, useState } from 'react'
 import { useDispatch } from 'react-redux'
-import clsx from 'clsx'
 import { IconButton } from '@mui/material'
+import clsx from 'clsx'
 
 import { DataLayersCheckboxGroup } from '@/components/DataLayersCheckboxGroup'
 import { FilterByCheckboxGroup } from '@/components/FilterByCheckboxGroup'
 import { SearchByRadioGroup } from '@/components/SearchByRadioGroup'
 import { ActiveToolEnum } from '@/constants/constants'
-import { setActiveTool, useActiveTool } from '@/features/map/map-slice'
-import { setCircleFilter, setPolygonFilter } from '@/features/omrr/omrr-slice'
+import { clearActiveTool } from '@/features/map/map-slice'
+import { clearShapeFilters } from '@/features/omrr/omrr-slice'
 import { SwipeDirection, useSwipe } from '@/hooks/useSwipe'
+import { useBottomDrawerState } from '../hooks/useBottomDrawerState'
 import { SearchResultsList } from './SearchResultsList'
 import { PolygonSearch } from '../search/PolygonSearch'
 import { PointSearch } from '../search/PointSearch'
@@ -36,28 +37,38 @@ function getTitle(tool: ActiveToolEnum | undefined): string {
   }
 }
 
-interface Props {
-  isExpanded: boolean
-  setExpanded: (expanded: boolean) => void
-}
-
 /**
  * Renders the children at the bottom of the map view.
  * When isExpanded is true - it is displayed.
  * When isExpanded is false - it is hidden.
  * It can be toggled to be full height.
  */
-export function MapBottomDrawer({ isExpanded, setExpanded }: Readonly<Props>) {
+export function MapBottomDrawer() {
   const dispatch = useDispatch()
-  const ref = useRef<HTMLDivElement>(null)
+  const {
+    isExpanded,
+    setExpanded,
+    height,
+    activeTool,
+    isSearchResultsVisible,
+    isDataLayersVisible,
+    isSearchByVisible,
+    isFilterByVisible,
+    isPointSearchVisible,
+    isPolygonSearchVisible,
+  } = useBottomDrawerState()
   const [fullHeight, setFullHeight] = useState<boolean>(false)
-  const activeTool = useActiveTool()
-  const isSearchResultsVisible = !activeTool
-  const isDataLayersVisible = activeTool === ActiveToolEnum.dataLayers
-  const isPointSearchVisible = activeTool === ActiveToolEnum.pointSearch
-  const isPolygonSearchVisible = activeTool === ActiveToolEnum.polygonSearch
-  const isSearchByVisible = activeTool === ActiveToolEnum.searchBy
-  const isFilterByVisible = activeTool === ActiveToolEnum.filterBy
+  const ref = useRef<HTMLDivElement>(null)
+
+  const onClose = () => {
+    setExpanded(false)
+    setFullHeight(false)
+    // Clear active tool and filters too
+    if (activeTool) {
+      dispatch(clearActiveTool())
+    }
+    dispatch(clearShapeFilters())
+  }
 
   const swipeCallback = (direction: SwipeDirection) => {
     if (direction === 'up') {
@@ -77,25 +88,14 @@ export function MapBottomDrawer({ isExpanded, setExpanded }: Readonly<Props>) {
 
   useSwipe(ref, swipeCallback)
 
-  const onClose = () => {
-    setExpanded(false)
-    setFullHeight(false)
-    dispatch(setActiveTool(undefined))
-    if (isPolygonSearchVisible) {
-      dispatch(setPolygonFilter(undefined))
-    } else if (isPointSearchVisible) {
-      dispatch(setCircleFilter(undefined))
-    }
-  }
-
   return (
     <div
       ref={ref}
+      style={!isExpanded || fullHeight ? undefined : { height: `${height}px` }}
       className={clsx(
         'map-bottom-drawer',
         isExpanded && 'map-bottom-drawer--expanded',
         fullHeight && 'map-bottom-drawer--full-height',
-        Boolean(activeTool) && `map-bottom-drawer--${activeTool}`,
       )}
       data-testid="map-bottom-drawer"
     >