Merge branch 'release-1.0.11' into main

hackforla · Jul 15, 2020 · 0fa6ef0 · 0fa6ef0
2 parents 1bc5752 + 88c584b
commit 0fa6ef0
Show file tree

Hide file tree

Showing 18 changed files with 333 additions and 417 deletions.
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.10",
+  "version": "1.0.11",
   "author": "Hack for LA",
   "license": "MIT",
   "private": true,

diff --git a/client/src/components/Map.js b/client/src/components/Map.js
@@ -75,6 +75,9 @@ function Map({ selectedLatitude, selectedLongitude, stakeholders }) {
                 key={`marker-${index}`}
                 longitude={stakeholder.longitude}
                 latitude={stakeholder.latitude}
+                inactive={stakeholder.inactive}
+                inactiveTemporary={stakeholder.inactiveTemporary}
+                categories={stakeholder.categories}
               />
             ))}
         {isPopupOpen && selectedStakeholder && (

diff --git a/client/src/components/Marker.js b/client/src/components/Marker.js
@@ -1,107 +1,33 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { Marker } from "react-map-gl";
-import splitMarker from "../images/mapMarker";
+import mapMarker from "../images/mapMarker";
 import {
   MEAL_PROGRAM_CATEGORY_ID,
   FOOD_PANTRY_CATEGORY_ID,
 } from "../constants/stakeholder";
 
-const style = {
-  svg: {
-    height: "100%",
-    cursor: "pointer",
-  },
-  path: ({ color }) => ({
-    fill: color,
-  }),
-  check: ({ isVerified }) => ({
-    opacity: isVerified ? 1 : 0,
-    fill: "transparent",
-    strokeWidth: 6,
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    strokeMiterlimit: 10,
-    stroke: "#ffffff",
-  }),
-  circle: ({ isVerified }) => ({
-    opacity: isVerified ? 0 : 1,
-  }),
-  container: {
-    height: 48,
-  },
-  shadow: {
-    position: "absolute",
-    borderRadius: 100,
-    height: 15,
-    width: 15,
-    top: 0,
-    left: 0,
-    background: "radial-gradient(circle, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 95%)",
-    transformOrigin: "center",
-    transform: "translate(-50%, -50%) scaleY(.5)",
-  },
-};
-
-export default function MapMarker({
+const MapMarker = ({
   latitude,
   longitude,
   onClick,
-  isVerified,
-  color,
   categories,
-}) {
-  return (
-    <Marker longitude={longitude} latitude={latitude}>
-      <div style={style.container}>
-        {categories[0].id === FOOD_PANTRY_CATEGORY_ID &&
-        categories[1] &&
-        categories[1].id === MEAL_PROGRAM_CATEGORY_ID ? (
-          splitMarker("", isVerified, false, onClick)
-        ) : (
-          <svg
-            onClick={onClick}
-            style={{
-              ...style.svg,
-              transform: `translate(-50%,-100%)`,
-            }}
-            viewBox="0 0 35 48"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <defs>
-              <clipPath id="outline">
-                <path
-                  fillRule="evenodd"
-                  clipRule="evenodd"
-                  d="M17.5,48C17.5,48,0,26.9,0,17.4C0,7.8,7.8,0.1,17.5,0.1C27.2,0.1,35,7.8,35,17.4C35,26.9,17.5,48,17.5,48z"
-                />
-              </clipPath>
-            </defs>
-            <path
-              style={style.path({ color })}
-              fillRule="evenodd"
-              clipRule="evenodd"
-              d="M17.5,48C17.5,48,0,26.9,0,17.4C0,7.8,7.8,0.1,17.5,0.1C27.2,0.1,35,7.8,35,17.4C35,26.9,17.5,48,17.5,48z"
-            />
-            <circle
-              style={style.circle({ isVerified })}
-              cx="17.6361"
-              cy="16.875"
-              r="8.5"
-              fill="white"
-            />
-            <polyline
-              style={style.check({ isVerified })}
-              points="10,18 17,28.7 34,4"
-              clipPath="url(#outline)"
-            />
-          </svg>
-        )}
-        <div style={style.shadow}></div>
-      </div>
-    </Marker>
-  );
-}
+  inactive,
+  inactiveTemporary,
+}) => (
+  <Marker longitude={longitude} latitude={latitude}>
+    {mapMarker(
+      categories[0]?.id === FOOD_PANTRY_CATEGORY_ID &&
+        categories[1]?.id === MEAL_PROGRAM_CATEGORY_ID
+        ? -1
+        : categories[0]?.id === FOOD_PANTRY_CATEGORY_ID
+        ? 0
+        : 1,
+      inactiveTemporary || inactive ? true : false,
+      onClick
+    )}
+  </Marker>
+);
 
 MapMarker.propTypes = {
   latitude: PropTypes.number,
@@ -110,3 +36,5 @@ MapMarker.propTypes = {
   isVerified: PropTypes.bool,
   color: PropTypes.string,
 };
+
+export default MapMarker;
diff --git a/client/src/components/ResultsContainer.js b/client/src/components/ResultsContainer.js
@@ -32,6 +32,7 @@ export default function ResultsContainer(props) {
   const storage = window.sessionStorage;
   const { userCoordinates, userSearch } = props;
   const { data, search } = useOrganizations();
+  const [sortedData, setSortedData] = React.useState([]);
   const classes = useStyles();
 
   const windowSize = window.innerWidth > 960 ? true : false;
@@ -42,6 +43,30 @@ export default function ResultsContainer(props) {
     mobileTest.test(navigator.userAgent) ? true : false
   );
 
+  React.useEffect(() => {
+    const sortOrganizations = (a, b) => {
+      if (
+        (a.inactive || a.inactiveTemporary) &&
+        !b.inactive &&
+        !b.inactiveTemporary
+      ) {
+        return 1;
+      } else if (
+        !a.inactive &&
+        !a.inactiveTemporary &&
+        (b.inactive || b.inactiveTemporary)
+      ) {
+        return -1;
+      } else {
+        return a.distance < b.distance ? -1 : a.distance > b.distance ? 1 : 0;
+      }
+    };
+    if (!data) {
+      return;
+    }
+    setSortedData(data.sort(sortOrganizations));
+  }, [data]);
+
   React.useEffect(() => {
     const changeInputContainerWidth = () => {
       window.innerWidth > 960 ? changeWindow(true) : changeWindow(false);
@@ -140,7 +165,7 @@ export default function ResultsContainer(props) {
         <ResultsList
           selectedStakeholder={selectedStakeholder}
           doSelectStakeholder={doSelectStakeholder}
-          stakeholders={data}
+          stakeholders={sortedData}
           setSelectedPopUp={setSelectedPopUp}
           setIsPopupOpen={setIsPopupOpen}
           isWindowWide={isWindowWide}

diff --git a/client/src/components/ResultsList.js b/client/src/components/ResultsList.js
@@ -11,20 +11,20 @@ import splitPantryMealIcon from "../images/splitPantryMealIcon";
 import {
   MEAL_PROGRAM_CATEGORY_ID,
   FOOD_PANTRY_CATEGORY_ID,
-  VERIFICATION_STATUS,
 } from "../constants/stakeholder";
 import { ORGANIZATION_COLORS, CLOSED_COLOR } from "../constants/map";
 
 const useStyles = makeStyles((theme) => ({
   list: {
     textAlign: "center",
     fontSize: "12px",
+    overflow: "scroll",
     [theme.breakpoints.up("md")]: {
-      overflow: "scroll",
       height: "100%",
     },
     [theme.breakpoints.down("sm")]: {
       order: 1,
+      height: "30em",
     },
   },
   stakeholderArrayHolder: {
@@ -267,21 +267,13 @@ const ResultsList = ({
                     : stakeholder.distance.toString().substring(0, 3)}{" "}
                   mi
                   {mapMarker(
-                    stakeholder.inactiveTemporary || stakeholder.inactive
-                      ? CLOSED_COLOR
-                      : stakeholder.categories[0].id ===
-                          FOOD_PANTRY_CATEGORY_ID &&
-                        stakeholder.categories[1] &&
-                        stakeholder.categories[1].id ===
-                          MEAL_PROGRAM_CATEGORY_ID
-                      ? ""
+                    stakeholder.categories[0].id === FOOD_PANTRY_CATEGORY_ID &&
+                      stakeholder.categories[1] &&
+                      stakeholder.categories[1].id === MEAL_PROGRAM_CATEGORY_ID
+                      ? -1
                       : stakeholder.categories[0].id === FOOD_PANTRY_CATEGORY_ID
-                      ? ORGANIZATION_COLORS[FOOD_PANTRY_CATEGORY_ID]
-                      : ORGANIZATION_COLORS[MEAL_PROGRAM_CATEGORY_ID],
-                    stakeholder.verificationStatusId ===
-                      VERIFICATION_STATUS.VERIFIED
-                      ? true
-                      : false,
+                      ? 0
+                      : 1,
                     stakeholder.inactiveTemporary || stakeholder.inactive
                       ? true
                       : false

diff --git a/client/src/components/ResultsSelectedStakeholder.js b/client/src/components/ResultsSelectedStakeholder.js
@@ -227,22 +227,13 @@ const SelectedStakeholderDisplay = ({
             : selectedStakeholder.distance.toString().substring(0, 3)}{" "}
           mi
           {mapMarker(
-            selectedStakeholder.inactiveTemporary ||
-              selectedStakeholder.inactive
-              ? CLOSED_COLOR
-              : selectedStakeholder.categories[0].id ===
-                  FOOD_PANTRY_CATEGORY_ID &&
-                selectedStakeholder.categories[1] &&
-                selectedStakeholder.categories[1].id ===
-                  MEAL_PROGRAM_CATEGORY_ID
-              ? ""
+            selectedStakeholder.categories[0].id === FOOD_PANTRY_CATEGORY_ID &&
+              selectedStakeholder.categories[1] &&
+              selectedStakeholder.categories[1].id === MEAL_PROGRAM_CATEGORY_ID
+              ? -1
               : selectedStakeholder.categories[0].id === FOOD_PANTRY_CATEGORY_ID
-              ? ORGANIZATION_COLORS[FOOD_PANTRY_CATEGORY_ID]
-              : ORGANIZATION_COLORS[MEAL_PROGRAM_CATEGORY_ID],
-            selectedStakeholder.verificationStatusId ===
-              VERIFICATION_STATUS.VERIFIED
-              ? true
-              : false,
+              ? 0
+              : 1,
             selectedStakeholder.inactiveTemporary ||
               selectedStakeholder.inactive
               ? true
@@ -317,7 +308,7 @@ const SelectedStakeholderDisplay = ({
                       ? "2nd " + hour.day_of_week
                       : hour.week_of_month === 3
                       ? "3rd " + hour.day_of_week
-                      : hour.week_of_month === 3
+                      : hour.week_of_month === 4
                       ? "4th " + hour.day_of_week
                       : hour.day_of_week}
                   </span>

diff --git a/client/src/components/StaticPages/About.js b/client/src/components/StaticPages/About.js
@@ -3,7 +3,6 @@ import React from "react";
 import aboutbg from "./assets/about-bg.png";
 import iconSpacer from "./assets/icon-spacer.svg";
 import iconSpacerBlue from "./assets/icon-spacer-blue.svg";
-import iconSpacerGray from "./assets/icon-spacer-gray.svg";
 import foodCycle from "./assets/food-cycle.png";
 import foodForward from "./assets/food-forward.png";
 import farmPeople from "./assets/farm-people.png";
@@ -12,7 +11,7 @@ import { makeStyles } from "@material-ui/core";
 
 const useStyles = makeStyles(() => ({
   outer: {
-    background: "#f0f0f0",
+    background: "#fff",
   },
   main: {
     padding: "1.5rem 0;",
@@ -44,11 +43,12 @@ const useStyles = makeStyles(() => ({
     padding: "32px",
     margin: "32px 0",
     borderRadius: "24px",
-    color: "#fff",
-    background: "#336699",
+    color: "#4d4d4d",
+    background: "#f0f0f0",
     display: "flex",
     flexDirection: "column",
     "& $h2": {
+      color: "#336699",
       flexBasis: "100",
       textTransform: "uppercase;",
       textAlign: "center",
@@ -62,11 +62,11 @@ const useStyles = makeStyles(() => ({
     padding: "32px",
     margin: "32px 0 0 0",
     borderRadius: "24px",
-    color: "#4d4d4d",
+    color: "#fff",
+    background: "#336699",
     display: "flex",
     flexDirection: "column",
     "& $h2": {
-      color: "#336699",
       flexBasis: "100",
       textTransform: "uppercase;",
       textAlign: "center",
@@ -76,14 +76,15 @@ const useStyles = makeStyles(() => ({
       marginBottom: "20px",
     },
     "& $a": {
-      color: "#4d4d4d",
+      color: "#fff",
     },
   },
   contact: {
     padding: "32px",
-    margin: "0px 0 32px 0",
+    margin: "32px 0 0 0",
     borderRadius: "24px",
     color: "#4d4d4d",
+    background: "#f0f0f0",
     display: "flex",
     flexDirection: "column",
     textAlign: "center",
@@ -111,7 +112,7 @@ const useStyles = makeStyles(() => ({
     flexWrap: "wrap",
     flexDirection: "column",
     "& $h2": {
-      color: "#4d4d4d",
+      color: "#336699",
       width: "100%",
       flexBasis: "100",
       textTransform: "uppercase;",
@@ -149,7 +150,7 @@ const About = () => {
         <div className={classes.mission}>
           <img
             alt="Our Mission"
-            src={iconSpacer}
+            src={iconSpacerBlue}
             className={classes.icon}
             height="40"
           />
@@ -200,7 +201,7 @@ const About = () => {
         <section className={classes.team}>
           <img
             alt="Our Team"
-            src={iconSpacerBlue}
+            src={iconSpacer}
             className={classes.icon}
             height="40"
           />
@@ -268,7 +269,7 @@ const About = () => {
         <section className={classes.partners}>
           <img
             alt="Our Team"
-            src={iconSpacerGray}
+            src={iconSpacerBlue}
             className={classes.icon}
             height="40"
           />