diff --git a/client/src/appReducer.js b/client/src/appReducer.js index 5eb2a04f4..de932ec64 100644 --- a/client/src/appReducer.js +++ b/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; +} + diff --git a/client/src/components/FoodSeeker/SearchResults/ResultsMap/ResultsMap.js b/client/src/components/FoodSeeker/SearchResults/ResultsMap/ResultsMap.js index a811d43ef..1778e8471 100644 --- a/client/src/components/FoodSeeker/SearchResults/ResultsMap/ResultsMap.js +++ b/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) { diff --git a/client/src/components/FoodSeeker/SearchResults/SearchResults.js b/client/src/components/FoodSeeker/SearchResults/SearchResults.js index 3791f39ba..7e9b6ed51 100644 --- a/client/src/components/FoodSeeker/SearchResults/SearchResults.js +++ b/client/src/components/FoodSeeker/SearchResults/SearchResults.js @@ -9,6 +9,7 @@ import { useAppDispatch, useSearchCoordinates, useStakeholders, + useIsListPanelVisible } from "../../../appReducer"; import Filters from "./ResultsFilters/ResultsFilters"; import List from "./ResultsList/ResultsList"; @@ -16,6 +17,7 @@ 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 = ( { 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) {