Merge branch 'release-1.0.68'

hackforla · Aug 21, 2022 · 993c7be · 993c7be
2 parents 6268d0e + 30dc7c8
commit 993c7be
Show file tree

Hide file tree

Showing 31 changed files with 1,005 additions and 351 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.67",
+  "version": "1.0.68",
   "author": "Hack for LA",
   "license": "GPL-2.0",
   "private": true,

diff --git a/client/src/App.js b/client/src/App.js
@@ -48,6 +48,7 @@ import { SiteProvider } from "contexts/siteContext";
 const useStyles = makeStyles({
   app: () => ({
     color: "black",
+    backgroundColor: "#fff",
     margin: "0",
     height: "100%",
     //overflowY: "scroll",

diff --git a/client/src/appReducer.js b/client/src/appReducer.js
@@ -63,6 +63,15 @@ function neighborhoodReducer(state, action) {
   }
 }
 
+function widgetReducer(state, action) {
+  switch (action.type) {
+    case "WIDGET":
+      return action.isWidget;
+    default:
+      return state;
+  }
+}
+
 export function appReducer(state, action) {
   return {
     defaultCoordinate: defaultCoordinatesReducer(
@@ -80,6 +89,9 @@ export function appReducer(state, action) {
       action
     ),
     neighborhood: neighborhoodReducer(state.neighborhood, action),
+    // isWidget === true indicates that app is implemented as an
+    // iframe widget hosted in a third-party application.
+    isWidget: widgetReducer(state.isWidget, action),
   };
 }
 
@@ -90,6 +102,7 @@ export function getInitialState() {
     selectedOrganization: null,
     userCoordinates: null,
     neighborhood: null,
+    isWidget: false,
   };
 }
 
@@ -147,3 +160,8 @@ export function useNeighborhood() {
   const { neighborhood } = useAppState();
   return neighborhood;
 }
+
+export function useWidget() {
+  const { isWidget } = useAppState();
+  return isWidget;
+}
diff --git a/client/src/components/FoodSeeker/AddressDropDown.js b/client/src/components/FoodSeeker/AddressDropDown.js
@@ -10,6 +10,7 @@ import {
   useSearchCoordinates,
   useAppDispatch,
   useUserCoordinates,
+  useWidget,
 } from "../../appReducer";
 import { useHistory } from "react-router";
 import * as analytics from "services/analytics";
@@ -38,7 +39,7 @@ const useStyles = makeStyles((theme) => ({
   },
   address: {
     backgroundColor: "#F0F0F0",
-    borderRadius: "4px",
+    borderRadius: "14px",
     cornerRadius: "4px",
     height: 40,
     "& .MuiInputLabel-outlined": {
@@ -62,6 +63,7 @@ const useStyles = makeStyles((theme) => ({
 export default function AddressDropDown({ showSearchIcon }) {
   const classes = useStyles();
   const searchCoordinates = useSearchCoordinates();
+  const isWidget = useWidget();
   const [inputVal, setInputVal] = useState(
     searchCoordinates?.locationName || ""
   );
@@ -104,7 +106,7 @@ export default function AddressDropDown({ showSearchIcon }) {
         type: "SEARCH_COORDINATES_UPDATED",
         coordinates: { latitude, longitude, locationName: result.place_name },
       });
-      history.push("/organizations");
+      history.push(isWidget ? "/widget" : "/organizations");
 
       analytics.postEvent("changeOrigin", {});
     }
@@ -126,7 +128,7 @@ export default function AddressDropDown({ showSearchIcon }) {
               <InputAdornment
                 position="end"
                 onClick={() => {
-                  history.push("/organizations");
+                  history.push(isWidget ? "/widget" : "/organizations");
                 }}
                 className={classes.searchIconCont}
               >

diff --git a/client/src/components/FoodSeeker/Home.js b/client/src/components/FoodSeeker/Home.js
@@ -33,21 +33,35 @@ const useStyles = makeStyles((theme) => ({
     flexDirection: "column",
     justifyContent: "center",
     alignItems: "center",
+    [theme.breakpoints.down("xs")]: {
+      height: "100%",
+    },
   },
   container: {
+    maxWidth: "650px",
     [theme.breakpoints.down("xs")]: {
       padding: 0,
+      height: "100%",
     },
   },
   paper: {
     margin: "0 auto",
+    padding: "1.5rem 0.5rem 3rem 0.5rem",
     display: "flex",
     flexDirection: "column",
     alignItems: "center",
     borderRadius: "24px",
+    boxShadow: "0px 5px 8px 0px rgb(0, 0, 0, 40%)",
+    [theme.breakpoints.down("xs")]: {
+      height: "100%",
+      borderRadius: "0",
+      paddingTop: "10rem",
+      justifyContent: "start",
+      boxShadow: "none",
+    },
   },
   logoContainer: {
-    margin: "20px 0 10px 0",
+    margin: "30px 0 0px 0",
     textAlign: "center",
   },
   header: {
@@ -56,9 +70,9 @@ const useStyles = makeStyles((theme) => ({
   subtitle: {
     marginTop: theme.spacing(1),
     fontWeight: "500",
-    fontSize: "20px",
-    marginBottom: ".25em",
-    color: "#4D4D4D",
+    fontSize: "18.72px",
+    marginBottom: "0.5em",
+    color: "#000000",
     textAlign: "center",
   },
   label: {
@@ -80,19 +94,19 @@ const useStyles = makeStyles((theme) => ({
   },
   formContainer: {
     width: "100%",
-    backgroundColor: "#336699",
-    padding: "10px 35px",
-    borderRadius: "24px",
-    color: "#fff",
-    [theme.breakpoints.down("xs")]: {
-      padding: "15px",
+    padding: "5px 15px 15px 15px",
+    color: "#000000",
+    [theme.breakpoints.up("sm")]: {
+      paddingInline: "90px",
     },
   },
   inputContainer: {
     display: "flex",
     alignItems: "flex-start",
     justifyContent: "center",
     marginBottom: "1em",
+    color: "#4D4D4D",
+    fontSize: "16px",
   },
   address: {
     marginTop: theme.spacing(1),
@@ -126,30 +140,39 @@ const useStyles = makeStyles((theme) => ({
     },
   },
   logo: {
-    width: "30%",
+    width: "60%",
     height: "auto",
     textAlign: "center",
+    [theme.breakpoints.up("sm")]: {
+      width: "40%",
+    },
   },
   searchIcon: {
     width: 32,
     height: 32,
   },
   learnMore: {
-    fontSize: "19px",
-    color: "white",
+    fontSize: "16px",
+    color: "#4D4D4D",
     textDecoration: "underline",
+    textUnderlineOffset: "8px",
     "&:visited": {
-      color: "white",
+      color: "#4D4D4D",
     },
     "&:hover": {
-      color: "#BCE76D",
+      color: "#31C658",
+    },
+    [theme.breakpoints.up("sm")]: {
+      fontSize: "19px",
     },
   },
   locationBtn: {
-    backgroundColor: "#4CAF50",
+    backgroundColor: "#336699",
     color: "white",
+    letterSpacing: "1px",
+    fontWeight: "500",
     "&:hover": {
-      backgroundColor: "#439846",
+      backgroundColor: "#0A3865",
     },
   },
 }));
@@ -205,7 +228,7 @@ const Home = () => {
 
   return (
     <div className={classes.homeWrapper} style={{ backgroundImage: bgImg }}>
-      <Container component="main" maxWidth="sm" className={classes.container}>
+      <Container component="main" className={classes.container}>
         <CssBaseline />
         <Paper className={classes.paper}>
           <Box className={classes.logoContainer}>
@@ -220,7 +243,9 @@ const Home = () => {
               className={classes.form}
               onSubmit={() => history.push("/organizations")}
             >
-              <Typography>{taglineText}</Typography>
+              <Typography className={classes.subtitle}>
+                {taglineText}
+              </Typography>
               <Box className={classes.inputContainer}>
                 <AddressDropDown />
               </Box>

diff --git a/client/src/components/FoodSeeker/SearchResults/ResultsMap/ResultsMap.js b/client/src/components/FoodSeeker/SearchResults/ResultsMap/ResultsMap.js
@@ -36,6 +36,7 @@ import {
   useUserCoordinates,
 } from "../../../../appReducer";
 import "mapbox-gl/dist/mapbox-gl.css";
+import { useHistory, useLocation } from "react-router-dom";
 
 const ResultsMap = (
   {
@@ -55,6 +56,8 @@ const ResultsMap = (
   const [markersLoaded, setMarkersLoaded] = useState(false);
   const searchCoordinates = useSearchCoordinates();
   const selectedOrganization = useSelectedOrganization();
+  const history = useHistory();
+  const location = useLocation();
 
   const longitude =
     searchCoordinates?.longitude ||
@@ -104,8 +107,21 @@ const ResultsMap = (
           type: "SELECTED_ORGANIZATION_UPDATED",
           organization: selectedOrganization,
         });
+        analytics.postEvent("selectOrganization", {
+          id: selectedOrganization.id,
+          name: selectedOrganization.name,
+        });
+
+        //Update url history
+        const name = selectedOrganization.name
+          .toLowerCase()
+          .replaceAll(" ", "_");
+        history.push(
+          `${location.pathname}?latitude=${selectedOrganization.latitude}&longitude=${selectedOrganization.longitude}&org=${name}&id=${selectedOrganization.id}`
+        );
       }
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [stakeholders, dispatch]
   );
 

diff --git a/client/src/components/FoodSeeker/SearchResults/SearchResults.js b/client/src/components/FoodSeeker/SearchResults/SearchResults.js
@@ -1,5 +1,5 @@
 import React, { useState, useCallback, useEffect, useRef } from "react";
-import { useHistory, useLocation } from "react-router-dom";
+import { useLocation } from "react-router-dom";
 import useOrganizationBests from "hooks/useOrganizationBests";
 import useCategoryIds from "hooks/useCategoryIds";
 import useBreakpoints from "hooks/useBreakpoints";
@@ -29,7 +29,6 @@ const SearchResults = () => {
   const searchCoordinates = useSearchCoordinates();
   const dispatch = useAppDispatch();
   const selectedOrganization = useSelectedOrganization();
-  const history = useHistory();
   const location = useLocation();
   const neighborhoodId = new URLSearchParams(location.search).get(
     "neighborhood_id"
@@ -45,7 +44,18 @@ const SearchResults = () => {
     latitude = searchCoordinates?.latitude || DEFAULT_COORDINATES.latitude;
   }
 
-  // IF neighborhood_id is part of query string, get neighborhood info,
+  // 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(() => {
+    if (location.pathname.toLowerCase() === "/widget") {
+      dispatch({
+        type: "WIDGET",
+        isWidget: true,
+      });
+    }
+  }, [dispatch, location.pathname]);
+
+  // If neighborhood_id is part of query string, get neighborhood info,
   // stored neighborhood info in reducer, and start with map centered
   // on neighborhood centroid coordinates.
   useEffect(() => {
@@ -70,21 +80,6 @@ const SearchResults = () => {
     execute();
   }, [neighborhoodId, getGeoJSONById, dispatch]);
 
-  React.useEffect(() => {
-    if (!selectedOrganization) return;
-
-    analytics.postEvent("selectOrganization", {
-      id: selectedOrganization.id,
-      name: selectedOrganization.name,
-    });
-
-    //Update url history
-    const name = selectedOrganization.name.toLowerCase().replaceAll(" ", "_");
-    history.push(
-      `${location.pathname}?latitude=${selectedOrganization.latitude}&longitude=${selectedOrganization.longitude}&org=${name}&id=${selectedOrganization.id}`
-    );
-  }, [selectedOrganization, history, location.pathname]);
-
   useEffect(() => {
     const { zoom, dimensions } = mapRef.current.getViewport();
     const criteria = {
@@ -102,13 +97,21 @@ const SearchResults = () => {
   }, [categoryIds, search, neighborhoodId, longitude, latitude]);
 
   useEffect(() => {
-    if (!searchCoordinates && stakeholders) {
+    if (!location.search) {
+      dispatch({ type: "RESET_SELECTED_ORGANIZATION", organization: null });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [location.search]);
+
+  useEffect(() => {
+    if (!searchCoordinates && stakeholders && organizationId) {
       const organization = stakeholders.find(
         (stakeholder) => stakeholder.id === Number(organizationId)
       );
       dispatch({ type: "SELECTED_ORGANIZATION_UPDATED", organization });
     }
-  }, [stakeholders, searchCoordinates, dispatch, organizationId]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [stakeholders]);
 
   const searchMapArea = useCallback(() => {
     const { center } = mapRef.current.getViewport();