Show list when clicking map (#2135)

* ts strict true

* result list opens when cliking map

* list goes up even when map/list button is set to map

client/src/appReducer.js

@@ -118,6 +118,16 @@ function listPanelReducer(state, action) {
   }
 }
 
+function isListPanelVisibleReducer(state, action) {
+  switch (action.type) {
+    case "TOGGLE_LIST_PANEL":
+      return !state; // Toggle the state
+    default:
+      return state;
+  }
+}
+
+
 export function appReducer(state, action) {
   return {
     defaultCoordinate: defaultCoordinatesReducer(
@@ -147,6 +157,7 @@ export function appReducer(state, action) {
         action
       ),
     listPanel: listPanelReducer(state.listPanel, action),
+    isListPanelVisible: isListPanelVisibleReducer(state.isListPanelVisible, action),
   };
 }
 
@@ -163,6 +174,7 @@ export function getInitialState() {
     openTimeFilter: { radio: "Show All", day: "", time: "" },
     noKnownEligibilityRequirementsFilter: false,
     listPanel: true,
+    isListPanelVisible: false
   };
 }
 
@@ -250,3 +262,9 @@ export function useListPanel() {
   const { listPanel } = useAppState();
   return listPanel;
 }
+
+export function useIsListPanelVisible() {
+  const { isListPanelVisible } = useAppState();
+  return isListPanelVisible;
+}
+

client/src/components/FoodSeeker/SearchResults/ResultsMap/ResultsMap.js

@@ -108,6 +108,7 @@ const ResultsMap = (
       ],
       duration: 2000,
     });
+    dispatch({ type:'TOGGLE_LIST_PANEL'})
     if (!e.features || !e.features.length) {
       dispatch({ type: "RESET_SELECTED_ORGANIZATION" });
     } else if (stakeholders) {

client/src/components/FoodSeeker/SearchResults/SearchResults.js

@@ -9,13 +9,15 @@ import {
   useAppDispatch,
   useSearchCoordinates,
   useStakeholders,
+  useIsListPanelVisible
 } from "../../../appReducer";
 import Filters from "./ResultsFilters/ResultsFilters";
 import List from "./ResultsList/ResultsList";
 import Map from "./ResultsMap/ResultsMap";
 import { Desktop, Mobile, Tablet } from "./layouts";
 
 const SearchResults = () => {
+  const isListPanelVisible = useIsListPanelVisible()
   const mapRef = useRef(null);
   const { isDesktop, isTablet } = useBreakpoints();
   const { selectAll, loading } = useOrganizationBests();
@@ -111,6 +113,10 @@ const SearchResults = () => {
     setShowList((showList) => !showList);
   }, [dispatch]);
 
+  useEffect(() => {
+    setShowList(true)
+  }, [isListPanelVisible])
+
   const filters = (
     <Filters
       categoryIds={categoryIds}

client/src/components/FoodSeeker/SearchResults/layouts/Mobile.js

@@ -3,6 +3,9 @@ import { useEffect, useState } from "react";
 import Draggable from "react-draggable";
 import { useFilterPanel } from "appReducer";
 import AttributionInfo from "../AttributionInfo";
+import { 
+  useIsListPanelVisible,
+} from '../../../../appReducer'
 import useFeatureFlag from "hooks/useFeatureFlag";
 
 const overlay = {
@@ -24,6 +27,17 @@ const MobileLayout = ({ filters, map, list, showList }) => {
     y: initialY * (window.innerHeight / 100),
   });
 
+  const isListPanelVisible = useIsListPanelVisible()
+
+
+  // List goes up when clicking the map
+  useEffect(() => {
+    setPosition({
+      x: 0,
+      y: initialY * (window.innerHeight / 100),
+    })
+  }, [isListPanelVisible])
+
   useEffect(() => {
     let newY;
     if (filterPanelOpen) {