Merge branch 'release-1.0.90'

.github/workflows/deployFullstackToDockerHub.yaml

@@ -10,7 +10,7 @@ on:
       - published
 jobs:
   fullstack:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
     name: Build and push Full-Stack Container to Docker Hub
     steps:
       - name: Checkout repo

.github/workflows/deployWebAPIOnlyToDockerHub.yaml

@@ -11,7 +11,7 @@ on:
       - published
 jobs:
   webapi:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
     name: Build and push Web API Container to Docker Hub
     steps:
       - name: Checkout repo

.github/workflows/developToHeroku.yml

@@ -7,7 +7,7 @@ on:
 
 jobs:
   build:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
     steps:
       - uses: actions/checkout@v3
       - uses: akhileshns/[email protected] # This is the action

.github/workflows/mainToHeroku.yml

@@ -7,7 +7,7 @@ on:
 
 jobs:
   build:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
     steps:
       - uses: actions/checkout@v3
       - uses: akhileshns/[email protected] # This is the action

.github/workflows/viteToHeroku.yml

@@ -7,7 +7,7 @@ on:
 
 jobs:
   build:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
     steps:
       - uses: actions/checkout@v3
       - uses: akhileshns/[email protected] # This is the action

client/package.json

@@ -1,7 +1,7 @@
 {
   "name": "foodoasis-client",
   "description": "React Client for Food Oasis",
-  "version": "1.0.89",
+  "version": "1.0.90",
   "author": "Hack for LA",
   "license": "GPL-2.0",
   "private": true,

client/src/App.jsx

@@ -21,13 +21,6 @@ function App() {
     analytics.postEvent("visitAppComponent");
   }, []);
 
-  // const [snackbarOpen, setSnackbarOpen] = useState(false);
-  // const [snackbarMessage, setSnackbarMessage] = useState("");
-
-  // const handleCloseSnackbar = () => {
-  //   setSnackbarOpen(false);
-  // };
-
   return (
     <HelmetProvider>
       <CssBaseline />

client/src/Routes.jsx

@@ -7,6 +7,9 @@ import { Navigate, Outlet, Route, Routes } from "react-router-dom";
 import Fallback from "./components/Fallback";
 import PrivateRoute from "./components/PrivateRoute";
 import Toast from "components/UI/Toast";
+import {
+  useWidget,
+} from "./appReducer";
 
 const VerificationAdmin = lazy(() =>
   import("components/Admin/VerificationAdmin")
@@ -196,6 +199,7 @@ export default function AppRoutes() {
 }
 
 function AppWrapper() {
+    const isWidget = useWidget();
   return (
     <Grid
       container
@@ -211,7 +215,7 @@ function AppWrapper() {
         overflowX: "hidden",
       }}
     >
-      <Header />
+      {isWidget ? null : <Header />}
       <Outlet />
       <Toast />
     </Grid>

client/src/components/FoodSeeker/Home.jsx

@@ -1,5 +1,6 @@
 import { LocationOn } from "@mui/icons-material";
 import {
+  Alert,
   Box,
   Button,
   CircularProgress,
@@ -226,6 +227,10 @@ const Home = () => {
                     </div>
                   )}
                 </Box>
+                <Alert severity="warning">
+                  Due to the LA Fires (Jan 2025), some information may be
+                  out-of-date.
+                </Alert>
                 <Box
                   sx={{
                     display: "flex",

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

@@ -7,13 +7,15 @@ import { useCallback, useEffect, useState } from "react";
 // recommendation from Mapbox team
 // https://github.com/mapbox/mapbox-gl-js/issues/10173  See comment by IvanDreamer on Mar 22
 // for craco.config.js contents
-import { Grid } from "@mui/material";
+import { Grid, Box, IconButton } from "@mui/material";
+import AddIcon from '@mui/icons-material/AddRounded';
+import RemoveIcon from '@mui/icons-material/RemoveRounded';
 import { MAPBOX_STYLE } from "constants/map";
 import { MAPBOX_ACCESS_TOKEN, DEFAULT_VIEWPORT } from "helpers/Constants";
 import useBreakpoints from "hooks/useBreakpoints";
 import useFeatureFlag from "hooks/useFeatureFlag";
 import 'mapbox-gl/dist/mapbox-gl.css';
-import Map, { Layer, Marker, NavigationControl, Source } from "react-map-gl";
+import Map, { Layer, Marker, Source } from "react-map-gl";
 import { useLocation, useNavigate } from "react-router-dom";
 import * as analytics from "services/analytics";
 import {
@@ -43,7 +45,7 @@ const ResultsMap = ({ stakeholders, categoryIds, toggleCategory, loading }) => {
   const selectedOrganization = useSelectedOrganization();
   const navigate = useNavigate();
   const location = useLocation();
-  const { isMobile } = useBreakpoints();
+  const { isMobile, isTablet } = useBreakpoints();
   const isListPanelOpen = useListPanel();
   const isFilterPanelOpen = useFilterPanel();
   const { mapRef, flyTo } = useMapbox();
@@ -71,6 +73,7 @@ const ResultsMap = ({ stakeholders, categoryIds, toggleCategory, loading }) => {
   const onMouseEnter = useCallback(() => setCursor("pointer"), []);
   const onMouseLeave = useCallback(() => setCursor("auto"), []);
   const [interactiveLayerIds, setInteractiveLayerIds] = useState(["nonexist"]);
+  const [currMap, setCurrMap] = useState(null);
 
   useEffect(() => {
     analytics.postEvent("showMap");
@@ -84,8 +87,10 @@ const ResultsMap = ({ stakeholders, categoryIds, toggleCategory, loading }) => {
     }));
   }, [searchCoordinates, longitude, latitude, isMobile]);
 
+
   const onLoad = useCallback(async () => {
     const map = mapRef.current.getMap();
+    setCurrMap(map);
     await loadMarkerIcons(map);
     setMarkersLoaded(true);
     setInteractiveLayerIds([MARKERS_LAYER_ID]);
@@ -134,6 +139,79 @@ const ResultsMap = ({ stakeholders, categoryIds, toggleCategory, loading }) => {
   const listPanelLeftPostion = isListPanelOpen ? 524 : 0;
   const filterPanelLeftPostion = isFilterPanelOpen ? 340 : 0;
 
+  const CustomNavigationControl = () => {
+    if (!currMap) return;
+    const zoom = currMap.getZoom();
+    const currentCenter = currMap.getCenter();
+
+    const handleZoomIn = () => {
+      const longOffset = 0.0399 * Math.pow(2, 11 - zoom);
+      const newCenter = {
+        lng: !isTablet && isListPanelOpen ? currentCenter.lng + longOffset : currentCenter.lng,
+        lat: selectedOrganization ? selectedOrganization.latitude : currentCenter.lat
+      };
+
+      currMap.easeTo({
+        center: isListPanelOpen ? newCenter : currentCenter,
+        zoom: zoom + 1,
+        duration: 500,
+      })
+    };
+
+    const handleZoomOut = () => {
+      const zoomOutOffset = 0.0399 * Math.pow(2, 12 - zoom);
+      const newCenter = {
+        lng: currentCenter.lng - zoomOutOffset,
+        lat: currentCenter.lat
+      };
+
+      currMap.easeTo({
+        center: isListPanelOpen ? newCenter : currentCenter,
+        zoom: zoom - 1,
+        duration: 500,
+      })
+    };
+
+    const buttonStyles = {
+      color: "#313131",
+      borderBottom: "1px solid rgba(0, 0, 0, 0.1)",
+      borderRadius: 0,
+      width: "28px",
+      height: "28px",
+      '&:hover': {
+        backgroundColor: "#f5f5f5",
+      },
+      '&:active': {
+        backgroundColor: "#e0e0e0",
+      },
+    };
+
+    return (
+      <Box
+        sx={{
+          position: "absolute",
+          top: 10,
+          right: 10,
+          zIndex: 10,
+          display: "flex",
+          flexDirection: "column",
+          background: "#fff",
+          borderRadius: "6px",
+          boxShadow: "0 1px 6px rgba(0, 0, 0, 0.416)",
+          border: "1.5px solid rgba(0, 0, 0, 0.1)",
+          overflow: "hidden",
+        }}
+      >
+        <IconButton onClick={handleZoomIn} sx={buttonStyles} size="small">
+          <AddIcon />
+        </IconButton>
+        <IconButton onClick={handleZoomOut} sx={buttonStyles}>
+          <RemoveIcon />
+        </IconButton>
+      </Box>
+    );
+};
+
   return (
     <div style={{ position: "relative", height: "100%", width: "100%" }}>
       <Map
@@ -152,7 +230,7 @@ const ResultsMap = ({ stakeholders, categoryIds, toggleCategory, loading }) => {
         onMouseLeave={onMouseLeave}
       >
         {!isMobile && (
-          <NavigationControl showCompass={false} style={{ top: 8, right: 8 }} />
+          <CustomNavigationControl />
         )}
         {startIconCoordinates && (
           <Marker
@@ -185,15 +263,20 @@ const ResultsMap = ({ stakeholders, categoryIds, toggleCategory, loading }) => {
           display="inline-flex"
           alignItems="flex-start"
           sx={{
-            overflow: "auto",
+            overflowX: "auto", 
+            overflowY: "hidden", 
             gap: "0.5rem",
             padding: isMobile ? "0 0 0.3rem 0.75rem" : "0 0 0.3rem 2.25rem",
             scrollbarWidth: "none",
+            "&::-webkit-scrollbar": {
+              display: "none", 
+            },
             top: 0,
             left: isMobile
               ? 0
               : `${listPanelLeftPostion + filterPanelLeftPostion}px`,
             transition: isMobile ? undefined : "left .5s ease-in-out",
+            maxWidth: isMobile ? "100vw": `calc(100vw - ${listPanelLeftPostion + filterPanelLeftPostion}px)`,
           }}
         >
           <AdvancedFilters

client/src/components/FoodSeeker/SearchResults/StakeholderDetails/StakeholderDetails.jsx

@@ -766,7 +766,8 @@ function normalizeSocialLink({ value, socialMedia }) {
     value === "N/A" ||
     value === "n/a" ||
     value === "n / a" ||
-    value === "N / A"
+    value === "N / A" || 
+    !value
   ) {
     return null;
   }

client/src/components/FoodSeeker/SearchResults/layouts/Desktop.jsx

@@ -3,13 +3,15 @@ import {
   useFilterPanel,
   useListPanel,
   useAppDispatch,
+  useWidget
 } from "../../../../appReducer";
 import DrawerLeftArrowButton from "../../../../icons/DrawerLeftArrowButton";
 import DrawerRightArrowButton from "../../../../icons/DrawerRightArrowButton";
 
 const DesktopLayout = ({ filters, list, map }) => {
   const isFilterPanelOpen = useFilterPanel();
   const isListPanelOpen = useListPanel();
+  const isWidget = useWidget();
   const dispatch = useAppDispatch();
 
   const toggleDrawer = (event) => {
@@ -51,7 +53,7 @@ const DesktopLayout = ({ filters, list, map }) => {
             width: "524px",
             transition: "left .5s ease-in-out",
             left: isListPanelOpen ? leftPostion : "-524px",
-            top: "120px",
+            top: isWidget ? "62px": "126px",
             height: "calc(100% - 120px)",
             zIndex: 3,
             background: "white",

client/src/components/Layout/Header.jsx

@@ -1,4 +1,4 @@
-import { AppBar, Box, Toolbar, Typography } from "@mui/material";
+import { AppBar, Alert, Box, Toolbar, Typography } from "@mui/material";
 import useLocationHook from "hooks/useLocationHook";
 import PropTypes from "prop-types";
 import { Link } from "react-router-dom";
@@ -11,7 +11,7 @@ Header.propTypes = {
 };
 
 export default function Header() {
-  const { isAuthPage } = useLocationHook();
+  const { isAuthPage, isMapPage } = useLocationHook();
   const imageType = TENANT_LOGO_URL
     ? TENANT_LOGO_URL.split(".").pop()
     : "unknown";
@@ -62,6 +62,12 @@ export default function Header() {
               />
             </a>
           </Box>
+          {isMapPage ? (
+            <Alert severity="warning">
+              Due to the LA Fires (Jan 2025), some information may be
+              out-of-date.
+            </Alert>
+          ) : null}
           <Box
             sx={{
               display: "flex",