Merge branch 'release-1.0.33' into main

hackforla · Dec 21, 2020 · 5833582 · 5833582
2 parents 81018fc + 289c563
commit 5833582
Show file tree

Hide file tree

Showing 12 changed files with 135 additions and 122 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": "food-oasis-client",
   "description": "React Client for Food Oasis",
-  "version": "1.0.32",
+  "version": "1.0.33",
   "author": "Hack for LA",
   "license": "GPL-2.0",
   "private": true,

diff --git a/client/src/components/Results/ResultsContainer.js b/client/src/components/Results/ResultsContainer.js
@@ -32,6 +32,7 @@ export default function ResultsContainer({
   // Component state
   const { data, search } = useOrganizationBests();
   const [sortedData, setSortedData] = useState([]);
+  const [status, setStatus] = useState("initial"); // 'initial', 'loading', 'loaded'
   const classes = useStyles();
 
   const [selectedStakeholder, onSelectStakeholder] = useState(null);
@@ -77,6 +78,7 @@ export default function ResultsContainer({
   // Component effects
 
   useEffect(() => {
+    setStatus("loading");
     const sortOrganizations = (a, b) => {
       if (
         (a.inactive || a.inactiveTemporary) &&
@@ -98,10 +100,12 @@ export default function ResultsContainer({
       return;
     }
     setSortedData(data.sort(sortOrganizations));
+    setStatus("loaded");
   }, [data]);
 
   const handleSearch = useCallback(
     (e, center, bounds) => {
+      setStatus("loading");
       if (e) e.preventDefault();
       search({
         latitude:
@@ -124,6 +128,7 @@ export default function ResultsContainer({
           longitude: origin.longitude,
         });
       doSelectStakeholder(null);
+      setStatus("loaded");
     },
     [
       search,
@@ -158,6 +163,8 @@ export default function ResultsContainer({
             doSelectStakeholder={doSelectStakeholder}
             stakeholders={sortedData}
             setToast={setToast}
+            status={status}
+            handleReset={handleSearch}
           />
         )}
         {(!mobileView || (mobileView && isMapView)) && (

diff --git a/client/src/components/Results/ResultsList.js b/client/src/components/Results/ResultsList.js
@@ -1,7 +1,7 @@
 import React, { useRef, useState, useEffect } from "react";
 import StakeholderDetails from "components/Stakeholder/StakeholderDetails";
 import PropTypes from "prop-types";
-import { Grid } from "@material-ui/core";
+import { Button, CircularProgress, Grid } from "@material-ui/core";
 import { makeStyles } from "@material-ui/core/styles";
 import StakeholderPreview from "components/Stakeholder/StakeholderPreview";
 import { isMobile } from "helpers";
@@ -33,13 +33,21 @@ const useStyles = makeStyles((theme) => ({
     width: "100%",
     borderBottom: " .2em solid #f1f1f1",
   },
+  emptyResult: {
+    padding: "1em 0",
+    display: "flex",
+    flexDirection: "column",
+    alignContent: "center",
+  },
 }));
 
 const ResultsList = ({
   doSelectStakeholder,
   selectedStakeholder,
   stakeholders,
   setToast,
+  status,
+  handleReset,
 }) => {
   const classes = useStyles();
   const listRef = useRef();
@@ -69,6 +77,24 @@ const ResultsList = ({
 
   return (
     <Grid item xs={12} md={4} className={classes.list} ref={listRef}>
+      {status === "loading" && (
+        <div className={classes.emptyResult}>
+          <CircularProgress />
+        </div>
+      )}
+      {status === "loaded" && stakeholders.length === 0 && (
+        <div className={classes.emptyResult}>
+          <p>Sorry, we don&apos;t have any results for this area.</p>
+          <Button
+            onClick={handleReset}
+            variant="contained"
+            color="primary"
+            disableElevation
+          >
+            Click here to reset the search
+          </Button>
+        </div>
+      )}
       {stakeholders && selectedStakeholder && !selectedStakeholder.inactive ? (
         <StakeholderDetails
           doSelectStakeholder={selectStakeholder}
@@ -98,6 +124,8 @@ ResultsList.propTypes = {
   stakeholders: PropTypes.arrayOf(PropTypes.object),
   doSelectStakeholder: PropTypes.func,
   setToast: PropTypes.func,
+  status: PropTypes.string,
+  handleReset: PropTypes.func,
 };
 
 export default ResultsList;
diff --git a/client/src/components/Stakeholder/StakeholderDetails.js b/client/src/components/Stakeholder/StakeholderDetails.js
@@ -226,6 +226,17 @@ const StakeholderDetails = ({
               {category.name}
             </em>
           ))}
+          <div className={classes.label}>
+            <em
+              key={selectedStakeholder.id}
+              style={{
+                alignSelf: "flex-start",
+                margin: "0 0.25em 0.25em 0",
+              }}
+            >
+              {selectedStakeholder.foodTypes}
+            </em>
+          </div>
           <div className={classes.label}>
             {selectedStakeholder.inactiveTemporary ||
             selectedStakeholder.inactive ? (

diff --git a/client/src/components/Stakeholder/StakeholderPreview.js b/client/src/components/Stakeholder/StakeholderPreview.js
@@ -187,6 +187,17 @@ const StakeholderPreview = ({ stakeholder, doSelectStakeholder }) => {
             </em>
           ))}
         </div>
+        <div className={classes.label}>
+          <em
+            key={stakeholder.id}
+            style={{
+              alignSelf: "flex-start",
+              margin: "0 0.25em 0.5em 0",
+            }}
+          >
+            {stakeholder.foodTypes}
+          </em>
+        </div>
         <div className={classes.label}>
           {stakeholder.inactiveTemporary || stakeholder.inactive ? (
             <em className={classes.closedLabel}>

diff --git a/client/src/components/StaticPages/Donate.js b/client/src/components/StaticPages/Donate.js
@@ -177,8 +177,7 @@ const Donate = () => {
             Angeles.
           </p>
           <a
-            // href="//www.codeforamerica.org/donate"
-            href=" https://svbinthecommunity.benevity.org/community/fundraiser/1842"
+            href="//www.codeforamerica.org/donate"
             target="_blank"
             rel="noopener noreferrer"
             className={classes.btnOutline}

diff --git a/client/src/components/StaticPagesCA/Donate.js b/client/src/components/StaticPagesCA/Donate.js
@@ -179,8 +179,7 @@ const Donate = () => {
             Your donation will get earmarked for Food Oasis.
           </p>
           <a
-            // href="//www.codeforamerica.org/donate"
-            href="https://svbinthecommunity.benevity.org/community/fundraiser/1842"
+            href="//www.codeforamerica.org/donate"
             target="_blank"
             rel="noopener noreferrer"
             className={classes.btnOutline}

diff --git a/client/src/components/StaticPagesHI/Donate.js b/client/src/components/StaticPagesHI/Donate.js
@@ -177,8 +177,7 @@ const Donate = () => {
             donation will get earmarked for Food Oasis Hawaii
           </p>
           <a
-            // href="//www.codeforamerica.org/donate"
-            href=" https://svbinthecommunity.benevity.org/community/fundraiser/1842"
+            href="//www.codeforamerica.org/donate"
             target="_blank"
             rel="noopener noreferrer"
             className={classes.btnOutline}

diff --git a/client/src/components/Verification/OrganizationEdit.js b/client/src/components/Verification/OrganizationEdit.js
@@ -202,6 +202,49 @@ const emptyOrganization = {
   foodMeat: false,
 };
 
+const FOOD_TYPES = [
+  {
+    name: "foodBakery",
+    label: "Baked Goods",
+  },
+  {
+    name: "foodDryGoods",
+    label: "Dry Goods",
+  },
+  {
+    name: "foodProduce",
+    label: "Produce",
+  },
+  {
+    name: "foodDairy",
+    label: "Dairy",
+  },
+  {
+    name: "foodPrepared",
+    label: "Prepared Food",
+  },
+  {
+    name: "foodMeat",
+    label: "Meat",
+  },
+];
+
+const CheckboxWithLabel = ({ name, label, checked, onChange, ...props }) => (
+  <Grid item xs={12} sm={4}>
+    <FormControlLabel
+      control={
+        <Checkbox
+          name={name}
+          checked={checked}
+          onChange={onChange}
+          {...props}
+        />
+      }
+      label={label}
+    />
+  </Grid>
+);
+
 const OrganizationEdit = (props) => {
   const { classes, setToast, match, user, history } = props;
   const editId = match.params.id;
@@ -1111,7 +1154,13 @@ const OrganizationEdit = (props) => {
                   <Grid item xs={12}>
                     <Typography>Details for Food Seekers to See</Typography>
                   </Grid>
-                  <Grid item container justify="space-between" xs={12}>
+                  <Grid
+                    item
+                    container
+                    justify="space-between"
+                    xs={12}
+                    alignItems="center"
+                  >
                     <Grid item xs={6}>
                       <Typography>Food Types</Typography>
                     </Grid>
@@ -1133,118 +1182,28 @@ const OrganizationEdit = (props) => {
                             size="medium"
                           />
                         }
-                        label="Confirm Food Types"
+                        label="confirm"
                       />
                     </Grid>
                   </Grid>
-                  <Grid item xs={12} sm={4}>
-                    <FormControlLabel
-                      control={
-                        <Checkbox
-                          margin="normal"
-                          name="foodBakery"
-                          label="Bakery"
-                          value={values.foodBakery}
-                          checked={values.foodBakery}
-                          onChange={() =>
-                            setFieldValue("foodBakery", !values.foodBakery)
-                          }
-                          onBlur={handleBlur}
-                        />
-                      }
-                      label="Baked Goods"
-                    />
-                  </Grid>
-                  <Grid item xs={12} sm={4}>
-                    <FormControlLabel
-                      control={
-                        <Checkbox
-                          margin="normal"
-                          name="foodDryGoods"
-                          label="Dry Goods"
-                          value={values.foodDryGoods}
-                          checked={values.foodDryGoods}
-                          onChange={() =>
-                            setFieldValue("foodDryGoods", !values.foodDryGoods)
-                          }
-                          onBlur={handleBlur}
-                        />
-                      }
-                      label="Dry Goods"
-                    />
-                  </Grid>
-
-                  <Grid item xs={12} sm={4}>
-                    <FormControlLabel
-                      control={
-                        <Checkbox
-                          margin="normal"
-                          name="foodProduce"
-                          label="Produce"
-                          value={values.foodProduce}
-                          checked={values.foodProduce}
-                          onChange={() =>
-                            setFieldValue("foodProduce", !values.foodProduce)
-                          }
-                          onBlur={handleBlur}
-                        />
-                      }
-                      label="Produce"
-                    />
-                  </Grid>
-                  <Grid item xs={12} sm={4}>
-                    <FormControlLabel
-                      control={
-                        <Checkbox
-                          margin="normal"
-                          name="foodDairy"
-                          label="Dairy"
-                          value={values.foodDairy}
-                          checked={values.foodDairy}
-                          onChange={() =>
-                            setFieldValue("foodDairy", !values.foodDairy)
-                          }
-                          onBlur={handleBlur}
-                        />
-                      }
-                      label="Dairy"
-                    />
-                  </Grid>
-                  <Grid item xs={12} sm={4}>
-                    <FormControlLabel
-                      control={
-                        <Checkbox
-                          margin="normal"
-                          name="foodPrepared"
-                          label="Prepared Food"
-                          value={values.foodPrepared}
-                          checked={values.foodPrepared}
-                          onChange={() =>
-                            setFieldValue("foodPrepared", !values.foodPrepared)
-                          }
-                          onBlur={handleBlur}
-                        />
-                      }
-                      label="Prepared Food"
-                    />
-                  </Grid>
-                  <Grid item xs={12} sm={4}>
-                    <FormControlLabel
-                      control={
-                        <Checkbox
-                          margin="normal"
-                          name="foodMeat"
-                          label="Meat"
-                          value={values.foodMeat}
-                          checked={values.foodMeat}
-                          onChange={() =>
-                            setFieldValue("foodMeat", !values.foodMeat)
-                          }
+                  <Grid
+                    container
+                    alignItems="center"
+                    style={{ maxWidth: "600px" }}
+                  >
+                    {FOOD_TYPES.map(({ name, label }) => {
+                      const checked = values[name];
+                      return (
+                        <CheckboxWithLabel
+                          key={name}
+                          name={name}
+                          label={label}
+                          checked={checked}
+                          onChange={() => setFieldValue(name, !checked)}
                           onBlur={handleBlur}
                         />
-                      }
-                      label="Meat"
-                    />
+                      );
+                    })}
                   </Grid>
                 </Grid>
                 <Grid item xs={12}>