Merge branch 'release-1.0.6'

hackforla · Jun 23, 2020 · dc13b5e · dc13b5e
2 parents 6d1349e + f0078d1
commit dc13b5e
Show file tree

Hide file tree

Showing 21 changed files with 340 additions and 196 deletions.
diff --git a/app/routes/account-router.js b/app/routes/account-router.js
@@ -14,7 +14,11 @@ router.post("/confirmRegister", accountController.confirmRegister);
 
 router.post("/forgotPassword", accountController.forgotPassword);
 router.post("/resetPassword", accountController.resetPassword);
-router.post("/setPermissions", accountController.setPermissions);
+router.post(
+  "/setPermissions",
+  jwtSession.validateUser,
+  accountController.setPermissions
+);
 
 router.post("/login/:email?", accountController.login, jwtSession.login);
 router.get("/logout", (req, res) => {

diff --git a/app/routes/category-router.js b/app/routes/category-router.js
@@ -1,10 +1,12 @@
 const router = require("express").Router();
 const categoryController = require("../controllers/category-controller");
 
+const jwtSession = require("../../middleware/jwt-session");
+
 router.get("/", categoryController.getAll);
 router.get("/:id", categoryController.getById);
-router.post("/", categoryController.post);
-router.put("/:id", categoryController.put);
-router.delete("/:id", categoryController.remove);
+router.post("/", jwtSession.validateUser, categoryController.post);
+router.put("/:id", jwtSession.validateUser, categoryController.put);
+router.delete("/:id", jwtSession.validateUser, categoryController.remove);
 
 module.exports = router;
diff --git a/app/routes/faq-router.js b/app/routes/faq-router.js
@@ -1,12 +1,13 @@
 const router = require("express").Router();
 const faqController = require("../controllers/faq-controller");
+const jwtSession = require("../../middleware/jwt-session");
 
 router.get("/", faqController.getAll);
 router.get("/language/:language", faqController.getAllByLanguage);
 router.get("/faq/:id", faqController.getById);
 router.get("/identifier/:identifier", faqController.getByIdentifier);
-router.post("/", faqController.post);
-router.put("/faq/:id", faqController.put);
-router.delete("/", faqController.remove);
+router.post("/", jwtSession.validateUser, faqController.post);
+router.put("/faq/:id", jwtSession.validateUser, faqController.put);
+router.delete("/", jwtSession.validateUser, faqController.remove);
 
 module.exports = router;
diff --git a/app/routes/load-router.js b/app/routes/load-router.js
@@ -1,8 +1,13 @@
 const router = require("express").Router();
 const loadController = require("../controllers/load-controller");
+const jwtSession = require("../../middleware/jwt-session");
 
-router.get("/lapl-food-resources", loadController.getLaplFoodResources);
+router.get(
+  "/lapl-food-resources",
+  jwtSession.validateUser,
+  loadController.getLaplFoodResources
+);
 
-router.get("/load-211", loadController.get211);
+router.get("/load-211", jwtSession.validateUser, loadController.get211);
 
 module.exports = router;
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.5",
+  "version": "1.0.6",
   "author": "Hack for LA",
   "license": "MIT",
   "private": true,

diff --git a/client/src/App.js b/client/src/App.js
@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
 import { ThemeProvider } from "@material-ui/core/styles";
+import { Grid } from "@material-ui/core";
 import theme from "theme/materialUI";
 import { UserContext } from "components/user-context";
 import Toast from "components/Toast";
@@ -144,7 +145,9 @@ function App() {
       <ThemeProvider theme={theme}>
         <Router>
           <div className={classes.app}>
-            <Header user={user} setUser={onLogin} setToast={setToast} />
+            <Grid item>
+              <Header user={user} setUser={onLogin} setToast={setToast} />
+            </Grid>
             <Switch className={classes.mainContent}>
               <Route exact path="/">
                 <div
@@ -159,10 +162,12 @@ function App() {
                 </div>
               </Route>
               <Route path="/organizations">
-                <ResultsContainer
-                  userCoordinates={userCoordinates}
-                  userSearch={origin}
-                />
+                <Grid item>
+                  <ResultsContainer
+                    userCoordinates={userCoordinates}
+                    userSearch={origin}
+                  />
+                </Grid>
               </Route>
               <Route path="/stakeholders">
                 <StakeholdersContainer
@@ -240,7 +245,9 @@ function App() {
                 <ResetPassword setToast={setToast} />
               </Route>
             </Switch>
-            <Footer userCoordinates={userCoordinates} />
+            <Grid item>
+              <Footer userCoordinates={userCoordinates} />
+            </Grid>
             <Toast toast={toast} setToast={setToast} />
           </div>
         </Router>

diff --git a/client/src/components/Footer.js b/client/src/components/Footer.js
@@ -6,7 +6,6 @@ import useLocationHook from "hooks/useLocationHook";
 
 const useStyles = makeStyles((theme) => ({
   footer: {
-    height: "50px",
     backgroundColor: "#FAEBD7",
     flexGrow: 0,
     padding: "0.75em",

diff --git a/client/src/components/Header.js b/client/src/components/Header.js
@@ -65,7 +65,9 @@ export default function Header(props) {
 
   const styles = isHomePage ? homePageStyles : defaultStyles;
   const classes = useStyles(styles);
-  const taglineText = isHomePage ? "" : "Hunger Free Los Angeles";
+  const taglineText = isHomePage
+    ? ""
+    : "Locate free food resources in Los Angeles";
 
   return (
     <>

diff --git a/client/src/components/LocationAutocomplete.js b/client/src/components/LocationAutocomplete.js
@@ -62,7 +62,6 @@ const LocationAutocomplete = (props) => {
               </Typography>
               <Typography>{`${result.attributes.Addr_type}`}</Typography>
             </Grid>
-            {/* <pre>{JSON.stringify(result, null, 2)}</pre> */}
           </div>
         ))
       ) : (

diff --git a/client/src/components/ResultsContainer.js b/client/src/components/ResultsContainer.js
@@ -18,10 +18,6 @@ const useStyles = makeStyles((theme) => ({
     fontSize: "12px",
     border: "1px solid blue",
   },
-  container: {
-    display: "flex",
-    flexDirection: "column",
-  },
   list: {
     textAlign: "center",
     fontSize: "12px",
@@ -30,7 +26,7 @@ const useStyles = makeStyles((theme) => ({
   map: {
     textAlign: "center",
     fontSize: "12px",
-    // maxWidth: "100%",
+    maxWidth: "100%",
     flexGrow: 1,
   },
 }));
@@ -71,7 +67,7 @@ export default function ResultsContainer(props) {
       ? userSearch.locationName
       : storage.origin
       ? JSON.parse(storage.origin).locationName
-      : null,
+      : "",
     latitude: userSearch
       ? userSearch.latitude
       : storage.origin
@@ -99,6 +95,22 @@ export default function ResultsContainer(props) {
   const [selectedPopUp, setSelectedPopUp] = React.useState(null);
   const [isPopupOpen, setIsPopupOpen] = React.useState(false);
 
+  const viewPortHash = {
+    1: 13.5,
+    2: 12.5,
+    3: 12,
+    5: 11,
+    10: 10,
+    20: 9,
+    50: 8,
+  };
+
+  const [viewport, setViewport] = React.useState({
+    zoom: viewPortHash[radius],
+    latitude: origin.latitude || JSON.parse(storage.origin).latitude,
+    longitude: origin.longitude || JSON.parse(storage.origin).longitude,
+  });
+
   const topLevelProps = {
     radius,
     setRadius,
@@ -113,53 +125,54 @@ export default function ResultsContainer(props) {
   };
 
   return (
-    <div className={classes.container}>
-      <ResultsFilters
-        {...topLevelProps}
-        data={data}
-        search={search}
-        isWindow960orLess={isWindow960orLess}
-      />
-      <Grid container wrap="wrap-reverse">
-        <Grid
-          item
-          xs={12}
-          md={4}
-          className={classes.list}
-          style={{ height: isWindow960orLess ? "55em" : "" }}
-        >
-          <ResultsList
-            selectedStakeholder={selectedStakeholder}
-            doSelectStakeholder={doSelectStakeholder}
-            stakeholders={data}
-            setSelectedPopUp={setSelectedPopUp}
-            setIsPopupOpen={setIsPopupOpen}
-            isWindow960orLess={isWindow960orLess}
-          />
-        </Grid>
-        <Grid
-          item
-          xs={12}
-          md={8}
-          className={classes.map}
-          style={{ maxWidth: isMobile ? "100%" : "98%" }}
-        >
-          {/* above line stopgab for scrolling on smaller desktop devices */}
-          <ResultsMap
-            stakeholders={data}
-            doSelectStakeholder={doSelectStakeholder}
-            categoryIds={categoryIds}
-            selectedLatitude={origin.latitude}
-            selectedLongitude={origin.longitude}
-            selectedPopUp={selectedPopUp}
-            setSelectedPopUp={setSelectedPopUp}
-            isPopupOpen={isPopupOpen}
-            setIsPopupOpen={setIsPopupOpen}
-            isWindow960orLess={isWindow960orLess}
-            isMobile={isMobile}
-          />
+    <Grid container direction="row">
+      <Grid item xs={12}>
+        <ResultsFilters
+          {...topLevelProps}
+          data={data}
+          search={search}
+          isWindow960orLess={isWindow960orLess}
+          viewport={viewport}
+          setViewport={setViewport}
+        />
+      </Grid>
+      <Grid item xs={12}>
+        <Grid container wrap="wrap-reverse">
+          <Grid
+            item
+            xs={12}
+            md={4}
+            className={classes.list}
+            style={{ height: isWindow960orLess ? "55em" : "" }}
+          >
+            <ResultsList
+              selectedStakeholder={selectedStakeholder}
+              doSelectStakeholder={doSelectStakeholder}
+              stakeholders={data}
+              setSelectedPopUp={setSelectedPopUp}
+              setIsPopupOpen={setIsPopupOpen}
+              isWindow960orLess={isWindow960orLess}
+              viewport={viewport}
+              setViewport={setViewport}
+            />
+          </Grid>
+          <Grid item xs={12} md={8} className={classes.map}>
+            <ResultsMap
+              viewport={viewport}
+              setViewport={setViewport}
+              stakeholders={data}
+              doSelectStakeholder={doSelectStakeholder}
+              categoryIds={categoryIds}
+              selectedPopUp={selectedPopUp}
+              setSelectedPopUp={setSelectedPopUp}
+              isPopupOpen={isPopupOpen}
+              setIsPopupOpen={setIsPopupOpen}
+              isWindow960orLess={isWindow960orLess}
+              isMobile={isMobile}
+            />
+          </Grid>
         </Grid>
       </Grid>
-    </div>
+    </Grid>
   );
 }
diff --git a/client/src/components/ResultsFilters.js b/client/src/components/ResultsFilters.js
@@ -27,13 +27,15 @@ const useStyles = makeStyles((theme) => ({
   filterGroupButton: {
     margin: "0 .25rem",
     fontSize: "max(.8vw,10px)",
+    whiteSpace: "nowrap",
     backgroundColor: "#fff",
     border: ".1em solid #000",
     color: "#000",
   },
   filterButton: {
     margin: "0 .25rem",
     fontSize: "max(.8vw,10px)",
+    whiteSpace: "nowrap",
     backgroundColor: "#fff",
     border: ".1em solid #000",
     color: "#000",
@@ -54,6 +56,7 @@ const useStyles = makeStyles((theme) => ({
     backgroundColor: "#336699",
     padding: "1rem 0",
     display: "flex",
+    position: "relative",
   },
   inputHolder: {
     display: "flex",
@@ -100,6 +103,16 @@ const useStyles = makeStyles((theme) => ({
 
 const distanceInfo = [1, 2, 3, 5, 10, 20, 50];
 
+const viewPortHash = {
+  1: 13.5,
+  2: 12.5,
+  3: 12,
+  5: 11,
+  10: 10,
+  20: 9,
+  50: 8,
+};
+
 const ResultsFilters = ({
   data,
   origin,
@@ -113,6 +126,8 @@ const ResultsFilters = ({
   categoryIds,
   toggleCategory,
   isWindow960orLess,
+  viewport,
+  setViewport,
 }) => {
   const classes = useStyles();
 
@@ -173,17 +188,19 @@ const ResultsFilters = ({
     toggleCategory(FOOD_PANTRY_CATEGORY_ID);
   }, [toggleCategory]);
 
-  // //loading search
-  // useEffect(() => {
-  //   doHandleSearch();
-  //   // eslint-disable-next-line react-hooks/exhaustive-deps
-  // }, []);
-
   useEffect(() => {
     doHandleSearch();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [radius, categoryIds, isVerifiedSelected, toggleCategory]);
 
+  const handleDistanceChange = (distance) => {
+    setRadius(distance);
+    setViewport({
+      ...viewport,
+      zoom: viewPortHash[distance],
+    });
+  };
+
   return (
     <Grid
       container
@@ -206,7 +223,7 @@ const ResultsFilters = ({
               name="select-distance"
               disableUnderline
               value={radius}
-              onChange={(e) => setRadius(e.target.value)}
+              onChange={(e) => handleDistanceChange(e.target.value)}
               inputProps={{
                 name: "select-distance",
                 id: "select-distance",
-Original file line number
+Diff line change
@@ Expand Up / @@ -62,7 +62,6 @@ const LocationAutocomplete = (props) => { @@
                   </Typography>
                   <Typography>{`${result.attributes.Addr_type}`}</Typography>
                 </Grid>
-                {/* <pre>{JSON.stringify(result, null, 2)}</pre> */}
               </div>
             ))
           ) : (
@@ Expand Down @@