Merge branch 'release-1.0.50'

Author: entrotech

client/package.json

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

client/src/App.js

@@ -35,6 +35,10 @@ import FaqPDX from "components/StaticPagesPDX/Faq";
 import DonateMCK from "components/StaticPagesMCK/Donate";
 import AboutMCK from "components/StaticPagesMCK/About";
 import FaqMCK from "components/StaticPagesMCK/Faq";
+import DonateSB from "components/StaticPagesSB/Donate";
+import AboutSB from "components/StaticPagesSB/About";
+import FaqSB from "components/StaticPagesSB/Faq";
+
 import Resources from "components/Layout/Resources";
 import Register from "components/Account/Register";
 import Login from "components/Account/Login";
@@ -48,6 +52,7 @@ import Results from "components/FoodSeeker/ResultsContainer";
 import Suggestion from "components/FoodSeeker/Suggestion";
 import ImportFile from "components/Admin/ImportOrganizations/ImportFile";
 import adminTheme from "./theme/adminTheme";
+import * as analytics from "../src/services/analytics";
 
 const useStyles = makeStyles({
   app: () => ({
@@ -104,6 +109,11 @@ function App() {
     setBgImg(backgroundImage);
   }, []);
 
+  useEffect(() => {
+    const result = analytics.postEvent("visitAppComponent");
+    console.error(result);
+  }, []);
+
   useEffect(() => {
     const storedJson = sessionStorage.getItem("user");
     const userJson = JSON.stringify(user);
@@ -112,7 +122,11 @@ function App() {
     } else if (userJson === storedJson) {
       return;
     } else {
-      setUser(JSON.parse(storedJson));
+      const user = JSON.parse(storedJson);
+      if (user) {
+        analytics.identify(user.id);
+      }
+      setUser(user);
     }
   }, [user]);
 
@@ -292,7 +306,9 @@ function App() {
                 <ResetPassword setToast={setToast} />
               </Route>
               <Route path="/donate">
-                {tenantId === 5 ? (
+                {tenantId === 6 ? (
+                  <DonateSB />
+                ) : tenantId === 5 ? (
                   <DonateMCK />
                 ) : tenantId === 4 ? (
                   <DonatePDX />
@@ -305,7 +321,9 @@ function App() {
                 )}
               </Route>
               <Route path="/about">
-                {tenantId === 5 ? (
+                {tenantId === 6 ? (
+                  <AboutSB />
+                ) : tenantId === 5 ? (
                   <AboutMCK />
                 ) : tenantId === 4 ? (
                   <AboutPDX />
@@ -318,7 +336,9 @@ function App() {
                 )}
               </Route>
               <Route exact path="/faqs">
-                {tenantId === 5 ? (
+                {tenantId === 6 ? (
+                  <FaqSB />
+                ) : tenantId === 5 ? (
                   <FaqMCK />
                 ) : tenantId === 4 ? (
                   <FaqPDX />

client/src/components/Account/Login.js

@@ -15,6 +15,7 @@ import {
 import { Formik } from "formik";
 import * as Yup from "yup";
 import * as accountService from "services/account-service";
+import * as analytics from "../../services/analytics";
 
 import LockOutlinedIcon from "@material-ui/icons/LockOutlined";
 
@@ -88,6 +89,7 @@ const LoginForm = (props) => {
                     values.password
                   );
                   if (response.isSuccess) {
+                    analytics.identify(response.user.id);
                     setUser(response.user);
                     setToast({
                       message: "Login successful.",

client/src/components/Admin/ImportOrganizations/ImportFile.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useCallback } from "react";
 import { Route, withRouter } from "react-router-dom";
 import PropTypes from "prop-types";
 import { Typography } from "@material-ui/core";
@@ -100,6 +100,8 @@ const ImportFile = (props) => {
 
   const handleCancel = () => setImportData(initialImportData);
 
+  const resetData = useCallback(() => setImportData(initialImportData), []);
+
   useEffect(() => {
     if (importData.data) {
       history.push("/organizationimport/review");
@@ -137,6 +139,7 @@ const ImportFile = (props) => {
                 handleImportAction={handleImportAction}
                 handleImportDialog={handleImportDialog}
                 handleCancel={handleCancel}
+                resetData={resetData}
               />
             )}
           />

client/src/components/Admin/ImportOrganizations/ImportFileTable.js

@@ -39,14 +39,14 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 const ImportFileTable = (props) => {
-  const { data, handleImportAction, handleCancel } = props;
+  const { data, handleImportAction, handleCancel, resetData} = props;
   const classes = useStyles();
 
   useEffect(() => {
     return () => {
-      handleCancel();
-    };
-  }, []);
+      resetData();
+    }
+  }, [resetData],);
 
   return (
     <section className={classes.section}>

client/src/components/Admin/VerificationAdmin.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback } from "react";
+import React, { useState, useEffect } from "react";
 import PropTypes from "prop-types";
 import { withRouter, Redirect } from "react-router-dom";
 import { CssBaseline, Dialog, Typography } from "@material-ui/core";
@@ -149,12 +149,9 @@ function VerificationAdmin(props) {
     data: stakeholders,
     loading: stakeholdersLoading,
     error: stakeholdersError,
-    search: stakeholderSearch,
+    searchCallback,
   } = useOrganizations();
 
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const searchCallback = useCallback(stakeholderSearch, []);
-
   useEffect(() => {
     const execute = async () => {
       const criteriaString = sessionStorage.getItem(CRITERIA_TOKEN);

client/src/components/Admin/VerificationDashboard.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback } from "react";
+import React, { useState, useEffect } from "react";
 import { withRouter, Redirect } from "react-router-dom";
 import { CssBaseline, Typography } from "@material-ui/core";
 import { makeStyles } from "@material-ui/core/styles";
@@ -80,12 +80,9 @@ function VerificationDashboard(props) {
     data: stakeholders,
     loading: stakeholdersLoading,
     error: stakeholdersError,
-    search: stakeholderSearch,
+    searchCallback,
   } = useOrganizations();
 
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const searchCallback = useCallback(stakeholderSearch, []);
-
   useEffect(() => {
     const execute = async () => {
       if (!user) return;

client/src/components/FoodSeeker/Home.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { withRouter } from "react-router";
 import CssBaseline from "@material-ui/core/CssBaseline";
 import Typography from "@material-ui/core/Typography";
@@ -119,6 +119,10 @@ const Home = (props) => {
   const classes = useStyles();
   const { origin, setOrigin, userCoordinates, browserLocation } = props;
 
+  useEffect(() => {
+    window.stormly("event", "visitLandingPage");
+  }, []);
+
   React.useEffect(() => {
     if (props.match.path === "/") {
       sessionStorage.clear();
@@ -164,6 +168,10 @@ const Home = (props) => {
               <Typography variant={"h5"} className={classes.label}>
                 Locate free food in California
               </Typography>
+            ) : tenantId === 6 ? (
+              <Typography variant={"h5"} className={classes.label}>
+                Locate free food in Santa Barbara
+              </Typography>
             ) : (
               <Typography variant={"h5"} className={classes.label}>
                 Locate free food in Los Angeles

client/src/components/FoodSeeker/ResultsContainer.js

@@ -65,13 +65,6 @@ export default function ResultsContainer({
   const doSelectStakeholder = useCallback(
     (stakeholder) => {
       if (stakeholder) {
-        // Tell analytics that stakeholder is selected
-        window.dataLayer.push({
-          event: "viewDetail",
-          action: "click",
-          value: stakeholder.id,
-          name: stakeholder.name,
-        });
         //Update url history
         const name = stakeholder.name.toLowerCase().replaceAll(" ", "_");
         history.push(`/organizations?org=${name}`);
@@ -83,6 +76,8 @@ export default function ResultsContainer({
     [history]
   );
 
+  // Need to get this working to navigate to a specific organization, which may
+  // not be listed in the previously fetched data collection
   // useEffect(() => {
   //   if (location.search.includes("?org=") && data) {
   //     const org = location.search.replace("?org=", "").replaceAll("_", " ");

client/src/components/FoodSeeker/ResultsContainerOld.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState, useCallback } from "react";
 import { makeStyles } from "@material-ui/core/styles";
 import { Grid } from "@material-ui/core";
-import { useHistory, useLocation } from "react-router-dom";
+import { useHistory } from "react-router-dom";
 
 import { useOrganizationBests } from "hooks/useOrganizationBests";
 import useCategoryIds from "hooks/useCategoryIds";
@@ -36,7 +36,6 @@ export default function ResultsContainer({
   const [status, setStatus] = useState("initial"); // 'initial', 'loading', 'loaded'
   const classes = useStyles();
   const history = useHistory();
-  const location = useLocation();
 
   const [selectedStakeholder, onSelectStakeholder] = useState(null);
   const [isMapView, setIsMapView] = useState(true);
@@ -73,22 +72,22 @@ export default function ResultsContainer({
     [setInitViewport, history]
   );
 
-  useEffect(() => {
-    if (location.search.includes("?org=") && data) {
-      const org = location.search.replace("?org=", "").replaceAll("_", " ");
-      const stakeholder = data.find((s) => s.name.toLowerCase() === org);
-      if (stakeholder) {
-        onSelectStakeholder(stakeholder);
-        setInitViewport({
-          latitude: stakeholder.latitude,
-          longitude: stakeholder.longitude,
-          zoom: 13,
-        });
-      } else {
-        onSelectStakeholder(null);
-      }
-    }
-  }, [data, location.search]);
+  // useEffect(() => {
+  //   if (location.search.includes("?org=") && data) {
+  //     const org = location.search.replace("?org=", "").replaceAll("_", " ");
+  //     const stakeholder = data.find((s) => s.name.toLowerCase() === org);
+  //     if (stakeholder) {
+  //       onSelectStakeholder(stakeholder);
+  //       setViewport({
+  //         ...viewport,
+  //         latitude: stakeholder.latitude,
+  //         longitude: stakeholder.longitude,
+  //       });
+  //     } else {
+  //       onSelectStakeholder(null);
+  //     }
+  //   }
+  // }, [data, location.search, viewport]);
 
   const switchResultsView = () => {
     doSelectStakeholder();
@@ -196,6 +195,8 @@ export default function ResultsContainer({
             selectedStakeholder={selectedStakeholder}
             categoryIds={categoryIds}
             setToast={setToast}
+            viewport={initViewport}
+            setViewport={setInitViewport}
             initViewport={initViewport}
           />
         )}