From 0959ddd6bc28f0d1e494d23fdc3a75cedff4580f Mon Sep 17 00:00:00 2001
From: John Darragh <darragh@entrotech.net>
Date: Thu, 16 Jan 2025 17:09:48 -0800
Subject: [PATCH] 2317 fire warning (#2325)

* Add LA Fire warning

* Implement temporary warning message
---
 client/src/App.jsx                            | 31 ++-----------------
 client/src/components/FoodSeeker/Home.jsx     |  5 +++
 client/src/components/Layout/Header.jsx       | 10 ++++--
 client/src/components/Layout/WidgetFooter.jsx | 21 ++++++++-----
 client/src/hooks/useLocationHook.js           |  4 ++-
 5 files changed, 31 insertions(+), 40 deletions(-)

diff --git a/client/src/App.jsx b/client/src/App.jsx
index 65bac828d..cfdabf6ca 100644
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@@ -1,5 +1,5 @@
-import { useEffect, useState } from "react";
-import { CssBaseline, Alert, Snackbar, Stack } from "@mui/material";
+import { useEffect } from "react";
+import { CssBaseline } from "@mui/material";
 import SurveySnackbar from "./components/UI/SurveySnackbar";
 import { SiteProvider } from "./contexts/siteContext";
 import { ToasterProvider } from "contexts/toasterContext";
@@ -36,8 +36,6 @@ function App() {
                 />
                 <MapProvider>
                   <Router>
-                    <LAFireWarning />
-
                     <AppRoutes />
                     {hasUserFeedbackSuveyFeatureFlag && <SurveySnackbar />}
                   </Router>
@@ -52,28 +50,3 @@ function App() {
 }
 
 export default App;
-
-function LAFireWarning() {
-  const [snackbarOpen, setSnackbarOpen] = useState(true);
-
-  return (
-    <Stack spacing={2} sx={{ maxWidth: 700 }}>
-      <Snackbar
-        open={snackbarOpen}
-        onClose={() => setSnackbarOpen(false)}
-        anchorOrigin={{
-          vertical: "bottom",
-          horizontal: "right",
-        }}
-      >
-        <Alert
-          onClose={() => setSnackbarOpen(false)}
-          severity="warning"
-          sx={{ width: "100%" }}
-        >
-          Due to the LA Fires (Jan 2025), some information may be out-of-date.
-        </Alert>
-      </Snackbar>
-    </Stack>
-  );
-}
diff --git a/client/src/components/FoodSeeker/Home.jsx b/client/src/components/FoodSeeker/Home.jsx
index 50043c964..bf01f54e1 100644
--- a/client/src/components/FoodSeeker/Home.jsx
+++ b/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",
diff --git a/client/src/components/Layout/Header.jsx b/client/src/components/Layout/Header.jsx
index d1ff518b2..592a54bdd 100644
--- a/client/src/components/Layout/Header.jsx
+++ b/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",
diff --git a/client/src/components/Layout/WidgetFooter.jsx b/client/src/components/Layout/WidgetFooter.jsx
index c7c45838b..da389dec3 100644
--- a/client/src/components/Layout/WidgetFooter.jsx
+++ b/client/src/components/Layout/WidgetFooter.jsx
@@ -1,4 +1,4 @@
-import { Box } from "@mui/material";
+import { Alert, Box } from "@mui/material";
 import { useSiteContext } from "contexts/siteContext";
 import PropTypes from "prop-types";
 import { useEffect, useState } from "react";
@@ -50,7 +50,7 @@ function WidgetFooterSection(props) {
         >
           {captionText}
         </Box>
-         
+
         {maintainers.map((maintainer) => {
           const logoMaintainerPath = maintainer.path;
           const imageType = logoMaintainerPath
@@ -194,12 +194,17 @@ function WidgetFooter() {
         boxShadow: "none",
       })}
     >
-      <WidgetFooterSection
-        name="Food Oasis"
-        logoPath={TENANT_LOGO_URL}
-        url={`${window.location.origin}`}
-        alt="Food Oasis Logo"
-      />
+      <div style={{ display: "flex", flexDirection: "row" }}>
+        <WidgetFooterSection
+          name="Food Oasis"
+          logoPath={TENANT_LOGO_URL}
+          url={`${window.location.origin}`}
+          alt="Food Oasis Logo"
+        />
+        <Alert severity="warning">
+          Due to the LA Fires (Jan 2025), some information may be out-of-date.
+        </Alert>
+      </div>
       <WidgetFooterSection
         type="maintainer"
         maintainers={maintainers}
diff --git a/client/src/hooks/useLocationHook.js b/client/src/hooks/useLocationHook.js
index 5009e3af1..8ff0fd3c4 100644
--- a/client/src/hooks/useLocationHook.js
+++ b/client/src/hooks/useLocationHook.js
@@ -4,6 +4,7 @@ import { matchPath, useLocation } from "react-router-dom";
 export default function useLocationHook() {
   const [isHomePage, setIsHomePage] = useState(false);
   const [isAuthPage, setIsAuthPage] = useState(false);
+  const [isMapPage, setIsMapPage] = useState(false);
   const location = useLocation();
   const AUTHROUTES = [
     "/admin/login",
@@ -25,7 +26,8 @@ export default function useLocationHook() {
   useEffect(() => {
     setIsHomePage(location.pathname === "/");
     setIsAuthPage(match && match.isExact ? true : false);
+    setIsMapPage(location.pathname.toLowerCase().includes("organizations"));
   }, [location, match]);
 
-  return { isHomePage, isAuthPage };
+  return { isHomePage, isAuthPage, isMapPage };
 }