Merge pull request #304 from lebanon-relief-project/dev

Dev

dependabot.yml

@@ -0,0 +1,9 @@
+version: 2
+updates:
+  - package-ecosystem: "npm"
+    directory: "/"
+    schedule:
+      interval: "weekly"
+    target-branch: "dev"
+    labels:
+      - "npm dependencies"

package.json

@@ -55,7 +55,7 @@
     "@types/cors": "^2.8.4",
     "@types/express": "^4.17.3",
     "@types/express-pino-logger": "^4.0.2",
-    "@types/jaeger-client": "^3.18.5",
+    "@types/jaeger-client": "^3.18.7",
     "@types/jest": "^25.1.4",
     "@types/jest-plugin-context": "^2.9.2",
     "@types/multer": "^1.4.4",
@@ -73,7 +73,7 @@
     "nodemon": "^2.0.7",
     "npm-check": "^6.0.1",
     "pino-pretty": "^3.6.1",
-    "rimraf": "^3.0.2",
+    "rimraf": "^6.0.1",
     "supertest": "^4.0.2",
     "ts-jest": "^25.3.0",
     "ts-node": "^8.8.1",

web-app/package.json

@@ -12,11 +12,13 @@
     "antd": "^4.6.6",
     "axios": "^0.21.2",
     "jest-styled-components": "^7.1.1",
+    "lodash": "^4.17.21",
     "msw": "^0.24.1",
     "platform": "^1.3.6",
     "react": "^16.13.1",
     "react-collapsible": "^2.8.4",
     "react-dom": "^16.13.1",
+    "react-responsive": "^10.0.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "^5.0.1",
     "react-select": "^5.2.2",

web-app/src/pages/directory/__snapshots__/directoryPage.spec.js.snap

@@ -1,6 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`the DirectoryPage component should match the snapshot 1`] = `
+.c2 {
+  grid-column: col-start / span 4;
+}
+
 .c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -16,7 +20,7 @@ exports[`the DirectoryPage component should match the snapshot 1`] = `
   flex-direction: column;
 }
 
-.c3 {
+.c4 {
   background: #fff2e8;
   border-radius: 6px;
   padding: 10px 3px;
@@ -40,31 +44,31 @@ exports[`the DirectoryPage component should match the snapshot 1`] = `
   padding-top: 40px;
 }
 
-.c2 {
+.c3 {
   grid-column: col-start 5 / span 8;
 }
 
-.c2 div {
+.c3 div {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
 }
 
-.c2 h3 {
+.c3 h3 {
   font-weight: 700;
   font-size: 24px;
   line-height: 32px;
   margin: 0px;
 }
 
-.c2 h4 {
+.c3 h4 {
   font-weight: 700;
   font-size: 20px;
   line-height: 28px;
   margin: 0px;
 }
 
-.c2 p {
+.c3 p {
   font-family: "Raleway";
   font-style: normal;
   font-weight: 400;
@@ -75,8 +79,17 @@ exports[`the DirectoryPage component should match the snapshot 1`] = `
 
 @media (max-width:768px) {
   .c2 {
+    grid-row: 1;
+    grid-column: col-start 1 / span 12;
+  }
+}
+
+@media (max-width:768px) {
+  .c3 {
     grid-row: 2;
     grid-column: col-start 1 / span 12;
+    margin-left: 18px;
+    margin-right: 18px;
   }
 }
 
@@ -91,12 +104,16 @@ exports[`the DirectoryPage component should match the snapshot 1`] = `
       class="c1"
     >
       <div
-        data-testid="sidebar"
+        class="c2"
       >
-        Sidebar
+        <div
+          data-testid="sidebar"
+        >
+          Sidebar
+        </div>
       </div>
       <div
-        class="c2"
+        class="c3"
       >
         <div
           style="display: flex; flex-direction: column; row-gap: 24px;"
@@ -233,7 +250,7 @@ exports[`the DirectoryPage component should match the snapshot 1`] = `
                     style="display: flex; flex-flow: wrap; gap: 8px;"
                   >
                     <div
-                      class="c3"
+                      class="c4"
                     >
                       string
                     </div>

web-app/src/pages/directory/components/Sidebar.js

@@ -9,13 +9,41 @@ import SearchIcon from "../../../assets/images/Search.svg";
 import Select from "react-select";
 import { useEffect } from "react";
 
-const Sidebar = ({ onFilterChange, locations }) => {
-  const [collapsibles, setCollapsibles] = useState(collapsiblesInitial);
+import { useMediaQuery } from "react-responsive";
+import { ReactComponent as CloseButton } from "../../../assets/images/CloseButtonBlue.svg";
+import cloneDeep from "lodash/cloneDeep";
+
+const Sidebar = ({ onFilterChange, locations, resultsCount }) => {
+  const [collapsibles, setCollapsibles] = useState(
+    cloneDeep(collapsiblesInitial)
+  );
+  const [isOpened, setIsOpened] = useState(false);
+
+  const isTabletOrMobile = useMediaQuery({ maxWidth: 768 });
 
   useEffect(() => {
+    console.log("collapsibles", collapsibles);
     if (onFilterChange) onFilterChange(collapsibles);
   }, [collapsibles]);
 
+  const resetFilters = (evt) => {
+    console.log("resetting filters");
+    evt.preventDefault();
+    console.log(collapsiblesInitial);
+    setCollapsibles(cloneDeep(collapsiblesInitial));
+  };
+
+  // Add this effect to handle body scroll
+  useEffect(() => {
+    if (!isTabletOrMobile) return;
+
+    if (isOpened) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "auto";
+    }
+  }, [isOpened]);
+
   const renderCollapsibles = useCallback(() => {
     return Object.keys(collapsibles).map((key, index) => {
       if (collapsibles[key].options) {
@@ -108,6 +136,79 @@ const Sidebar = ({ onFilterChange, locations }) => {
     });
   }, [collapsibles, setCollapsibles]);
 
+  if (isTabletOrMobile) {
+    return (
+      <>
+        <div
+          style={{
+            display: "flex",
+            alignItems: "flex-end",
+            justifyContent: "space-between",
+            paddingLeft: 18,
+            paddingRight: 18,
+          }}
+        >
+          <div
+            style={{
+              fontFamily: "Playfair Display",
+              fontWeight: 700,
+              fontSize: 24,
+            }}
+          >
+            {resultsCount !== undefined
+              ? `${resultsCount} results`
+              : "0 results"}
+          </div>
+          <button
+            style={{
+              // position: "fixed",
+              // top: "20px",
+              // left: "20px",
+              // zIndex: 10001,
+              backgroundColor: "#002766",
+              color: "white",
+              border: "none",
+              padding: "10px 20px",
+              cursor: "pointer",
+              borderRadius: "5px",
+            }}
+            onClick={() => setIsOpened(true)}
+          >
+            Filters
+          </button>
+        </div>
+
+        <StyledSideBar isOpened={isOpened}>
+          <Header>
+            <CloseButton
+              style={{ width: "30px", height: "30px", cursor: "pointer" }}
+              onClick={() => {
+                setIsOpened(false);
+              }}
+            />
+            <div
+              style={{
+                textDecoration: "underline",
+                cursor: "pointer",
+                fontFamily: "Raleway",
+                fontWeight: 700,
+                fontSize: 16,
+                color: "#002766",
+              }}
+              onClick={resetFilters}
+            >
+              Clear filters
+            </div>
+          </Header>
+          <SideBarWrapper>
+            {/* bunch of collapsibles */}
+            <form>{renderCollapsibles()}</form>
+          </SideBarWrapper>
+        </StyledSideBar>
+      </>
+    );
+  }
+
   return (
     <>
       <StyledSideBar>
@@ -121,6 +222,13 @@ const Sidebar = ({ onFilterChange, locations }) => {
   );
 };
 
+const Header = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 32px 18px;
+`;
+
 const SearchBox = styled.div`
   display: flex;
   height: 32px;
@@ -158,6 +266,12 @@ const SideBarWrapper = styled.div`
   border: 1px solid #003a8c;
   position: relative;
 
+  @media (max-width: ${devices.ipad}) {
+    border: none;
+    border-top: 1px solid #f0f0f0;
+    padding: 18px;
+  }
+
   ${"" /* possibly move this to the contentInner */}
   .Collapsible {
     margin-bottom: 20px;
@@ -244,12 +358,18 @@ const StyledSideBar = styled.div`
   .css-26l3qy-menu {
     position: static;
   }
-  grid-column: col-start / span 4;
+
   background-color: white;
 
   @media (max-width: ${devices.ipad}) {
-    grid-row: 1;
-    grid-column: col-start 1 / span 12;
+    position: fixed;
+    z-index: 10000;
+    top: 0;
+    bottom: 0;
+    left: ${(props) => (props.isOpened ? "0" : "-200%")};
+    transition: left 0.75s ease-in-out;
+    overflow: scroll;
+    width: 100%;
   }
 `;