Merge branch 'release-1.0.56'

Author: entrotech

client/package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "foodoasis-client",
   "description": "React Client for Food Oasis",
-  "version": "1.0.55",
+  "version": "1.0.56",
   "author": "Hack for LA",
   "license": "GPL-2.0",
   "private": true,
@@ -19,6 +19,7 @@
   },
   "dependencies": {
     "@date-io/moment": "^1.3.13",
+    "@mapbox/geo-viewport": "^0.4.1",
     "@material-ui/core": "^4.11.1",
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.57",

client/package.json

@@ -9,7 +9,8 @@ import { makeStyles, ThemeProvider } from "@material-ui/core/styles";
 import { Grid, CssBaseline } from "@material-ui/core";
 import theme from "theme/clientTheme";
 import { logout } from "services/account-service";
-import { tenantId, defaultCoordinates } from "helpers/Configuration";
+import { tenantId, defaultViewport } from "helpers/Configuration";
+import useGeolocation from "hooks/useGeolocation";
 
 // Components
 import { UserContext } from "contexts/user-context";
@@ -48,7 +49,7 @@ import ConfirmEmail from "components/Account/ConfirmEmail";
 import FaqEdit from "components/Faq/FaqEdit";
 import FaqAdd from "components/Faq/FaqAdd";
 import Home from "components/FoodSeeker/Home";
-import Results from "components/FoodSeeker/ResultsContainer";
+import SearchResults from "components/FoodSeeker/SearchResults";
 import Suggestion from "components/FoodSeeker/Suggestion";
 import ImportFile from "components/Admin/ImportOrganizations/ImportFile";
 import adminTheme from "./theme/adminTheme";
@@ -89,19 +90,17 @@ const useStyles = makeStyles({
 
 function App() {
   const [user, setUser] = useState(null);
-  // userCoordinates is the user's location if location is enabled, or the
-  // default tenant center location if the browser location is disabled.
-  const [userCoordinates, setUserCoordinates] = useState({});
-  const [toast, setToast] = useState({ message: "" });
-  const [bgImg, setBgImg] = useState("");
+
   // origin is where the map should be centered. It is at the App level
-  // so it can be passed from leanding pages to the ResultsContainer.
-  const [origin, setOrigin] = useState({
-    latitude: defaultCoordinates.lat,
-    longitude: defaultCoordinates.lon,
-  });
+  // so it can be passed from landing pages to the SearchResults.
+  const [origin, setOrigin] = useState(defaultViewport.center);
 
-  const [browserLocation, setBrowserLocation] = useState(false);
+  // userCoordinates is the user's location if geolocation is enabled,
+  // otherwise null.
+  const userCoordinates = useGeolocation();
+
+  const [toast, setToast] = useState({ message: "" });
+  const [bgImg, setBgImg] = useState("");
 
   useEffect(() => {
     const imgNum = Math.floor(Math.random() * (21 - 1)) + 1;
@@ -129,49 +128,6 @@ function App() {
     }
   }, [user]);
 
-  useEffect(() => {
-    const fetchLocation = () => {
-      let userCoordinates = { latitude: null, longitude: null };
-      if (navigator.geolocation) {
-        navigator.geolocation.getCurrentPosition(
-          (position) => {
-            if (position) {
-              const userCoordinates = {
-                latitude: position.coords.latitude,
-                longitude: position.coords.longitude,
-              };
-              setUserCoordinates(userCoordinates);
-              setBrowserLocation(true);
-            }
-          },
-          (error) => {
-            // Ususally because user has blocked location
-            console.log(`Getting browser location failed: ${error.message}`);
-            const userCoordinates = {
-              latitude: defaultCoordinates.lat,
-              longitude: defaultCoordinates.lon,
-            };
-            setUserCoordinates(userCoordinates);
-            setBrowserLocation(false);
-          }
-        );
-      } else {
-        console.log(
-          "Browser does not support getting users location - using default location for area"
-        );
-        const userCoordinates = {
-          latitude: defaultCoordinates.lat,
-          longitude: defaultCoordinates.lon,
-        };
-        setUserCoordinates(userCoordinates);
-        setBrowserLocation(false);
-      }
-
-      return userCoordinates;
-    };
-    fetchLocation();
-  }, []);
-
   const onLogin = (user) => {
     if (user) {
       sessionStorage.setItem("user", JSON.stringify(user));
@@ -221,7 +177,6 @@ function App() {
                       userCoordinates={userCoordinates}
                       origin={origin}
                       setOrigin={setOrigin}
-                      browserLocation={browserLocation}
                     />
                   </div>
                 </div>
@@ -233,12 +188,11 @@ function App() {
               */}
               <Redirect from="/search" to="/organizations" />
               <Route path="/organizations">
-                <Results
-                  userCoordinates={userCoordinates}
+                <SearchResults
                   origin={origin}
                   setOrigin={setOrigin}
+                  userCoordinates={userCoordinates}
                   setToast={setToast}
-                  browserLocation={browserLocation}
                 />
               </Route>
               <Route path="/suggestion">

client/src/App.js

@@ -20,7 +20,7 @@ import {
 import RadioTrueFalseEither from "./ui/RadioTrueFalseEither";
 import LocationAutocomplete from "./LocationAutocomplete";
 import AccountAutocomplete from "./AccountAutocomplete";
-import { defaultCoordinates } from "../../helpers/Configuration";
+import { defaultViewport } from "../../helpers/Configuration";
 
 const useStyles = makeStyles(() => ({
   card: {
@@ -56,9 +56,11 @@ const SearchCriteria = ({
       : "custom"
   );
 
-  const [customLatitude, setCustomLatitude] = useState(defaultCoordinates.lat);
+  const [customLatitude, setCustomLatitude] = useState(
+    defaultViewport.center.latitude
+  );
   const [customLongitude, setCustomLongitude] = useState(
-    defaultCoordinates.lon
+    defaultViewport.center.longitude
   );
   const [customPlaceName, setCustomPlaceName] = useState("");
 

client/src/components/Admin/SearchCriteria.js

@@ -6,7 +6,7 @@ import { useHistory } from "react-router-dom";
 import { useOrganizationBests } from "hooks/useOrganizationBests";
 import useCategoryIds from "hooks/useCategoryIds";
 import { isMobile } from "helpers";
-import { defaultCoordinates } from "helpers/Configuration";
+import { defaultViewport } from "helpers/Configuration";
 import { DEFAULT_CATEGORIES } from "constants/stakeholder";
 
 import Filters from "./ResultsFilters";
@@ -137,12 +137,12 @@ export default function ResultsContainer({
         isInactive: "either",
         verificationStatusId: 0,
         bounds,
-        radius: defaultCoordinates.radius,
+        radius: defaultViewport.radius,
       });
 
       if (!center) {
         setInitViewport({
-          zoom: defaultCoordinates.zoom,
+          zoom: defaultViewport.zoom,
           latitude: origin.latitude,
           longitude: origin.longitude,
         });

client/src/components/FoodSeeker/Marker.js renamed to client/src/components/Deprecated/FoodSeeker/Marker.js

@@ -11,7 +11,7 @@ import { isMobile } from "helpers";
 import StakeholderPreview from "components/FoodSeeker/StakeholderPreview";
 import StakeholderDetails from "components/FoodSeeker/StakeholderDetails";
 import theme from "theme/clientTheme";
-import { defaultCoordinates } from "helpers/Configuration";
+import { defaultViewport } from "helpers/Configuration";
 
 const styles = {
   navigationControl: {
@@ -115,7 +115,7 @@ function Map({
 }) {
   const [viewport, setViewport] = useState(
     initViewport || {
-      zoom: defaultCoordinates.zoom,
+      zoom: defaultViewport.zoom,
       latitude: origin.latitude,
       longitude: origin.longitude,
       logoPosition: "top-left",

client/src/components/FoodSeeker/ResultsContainerOld.js renamed to client/src/components/Deprecated/FoodSeeker/ResultsContainerOld.js

@@ -1,18 +1,18 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useCallback } from "react";
 import { withRouter } from "react-router";
 import CssBaseline from "@material-ui/core/CssBaseline";
 import Typography from "@material-ui/core/Typography";
 import { makeStyles } from "@material-ui/core/styles";
 import Container from "@material-ui/core/Container";
 import Paper from "@material-ui/core/Paper";
 import Box from "@material-ui/core/Box";
-import Search from "components/FoodSeeker/Search";
+import SearchBar from "components/FoodSeeker/SearchBar";
 // The three tenant logos happen to be the same at the moment
 import logo from "images/foodoasis.svg";
 import logoCA from "images/foodoasis.svg";
 import logoHI from "images/foodoasis.svg";
 import { tenantId } from "helpers/Configuration";
-import * as analytics from "../../services/analytics";
+import * as analytics from "services/analytics";
 
 const useStyles = makeStyles((theme) => ({
   container: {
@@ -116,24 +116,23 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-const Home = (props) => {
+const Home = ({ origin, setOrigin, userCoordinates, match, history }) => {
   const classes = useStyles();
-  const { origin, setOrigin, userCoordinates, browserLocation } = props;
 
   useEffect(() => {
     analytics.postEvent("visitLandingPage");
   }, []);
 
-  React.useEffect(() => {
-    if (props.match.path === "/") {
+  useEffect(() => {
+    if (match.path === "/") {
       sessionStorage.clear();
     }
-  }, [props.match.path]);
+  }, [match.path]);
 
-  const selectLocation = (origin) => {
+  const selectLocation = useCallback((origin) => {
     setOrigin(origin);
-    props.history.push("/organizations");
-  };
+    history.push("/organizations");
+  }, [setOrigin, history]);
 
   return (
     <Container component="main" maxWidth="sm" className={classes.container}>
@@ -151,7 +150,7 @@ const Home = (props) => {
         <Box className={classes.formContainer}>
           <form
             className={classes.form}
-            onSubmit={() => props.history.push("/organizations")}
+            onSubmit={() => history.push("/organizations")}
           >
             {tenantId === 5 ? (
               <Typography variant={"h5"} className={classes.label}>
@@ -178,25 +177,12 @@ const Home = (props) => {
                 Locate free food in Los Angeles
               </Typography>
             )}
-
             <Box className={classes.inputContainer}>
-              <Search
+              <SearchBar
                 userCoordinates={userCoordinates}
                 setOrigin={selectLocation}
                 origin={origin}
-                browserLocation={browserLocation}
               />
-              {/* <Button
-                type="submit"
-                disabled={isDefaultOrigin}
-                variant="contained"
-                className={classes.submit}
-                startIcon={
-                  <SearchIcon fontSize="large" className={classes.searchIcon} />
-                }
-              > 
-                {""}
-              </Button>*/}
             </Box>
           </form>
         </Box>