Merge branch 'release-1.0.83'

hackforla · Aug 16, 2024 · d84f07b · d84f07b
2 parents 098fe69 + 5940c3b
commit d84f07b
Show file tree

Hide file tree

Showing 28 changed files with 1,493 additions and 1,105 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.82",
+  "version": "1.0.83",
   "author": "Hack for LA",
   "license": "GPL-2.0",
   "private": true,
@@ -20,7 +20,7 @@
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "@mapbox/geo-viewport": "^0.4.1",
-    "@mui/icons-material": "^5.11.0",
+    "@mui/icons-material": "^5.16.4",
     "@mui/lab": "^5.0.0-alpha.113",
     "@mui/material": "^5.11.1",
     "@mui/x-data-grid": "^5.17.20",

diff --git a/client/src/App.js b/client/src/App.js
@@ -10,6 +10,7 @@ import * as analytics from "../src/services/analytics";
 import { AppStateProvider } from "./appReducer";
 import SEO from "./components/SEO";
 import AppRoutes from "./Routes";
+import { MapProvider } from "react-map-gl";
 
 function App() {
   useEffect(() => {
@@ -29,9 +30,11 @@ function App() {
                   url={window.origin}
                   description="Food Oasis is a non-profit, volunteer-run directory of free food resources in the Los Angeles area."
                 />
-                <Router>
-                  <AppRoutes />
-                </Router>
+                <MapProvider>
+                  <Router>
+                    <AppRoutes />
+                  </Router>
+                </MapProvider>
               </ThemeProvider>
             </UserProvider>
           </ToasterProvider>

diff --git a/client/src/components/Admin/OrganizationEdit.js b/client/src/components/Admin/OrganizationEdit.js
@@ -51,6 +51,12 @@ const validationSchema = Yup.object().shape({
   longitude: Yup.number().required("Longitude is required").min(-180).max(180),
   email: Yup.string().email("Invalid email address format"),
   hours: Yup.array().of(HourSchema),
+  twitter: Yup.string()
+    .matches(
+      /^https?:\/\/(www\.)?(twitter\.com|x\.com)\/.*/,
+      "Invalid URL, e.g. 'https://twitter.com/ or https://x.com/'"
+    )
+    .required("Full Twitter/X URL is required."),
   selectedCategoryIds: Yup.array().min(
     1,
     "You must select at least one category"

diff --git a/client/src/components/Admin/OrganizationEdit/ContactDetails.js b/client/src/components/Admin/OrganizationEdit/ContactDetails.js
@@ -64,7 +64,13 @@ export default function ContactDetails({
         </Grid>
         <Grid item sm={6} xs={12}>
           <div>
-            <Label id="twitter" label="Twitter" />
+            <Label
+              id="twitter"
+              label="Twitter"
+              tooltipTitle="URL must start with 'https://twitter.com/ or https://x.com/'"
+              href={values.twitter}
+            />
+
             <TextField
               id="twitter"
               name="twitter"

diff --git a/client/src/components/Admin/Suggestions.js b/client/src/components/Admin/Suggestions.js
@@ -6,6 +6,8 @@ import LocationCityIcon from "@mui/icons-material/LocationCity";
 import PersonIcon from "@mui/icons-material/Person";
 import PhoneIcon from "@mui/icons-material/Phone";
 import PhoneIphoneIcon from "@mui/icons-material/PhoneIphone";
+import AccessTimeIcon from "@mui/icons-material/AccessTime";
+import CategoryIcon from "@mui/icons-material/Category";
 import {
   Avatar,
   Box,
@@ -43,8 +45,9 @@ import Textarea from "./ui/Textarea";
 
 const columns = [
   { id: "name", label: "Name", minWidth: 100 },
-  { id: "notes", label: "Suggestion", minWidth: 10 },
+  { id: "notes", label: "Notes", minWidth: 10 },
   { id: "suggestionStatusId", label: "Status", minWidth: 10 },
+  { id: "formType", label: "Type", minWidth: 10 },
 ];
 
 const FILTERS = [
@@ -97,7 +100,7 @@ function Suggestions() {
     }
   });
 
-  const handleChangePage = (event, newPage) => {
+  const handleChangePage = (_event, newPage) => {
     setPage(newPage);
   };
 
@@ -345,11 +348,29 @@ function Suggestions() {
                         icon={<LocationCityIcon />}
                       />
                       <Divider variant="inset" component="li" />
+                      <DisplayText
+                        label="Email"
+                        value={activeOrg.email}
+                        icon={<EmailIcon />}
+                      />
+                      <Divider variant="inset" component="li" />
                       <DisplayText
                         label="Phone"
                         value={activeOrg.phone}
                         icon={<PhoneIcon />}
                       />
+                      <Divider variant="inset" component="li" />
+                      <DisplayText
+                        label="Category"
+                        value={activeOrg.category}
+                        icon={<CategoryIcon />}
+                      />
+                      <Divider variant="inset" component="li" />
+                      <DisplayText
+                        label="Hours"
+                        value={activeOrg.hours}
+                        icon={<AccessTimeIcon />}
+                      />
                     </List>
                     <Divider style={{ margin: "1em 0" }} />
                     <div>
@@ -367,7 +388,7 @@ function Suggestions() {
                     </div>
                     <List>
                       <DisplayText
-                        label="Suggestion"
+                        label="Tipster Notes"
                         value={activeOrg.notes}
                         icon={<AssessmentIcon />}
                       />

diff --git a/client/src/components/Admin/ui/Label.js b/client/src/components/Admin/ui/Label.js
@@ -1,16 +1,19 @@
 import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
+import LaunchIcon from "@mui/icons-material/Launch";
 import {
   ClickAwayListener,
   IconButton,
   InputLabel,
   Stack,
   Tooltip,
   Typography,
+  Button,
+  Link,
 } from "@mui/material";
 import { useState } from "react";
 import { tooltipHover } from "theme/palette";
 
-const Label = ({ id, label, tooltipTitle }) => {
+const Label = ({ id, label, tooltipTitle, href }) => {
   const [tooltipOpen, setTooltipOpen] = useState(false);
 
   const handleToolTipToggle = () => {
@@ -19,24 +22,46 @@ const Label = ({ id, label, tooltipTitle }) => {
 
   return (
     <InputLabel htmlFor={id}>
-      <Stack direction="row" alignItems="center" height="40px">
-        <Typography fontWeight={600}>{label}</Typography>
-        {tooltipTitle && (
-          <ClickAwayListener onClickAway={() => setTooltipOpen(false)}>
-            <Tooltip
-              title={tooltipTitle}
-              open={tooltipOpen}
-              arrow
-              placement="top-start"
-            >
-              <IconButton
-                sx={{ "&:hover": { backgroundColor: tooltipHover } }}
-                onClick={() => handleToolTipToggle()}
+      <Stack
+        direction="row"
+        alignItems="center"
+        spacing={1}
+        height="40px"
+        justifyContent="space-between"
+      >
+        <Stack direction="row" alignItems="center">
+          <Typography fontWeight={600}>{label}</Typography>
+          {tooltipTitle && (
+            <ClickAwayListener onClickAway={() => setTooltipOpen(false)}>
+              <Tooltip
+                title={tooltipTitle}
+                open={tooltipOpen}
+                arrow
+                placement="top-start"
               >
-                <InfoOutlinedIcon />
-              </IconButton>
-            </Tooltip>
-          </ClickAwayListener>
+                <IconButton
+                  sx={{ "&:hover": { backgroundColor: tooltipHover } }}
+                  onClick={() => handleToolTipToggle()}
+                >
+                  <InfoOutlinedIcon />
+                </IconButton>
+              </Tooltip>
+            </ClickAwayListener>
+          )}
+        </Stack>
+
+        {href && (
+          <Button
+            variant="text"
+            size="small"
+            sx={{ textTransform: "none" }}
+            rel="noopener"
+            component={Link}
+            href={href}
+            startIcon={<LaunchIcon />}
+          >
+            Go To Link
+          </Button>
         )}
       </Stack>
     </InputLabel>

diff --git a/client/src/components/FoodSeeker/AddressDropDown.js b/client/src/components/FoodSeeker/AddressDropDown.js
@@ -14,6 +14,7 @@ import {
   useSearchCoordinates,
   useWidget,
 } from "../../appReducer";
+import { useMapbox } from "../../hooks/useMapbox";
 
 export default function AddressDropDown({ autoFocus }) {
   const searchCoordinates = useSearchCoordinates();
@@ -25,6 +26,7 @@ export default function AddressDropDown({ autoFocus }) {
   const { mapboxResults, fetchMapboxResults } = useMapboxGeocoder();
   const dispatch = useAppDispatch();
   const navigate = useNavigate();
+  const { flyTo } = useMapbox();
 
   const handleInputChange = (delta) => {
     if (!delta) return;
@@ -44,6 +46,10 @@ export default function AddressDropDown({ autoFocus }) {
     if (result) {
       const [longitude, latitude] = result.center;
 
+      flyTo({
+        latitude,
+        longitude,
+      });
       dispatch({
         type: "SEARCH_COORDINATES_UPDATED",
         coordinates: { latitude, longitude, locationName: result.place_name },

diff --git a/client/src/components/FoodSeeker/SearchResults/ResultsFilters/ResultsFilters.js b/client/src/components/FoodSeeker/SearchResults/ResultsFilters/ResultsFilters.js
@@ -18,13 +18,13 @@ import {
   useSearchCoordinates,
   useUserCoordinates,
 } from "../../../../appReducer";
+import { useMapbox } from "../../../../hooks/useMapbox";
 
 const ResultsFilters = ({
   categoryIds,
   toggleCategory,
   showList,
   toggleShowList,
-  handleFlyTo,
 }) => {
   const isMealsSelected = categoryIds.indexOf(MEAL_PROGRAM_CATEGORY_ID) >= 0;
   const isPantrySelected = categoryIds.indexOf(FOOD_PANTRY_CATEGORY_ID) >= 0;
@@ -36,6 +36,7 @@ const ResultsFilters = ({
   const locationPermission = useLocationPermission();
   const [error, setError] = useState("");
   const hasAdvancedFilterFeatureFlag = useFeatureFlag("advancedFilter");
+  const { flyTo } = useMapbox();
 
   useEffect(() => {
     if (error && locationPermission === "granted") {
@@ -58,7 +59,7 @@ const ResultsFilters = ({
       // depending on the network speed, it might take a bit before the screen recenters to user location
       await getUserLocation();
       startIconCoordinates &&
-        handleFlyTo({
+        flyTo({
           longitude: startIconCoordinates.longitude,
           latitude: searchCoordinates.latitude,
         });

diff --git a/client/src/components/FoodSeeker/SearchResults/ResultsList/ResultsList.js b/client/src/components/FoodSeeker/SearchResults/ResultsList/ResultsList.js
@@ -18,12 +18,14 @@ import {
 import StakeholderDetails from "../StakeholderDetails/StakeholderDetails";
 import StakeholderPreview from "../StakeholderPreview/StakeholderPreview";
 import useBreakpoints from "hooks/useBreakpoints";
+import { useMapbox } from "hooks/useMapbox";
 
-const ResultsList = ({ stakeholders, loading, handleReset, handleFlyTo }) => {
+const ResultsList = ({ stakeholders, loading, handleReset }) => {
   const selectedOrganization = useSelectedOrganization();
   const [topMostIndex, setTopMostIndex] = useState(0);
   const { isDesktop } = useBreakpoints();
   const dispatch = useAppDispatch();
+  const { flyTo } = useMapbox();
 
   useEffect(() => {
     analytics.postEvent("showList");
@@ -89,7 +91,7 @@ const ResultsList = ({ stakeholders, loading, handleReset, handleFlyTo }) => {
                         stakeholder={stakeholder}
                         onSelect={() => {
                           setTopMostIndex(index);
-                          handleFlyTo({
+                          flyTo({
                             longitude: stakeholder.longitude,
                             latitude: stakeholder.latitude,
                           });