Merge branch 'release-1.0.7'

client/package.json

@@ -1,7 +1,7 @@
 {
   "name": "food-oasis-client",
   "description": "React Client for Food Oasis",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "author": "Hack for LA",
   "license": "MIT",
   "private": true,

client/src/components/ResultsFilters.js

@@ -79,10 +79,11 @@ const useStyles = makeStyles((theme) => ({
     height: 22,
   },
   submit: {
-    height: "42px",
+    height: "40px",
     minWidth: "25px",
     backgroundColor: "#BCE76D",
-    borderRadius: "0 4px 4px 0",
+    marginLeft: "0.5em",
+    borderRadius: "0 6px 6px 0",
     boxShadow: "none",
     "& .MuiButton-startIcon": {
       marginRight: 0,
@@ -156,7 +157,7 @@ const ResultsFilters = ({
           ? VERIFICATION_STATUS.VERIFIED
           : 0,
       });
-      console.log(storage);
+      // console.log(storage);
       if (origin.locationName && origin.latitude && origin.longitude)
         storage.origin = JSON.stringify({
           locationName: origin.locationName,
@@ -166,6 +167,11 @@ const ResultsFilters = ({
       if (categoryIds.length) storage.categoryIds = JSON.stringify(categoryIds);
       storage.radius = JSON.stringify(radius);
       storage.verified = JSON.stringify(isVerifiedSelected);
+      setViewport({
+        zoom: viewPortHash[radius],
+        latitude: origin.latitude,
+        longitude: origin.longitude,
+      });
     },
     [
       search,
@@ -177,6 +183,7 @@ const ResultsFilters = ({
       radius,
       categoryIds,
       isVerifiedSelected,
+      setViewport,
     ]
   );
 

client/src/components/ResultsSelectedStakeholder.js

@@ -143,6 +143,37 @@ const SelectedStakeholderDisplay = ({
 }) => {
   const classes = useStyles();
 
+  const dayOfWeek = (dayOfWeekString) => {
+    switch (dayOfWeekString.toLowerCase()) {
+      case "sun":
+        return 1;
+      case "mon":
+        return 2;
+      case "tue":
+        return 3;
+      case "wed":
+        return 4;
+      case "thu":
+        return 5;
+      case "fri":
+        return 6;
+      default:
+        return 7;
+    }
+  };
+
+  const hoursSort = (h1, h2) => {
+    if (h1.week_of_month !== h2.week_of_month) {
+      return h1.week_of_month < h2.week_of_month ? -1 : 1;
+    }
+    const h1dow = dayOfWeek(h1.day_of_week);
+    const h2dow = dayOfWeek(h2.day_of_week);
+    if (h1dow !== h2dow) {
+      return h1dow < h2dow ? -1 : 1;
+    }
+    return h1.open < h2.open ? -1 : 1;
+  };
+
   const standardTime = (timeStr) => {
     if (timeStr) {
       if (parseInt(timeStr.substring(0, 2)) === 12) {
@@ -262,7 +293,8 @@ const SelectedStakeholderDisplay = ({
           )}
         </div>
       </div>
-      {selectedStakeholder.submittedDate ? (
+      {selectedStakeholder.verificationStatusId ===
+      VERIFICATION_STATUS.VERIFIED ? (
         <p
           style={{
             color:
@@ -274,8 +306,12 @@ const SelectedStakeholderDisplay = ({
                 : "#CC3333",
           }}
         >
-          Data Verified on{" "}
-          {selectedStakeholder.submittedDate.format("MMM Do, YYYY")}
+          Data updated on{" "}
+          {selectedStakeholder.approvedDate
+            ? selectedStakeholder.approvedDate.format("MMM Do, YYYY")
+            : selectedStakeholder.modifiedDate
+            ? selectedStakeholder.modifiedDate.format("MMM Do, YYYY")
+            : selectedStakeholder.createdDate.format("MMM Do, YYYY")}
         </p>
       ) : null}
       <a
@@ -304,20 +340,37 @@ const SelectedStakeholderDisplay = ({
           Directions
         </div>
       </a>
-      <h2 className={classes.title}>Hours</h2>
-      <div className={classes.hoursContainer}>
-        {selectedStakeholder.hours.map((hour) => (
-          <div
-            key={JSON.stringify(hour)}
-            className={classes.singleHourContainer}
-          >
-            <span>{hour.day_of_week}</span>
-            <span>
-              {standardTime(hour.open)}-{standardTime(hour.close)}
-            </span>
+      {selectedStakeholder.hours ? (
+        <>
+          <h2 className={classes.title}>Hours</h2>
+          <div className={classes.hoursContainer}>
+            {selectedStakeholder.hours.sort(hoursSort).map((hour) => (
+              <div
+                key={JSON.stringify(hour)}
+                className={classes.singleHourContainer}
+              >
+                <span>
+                  {hour.week_of_month === 5
+                    ? "Last " + hour.day_of_week
+                    : hour.week_of_month === 1
+                    ? "1st " + hour.day_of_week
+                    : hour.week_of_month === 2
+                    ? "2nd " + hour.day_of_week
+                    : hour.week_of_month === 3
+                    ? "3rd " + hour.day_of_week
+                    : hour.week_of_month === 3
+                    ? "4th " + hour.day_of_week
+                    : hour.day_of_week}
+                </span>
+                <span>
+                  {standardTime(hour.open)}-{standardTime(hour.close)}
+                </span>
+              </div>
+            ))}
           </div>
-        ))}
-      </div>
+        </>
+      ) : null}
+
       <h2 className={classes.title}>Phone</h2>
       {selectedStakeholder.phone ? (
         <span className={classes.fontSize}>{selectedStakeholder.phone}</span>
@@ -339,28 +392,32 @@ const SelectedStakeholderDisplay = ({
       ) : (
         <span className={classes.fontSize}>No special requirements</span>
       )}
+
       <h2 className={classes.title}>Languages</h2>
-      {selectedStakeholder.requirements ? (
+      {selectedStakeholder.languages ? (
         <span className={classes.fontSize}>
           {selectedStakeholder.languages}
         </span>
       ) : (
         <span className={classes.fontSize}>No information on languages.</span>
       )}
+
       <h2 className={classes.title}>Notes</h2>
-      {selectedStakeholder.requirements ? (
+      {selectedStakeholder.notes ? (
         <span className={classes.fontSize}>{selectedStakeholder.notes}</span>
       ) : (
         <span className={classes.fontSize}>No notes to display.</span>
       )}
+
       <h2 className={classes.title}>Covid Notes</h2>
-      {selectedStakeholder.requirements ? (
+      {selectedStakeholder.covidNotes ? (
         <span className={classes.fontSize}>
           {selectedStakeholder.covidNotes}
         </span>
       ) : (
         <span className={classes.fontSize}>No covid notes to display.</span>
       )}
+
       {selectedStakeholder.website ? (
         <React.Fragment>
           <h2 className={classes.title}>Website</h2>
@@ -374,6 +431,7 @@ const SelectedStakeholderDisplay = ({
           </a>
         </React.Fragment>
       ) : null}
+
       {selectedStakeholder.services ? (
         <React.Fragment>
           <h2 className={classes.title}>Services</h2>
@@ -382,12 +440,14 @@ const SelectedStakeholderDisplay = ({
           </span>
         </React.Fragment>
       ) : null}
+
       {selectedStakeholder.items ? (
         <React.Fragment>
           <h2 className={classes.title}>Items Available</h2>
           <span className={classes.fontSize}>{selectedStakeholder.items}</span>
         </React.Fragment>
       ) : null}
+
       {selectedStakeholder.facebook || selectedStakeholder.instagram ? (
         <React.Fragment>
           <h2 className={classes.title}>Social Media</h2>

client/src/components/Search.js

@@ -21,7 +21,8 @@ const useStyles = makeStyles(() => ({
   },
   address: {
     backgroundColor: "#fff",
-    borderRadius: "4px 0 0 4px",
+    borderRadius: "6px",
+    cornerRadius: "6px",
     height: 41,
 
     "& .MuiOutlinedInput-root": {
@@ -104,7 +105,7 @@ export default function Search(props) {
         variant="outlined"
         margin="none"
         fullWidth
-        placeholder="Enter an address, neighborhood, ZIP"
+        placeholder="Search by address, neighborhood, or zip code"
         name="address"
         size="small"
         autoFocus

client/src/containers/Home/index.js

@@ -22,20 +22,26 @@ const useStyles = makeStyles((theme) => ({
     display: "flex",
     flexDirection: "column",
     alignItems: "center",
+    borderRadius: "24px",
   },
   logoContainer: {
-    margin: "20px 0",
+    margin: "20px 0 10px 0",
+    textAlign: "center",
   },
   header: {
     marginBottom: theme.spacing(1),
   },
   subtitle: {
-    marginBottom: theme.spacing(3),
+    marginTop: theme.spacing(1),
+    fontWeight: "500",
+    fontSize: "20px",
+    marginBottom: ".25em",
+    color: "darygray",
   },
   label: {
     textAlign: "center",
-    fontWeight: 600,
     marginTop: 10,
+    marginBottom: "0.5em",
     padding: "0 3vw",
     [theme.breakpoints.down("xs")]: {
       padding: 0,
@@ -49,6 +55,7 @@ const useStyles = makeStyles((theme) => ({
     width: "100%",
     backgroundColor: "#336699",
     padding: "10px 35px",
+    borderRadius: "24px",
     color: "#fff",
     [theme.breakpoints.down("xs")]: {
       padding: "15px",
@@ -58,6 +65,7 @@ const useStyles = makeStyles((theme) => ({
     display: "flex",
     alignItems: "flex-start",
     justifyContent: "center",
+    marginBottom: "1em",
   },
   address: {
     marginTop: theme.spacing(1),
@@ -75,7 +83,8 @@ const useStyles = makeStyles((theme) => ({
     height: "42px",
     minWidth: "25px",
     backgroundColor: "#BCE76D",
-    borderRadius: "0 4px 4px 0",
+    borderRadius: "0 6px 6px 0",
+    marginLeft: ".5em",
     boxShadow: "none",
     "& .MuiButton-startIcon": {
       marginRight: 0,
@@ -92,10 +101,11 @@ const useStyles = makeStyles((theme) => ({
   logo: {
     width: 161,
     height: "auto",
+    textAlign: "center",
   },
   searchIcon: {
-    width: 22,
-    height: 22,
+    width: 32,
+    height: 32,
   },
 }));
 
@@ -109,12 +119,18 @@ const Home = (props) => {
       <Paper className={classes.paper}>
         <Box className={classes.logoContainer}>
           <img src={logo} alt="logo" className={classes.logo} />
+          <Typography className={classes.subtitle}>
+            Your free food directory in Los Angeles
+          </Typography>
         </Box>
         <Box className={classes.formContainer}>
           <form
             className={classes.form}
             onSubmit={() => props.history.push("/organizations")}
           >
+            <Typography variant={"h5"} className={classes.label}>
+              Locate free food resources in Los Angeles
+            </Typography>
             <Box className={classes.inputContainer}>
               <Search
                 userCoordinates={userCoordinates}
@@ -133,9 +149,6 @@ const Home = (props) => {
                 {""}
               </Button>
             </Box>
-            <Typography className={classes.label}>
-              Locate free food resources in Los Angeles
-            </Typography>
           </form>
         </Box>
       </Paper>

client/src/styles/root.css

@@ -1,11 +1,9 @@
-@import url('https://fonts.googleapis.com/css?family=Open+Sans|Reem+Kufi&display=swap');
+@import url("https://fonts.googleapis.com/css?family=Open+Sans|Reem+Kufi&display=swap");
 
 body {
   margin: 0;
   font-size: 16px;
-  font-family: -apple-system, BlinkMacSystemFont, "Reem Kufi", "Segoe UI",
-    "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
-    "Helvetica Neue", sans-serif;
+  font-family: "Helvetica Neue", Helvetica, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -28,4 +26,4 @@ code {
   padding-top: 4px;
   font-weight: bold;
   padding-right: 8px;
-}
+}

client/src/theme/materialUI.js

@@ -22,7 +22,7 @@ const theme = createMuiTheme({
     },
   },
   typography: {
-    fontFamily: '"Verdana", "Helvetica Neue", Helvetica, sans-serif;',
+    fontFamily: '"Helvetica Neue", Helvetica, sans-serif;',
   },
   overrides: {
     MuiButton: {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "foodoasis",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "author": "Hack for LA",
   "description": "Web API Server for Food Oasis",
   "main": "server.js",