Merge branch 'release-1.0.82'

hackforla · Jun 18, 2024 · 098fe69 · 098fe69
2 parents ca0f7de + 4e541c9
commit 098fe69
Show file tree

Hide file tree

Showing 12 changed files with 127 additions and 121 deletions.
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -1,7 +1,7 @@
 {
   "name": "foodoasis-client",
   "description": "React Client for Food Oasis",
-  "version": "1.0.81",
+  "version": "1.0.82",
   "author": "Hack for LA",
   "license": "GPL-2.0",
   "private": true,

diff --git a/client/src/appReducer.js b/client/src/appReducer.js
@@ -136,7 +136,6 @@ function position(state, action) {
   }
 }
 
-
 export function appReducer(state, action) {
   return {
     defaultCoordinate: defaultCoordinatesReducer(
@@ -166,8 +165,11 @@ export function appReducer(state, action) {
         action
       ),
     listPanel: listPanelReducer(state.listPanel, action),
-    isListPanelVisible: isListPanelVisibleReducer(state.isListPanelVisible, action),
-    position: position(state.position, action)
+    isListPanelVisible: isListPanelVisibleReducer(
+      state.isListPanelVisible,
+      action
+    ),
+    position: position(state.position, action),
   };
 }
 
@@ -185,7 +187,7 @@ export function getInitialState() {
     noKnownEligibilityRequirementsFilter: false,
     listPanel: true,
     isListPanelVisible: false,
-    position: '0'
+    position: "0",
   };
 }
 
@@ -283,4 +285,3 @@ export function usePosition() {
   const { position } = useAppState();
   return position;
 }
-
diff --git a/client/src/components/FoodSeeker/SearchResults/AttributionInfo.js b/client/src/components/FoodSeeker/SearchResults/AttributionInfo.js
@@ -109,7 +109,7 @@ const AttributionInfo = () => {
                   fontSize: "12px",
                   marginLeft: "3px",
                   fontWeight: "700",
-                  paddingRight: "5px"
+                  paddingRight: "5px",
                 }}
                 href="https://apps.mapbox.com/feedback/?owner=mapbox&amp;id=streets-v11&amp;access_token=pk.eyJ1IjoibHVjYXNob21lciIsImEiOiJjazFqcnRjcm0wNmZ1M2JwZXg2eDFzMXd3In0.yYpkKLrFCxF-qyBfZH1a8w#/-118.2439/34.0355/11"
                 target="_blank"

diff --git a/client/src/components/FoodSeeker/SearchResults/ResultsMap/ResultsMap.js b/client/src/components/FoodSeeker/SearchResults/ResultsMap/ResultsMap.js
@@ -121,7 +121,9 @@ const ResultsMap = (
       ],
       duration: 2000,
     });
-    dispatch({ type: "TOGGLE_LIST_PANEL" });
+    if(isMobile){
+      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
@@ -10,15 +10,15 @@ import {
   useSearchCoordinates,
   useStakeholders,
   useIsListPanelVisible,
-  usePosition
+  usePosition,
 } 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 isListPanelVisible = useIsListPanelVisible();
   const mapRef = useRef(null);
   const { isDesktop, isTablet } = useBreakpoints();
   const { selectAll, loading } = useOrganizationBests();
@@ -35,21 +35,18 @@ const SearchResults = () => {
   const organizationId = new URLSearchParams(location.search).get("id");
   const positionDraggable = usePosition();
 
- useEffect(() => {
-  const windowHeightPercentage = window.innerHeight / 100;
-  const triggerHeightTop = 54 * windowHeightPercentage;
-
-  if (positionDraggable.y === 0) {
-    setShowList(true);
-  } else if (positionDraggable.y === triggerHeightTop) {
-    setShowList(false);
-  }
-  else {
-    return
-  }
-  console.log(positionDraggable)
-}, [positionDraggable]);
-
+  useEffect(() => {
+    const windowHeightPercentage = window.innerHeight / 100;
+    const triggerHeightTop = 54 * windowHeightPercentage;
+
+    if (positionDraggable.y === 0) {
+      setShowList(true);
+    } else if (positionDraggable.y === triggerHeightTop) {
+      setShowList(false);
+    } else {
+      return;
+    }
+  }, [positionDraggable]);
 
   // USE EFFECT BASED ON THIS FUNCTION IN Mobile.js
   // const handleStop = (e, ui) => {
@@ -65,11 +62,6 @@ const SearchResults = () => {
   //   setPosition({ x: 0, y: newY * windowHeight });
   // };
 
-
-
-
-
-
   // If path starts with "widget", then set the state variable isWidget to true,
   // so we stay in widget mode (w/o normal App Header and Footer)
   useEffect(() => {
@@ -150,8 +142,8 @@ const SearchResults = () => {
   }, [dispatch]);
 
   useEffect(() => {
-    setShowList(true)
-  }, [isListPanelVisible])
+    setShowList(true);
+  }, [isListPanelVisible]);
 
   const filters = (
     <Filters

diff --git a/client/src/components/FoodSeeker/SearchResults/StakeholderDetails/StakeholderDetails.js b/client/src/components/FoodSeeker/SearchResults/StakeholderDetails/StakeholderDetails.js
@@ -42,7 +42,7 @@ import {
   useSelectedOrganization,
   useUserCoordinates,
   useWidget,
-  usePosition
+  usePosition,
 } from "../../../../appReducer";
 import { useToasterContext } from "../../../../contexts/toasterContext";
 import SEO from "../../../SEO";
@@ -90,18 +90,19 @@ const StakeholderDetails = ({ onBackClick, isDesktop }) => {
   const { setToast } = useToasterContext();
   const { tenantTimeZone } = useSiteContext();
   const position = usePosition();
-  const [paddingBottom, setPaddingBottom] = useState(30)
+  const [paddingBottom, setPaddingBottom] = useState(30);
 
-  useEffect(()=> {
+  useEffect(() => {
     const windowHeight = window.innerHeight / 100;
-    if(position.y === (100 / window.innerHeight * 54) * windowHeight || position.y === 0 * windowHeight){
-      setPaddingBottom(200)
-    }
-    else if(position.y === 17 * windowHeight){
-      setPaddingBottom(300)
+    if (
+      position.y === (100 / window.innerHeight) * 54 * windowHeight ||
+      position.y === 0 * windowHeight
+    ) {
+      setPaddingBottom(200);
+    } else if (position.y === 17 * windowHeight) {
+      setPaddingBottom(300);
     }
-
-  },[position])
+  }, [position]);
 
   // USE EFFECT BASED ON THIS FUNCTION IN Mobile.js
   // const handleStop = (e, ui) => {
@@ -117,7 +118,6 @@ const StakeholderDetails = ({ onBackClick, isDesktop }) => {
   //   setPosition({ x: 0, y: newY * windowHeight });
   // };
 
-
   useEffect(() => {
     if (selectedOrganization?.id) {
       analytics.postEvent("viewDetail", {
@@ -291,7 +291,13 @@ const StakeholderDetails = ({ onBackClick, isDesktop }) => {
         stakeholder={selectedOrganization}
         setToast={setToast}
       />
-      <Stack height={"100%"} width={"100%"}>
+      <Stack
+        height={"100%"}
+        width={"100%"}
+        sx={{
+          display: "flex",
+        }}
+      >
         <Stack
           direction={"row"}
           alignItems="flex-end"
@@ -305,10 +311,10 @@ const StakeholderDetails = ({ onBackClick, isDesktop }) => {
               textAlign: "right",
               fontWeight: "bold",
               fontSize: "14px",
-              color: {md: theme.palette.common.gray, xs: "#747476"},
+              color: { md: theme.palette.common.gray, xs: "#747476" },
               position: "relative",
               cursor: "pointer",
-              display: {xs: 'block', md: 'none'}
+              display: { xs: "block", md: "none" },
             })}
             onClick={handleBackButtonClick}
           >
@@ -318,49 +324,57 @@ const StakeholderDetails = ({ onBackClick, isDesktop }) => {
             sx={(theme) => ({
               textAlign: "left",
               fontWeight: "bold",
-              fontSize: {md: "18px"},
-              color: {md: theme.palette.common.gray, xs: "#747476"},
+              fontSize: { md: "18px" },
+              color: { md: theme.palette.common.gray, xs: "#747476" },
               position: "relative",
               cursor: "pointer",
-              display: {md: 'block', xs: 'none'}
+              display: { md: "block", xs: "none" },
             })}
             onClick={handleBackButtonClick}
           >
             Back to Location
           </Typography>
-          {isDesktop && (<> <ArrowBack
-            fontSize="small"
-            sx={{
-              color: "#747476",
-              margin: "0 8px 6px",
-            }}
-          />
-          <Typography
+          {isDesktop && (
+            <>
+              <ArrowBack
+                fontSize="small"
+                sx={{
+                  color: "#747476",
+                  margin: "0 8px 6px",
+                }}
+              />
+              <Typography
+                sx={(theme) => ({
+                  textAlign: "left",
+                  fontWeight: "bold",
+                  fontSize: { xs: "18px" },
+                  color: theme.palette.common.gray,
+                  position: "relative",
+                })}
+              >
+                {getCategoryText()}
+              </Typography>
+            </>
+          )}
+        </Stack>
+        {isDesktop && (
+          <Divider
             sx={(theme) => ({
-              textAlign: "left",
-              fontWeight: "bold",
-              fontSize: { xs: "18px" },
-              color: theme.palette.common.gray,
-              position: "relative",
+              background: theme.palette.common.black,
+              margin: isDesktop ? "16px 35px 0 65px" : "0 1.5rem",
             })}
-          >
-            {getCategoryText()}
-          </Typography> </>)}
-        </Stack>
-        {isDesktop && (<Divider
-          sx={(theme) => ({
-            background: theme.palette.common.black,
-            margin: isDesktop ? "16px 35px 0 65px" : "0 1.5rem",
-          })}
-        /> )}
+          />
+        )}
         <Grid2
           container
           spacing={0}
           sx={{
+            flex: 1,
             minHeight: "6rem",
-            overflowY: "scroll",
-            padding: isDesktop ? "38px 35px 0 65px" : "3px 23px 0",
-            paddingBottom: isDesktop ? "0" : `${paddingBottom}px`,
+            overflowY: "auto",
+            padding: isDesktop
+              ? "38px 35px 0 65px"
+              : `3px 23px ${paddingBottom}px`,
           }}
         >
           <Grid2 xs={2}>
@@ -369,7 +383,7 @@ const StakeholderDetails = ({ onBackClick, isDesktop }) => {
               direction="column"
               justifyContent="flex-start"
               alignItems="center"
-              sx={{ marginTop: ".2rem", marginRight: "1rem", height: "100%" }}
+              sx={{ marginTop: ".2rem", marginRight: "1rem" }}
             >
               <StakeholderIcon stakeholder={selectedOrganization} />
             </Stack>