search and filters
This commit is contained in:
		
							parent
							
								
									3cd11313fa
								
							
						
					
					
						commit
						1148b425e3
					
				
					 11 changed files with 742 additions and 243 deletions
				
			
		
							
								
								
									
										285
									
								
								package-lock.json
									
										
									
										generated
									
									
									
								
							
							
						
						
									
										285
									
								
								package-lock.json
									
										
									
										generated
									
									
									
								
							| 
						 | 
				
			
			@ -1162,6 +1162,84 @@
 | 
			
		|||
      "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz",
 | 
			
		||||
      "integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg=="
 | 
			
		||||
    },
 | 
			
		||||
    "@emotion/cache": {
 | 
			
		||||
      "version": "11.1.3",
 | 
			
		||||
      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.1.3.tgz",
 | 
			
		||||
      "integrity": "sha512-n4OWinUPJVaP6fXxWZD9OUeQ0lY7DvtmtSuqtRWT0Ofo/sBLCVSgb4/Oa0Q5eFxcwablRKjUXqXtNZVyEwCAuA==",
 | 
			
		||||
      "requires": {
 | 
			
		||||
        "@emotion/memoize": "^0.7.4",
 | 
			
		||||
        "@emotion/sheet": "^1.0.0",
 | 
			
		||||
        "@emotion/utils": "^1.0.0",
 | 
			
		||||
        "@emotion/weak-memoize": "^0.2.5",
 | 
			
		||||
        "stylis": "^4.0.3"
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    "@emotion/hash": {
 | 
			
		||||
      "version": "0.8.0",
 | 
			
		||||
      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
 | 
			
		||||
      "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
 | 
			
		||||
    },
 | 
			
		||||
    "@emotion/memoize": {
 | 
			
		||||
      "version": "0.7.5",
 | 
			
		||||
      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.5.tgz",
 | 
			
		||||
      "integrity": "sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ=="
 | 
			
		||||
    },
 | 
			
		||||
    "@emotion/react": {
 | 
			
		||||
      "version": "11.1.5",
 | 
			
		||||
      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.1.5.tgz",
 | 
			
		||||
      "integrity": "sha512-xfnZ9NJEv9SU9K2sxXM06lzjK245xSeHRpUh67eARBm3PBHjjKIZlfWZ7UQvD0Obvw6ZKjlC79uHrlzFYpOB/Q==",
 | 
			
		||||
      "requires": {
 | 
			
		||||
        "@babel/runtime": "^7.7.2",
 | 
			
		||||
        "@emotion/cache": "^11.1.3",
 | 
			
		||||
        "@emotion/serialize": "^1.0.0",
 | 
			
		||||
        "@emotion/sheet": "^1.0.1",
 | 
			
		||||
        "@emotion/utils": "^1.0.0",
 | 
			
		||||
        "@emotion/weak-memoize": "^0.2.5",
 | 
			
		||||
        "hoist-non-react-statics": "^3.3.1"
 | 
			
		||||
      },
 | 
			
		||||
      "dependencies": {
 | 
			
		||||
        "hoist-non-react-statics": {
 | 
			
		||||
          "version": "3.3.2",
 | 
			
		||||
          "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
 | 
			
		||||
          "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
 | 
			
		||||
          "requires": {
 | 
			
		||||
            "react-is": "^16.7.0"
 | 
			
		||||
          }
 | 
			
		||||
        }
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    "@emotion/serialize": {
 | 
			
		||||
      "version": "1.0.1",
 | 
			
		||||
      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.0.1.tgz",
 | 
			
		||||
      "integrity": "sha512-TXlKs5sgUKhFlszp/rg4lIAZd7UUSmJpwaf9/lAEFcUh2vPi32i7x4wk7O8TN8L8v2Ol8k0CxnhRBY0zQalTxA==",
 | 
			
		||||
      "requires": {
 | 
			
		||||
        "@emotion/hash": "^0.8.0",
 | 
			
		||||
        "@emotion/memoize": "^0.7.4",
 | 
			
		||||
        "@emotion/unitless": "^0.7.5",
 | 
			
		||||
        "@emotion/utils": "^1.0.0",
 | 
			
		||||
        "csstype": "^3.0.2"
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    "@emotion/sheet": {
 | 
			
		||||
      "version": "1.0.1",
 | 
			
		||||
      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.0.1.tgz",
 | 
			
		||||
      "integrity": "sha512-GbIvVMe4U+Zc+929N1V7nW6YYJtidj31lidSmdYcWozwoBIObXBnaJkKNDjZrLm9Nc0BR+ZyHNaRZxqNZbof5g=="
 | 
			
		||||
    },
 | 
			
		||||
    "@emotion/unitless": {
 | 
			
		||||
      "version": "0.7.5",
 | 
			
		||||
      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
 | 
			
		||||
      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
 | 
			
		||||
    },
 | 
			
		||||
    "@emotion/utils": {
 | 
			
		||||
      "version": "1.0.0",
 | 
			
		||||
      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.0.0.tgz",
 | 
			
		||||
      "integrity": "sha512-mQC2b3XLDs6QCW+pDQDiyO/EdGZYOygE8s5N5rrzjSI4M3IejPE/JPndCBwRT9z982aqQNi6beWs1UeayrQxxA=="
 | 
			
		||||
    },
 | 
			
		||||
    "@emotion/weak-memoize": {
 | 
			
		||||
      "version": "0.2.5",
 | 
			
		||||
      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz",
 | 
			
		||||
      "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA=="
 | 
			
		||||
    },
 | 
			
		||||
    "@eslint/eslintrc": {
 | 
			
		||||
      "version": "0.4.0",
 | 
			
		||||
      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.0.tgz",
 | 
			
		||||
| 
						 | 
				
			
			@ -1193,6 +1271,11 @@
 | 
			
		|||
        }
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    "@googlemaps/js-api-loader": {
 | 
			
		||||
      "version": "1.6.0",
 | 
			
		||||
      "resolved": "https://registry.npmjs.org/@googlemaps/js-api-loader/-/js-api-loader-1.6.0.tgz",
 | 
			
		||||
      "integrity": "sha512-amuilneCf7q5A/jDUE3ml83c9NjW/3DzIqiBDFIKZcraD0JSKbetkEQa5s57Z6QY7jxcequXgoL9CKJUY1xZ5A=="
 | 
			
		||||
    },
 | 
			
		||||
    "@hapi/address": {
 | 
			
		||||
      "version": "2.1.4",
 | 
			
		||||
      "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",
 | 
			
		||||
| 
						 | 
				
			
			@ -1829,6 +1912,156 @@
 | 
			
		|||
      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.9.1.tgz",
 | 
			
		||||
      "integrity": "sha512-DvJbbn3dUgMxDnJLH+RZQPnXak1h4ZVYQ7CWiFWjQwBFkVajT4rfw2PdpHLTSTwxrYfnoEXkuBiwkDm6tPMQeA=="
 | 
			
		||||
    },
 | 
			
		||||
    "@reach/auto-id": {
 | 
			
		||||
      "version": "0.10.5",
 | 
			
		||||
      "resolved": "https://registry.npmjs.org/@reach/auto-id/-/auto-id-0.10.5.tgz",
 | 
			
		||||
      "integrity": "sha512-we4/bwjFxJ3F+2eaddQ1HltbKvJ7AB8clkN719El7Zugpn/vOjfPMOVUiBqTmPGLUvkYrq4tpuFwLvk2HyOVHg==",
 | 
			
		||||
      "requires": {
 | 
			
		||||
        "@reach/utils": "0.10.5",
 | 
			
		||||
        "tslib": "^2.0.0"
 | 
			
		||||
      },
 | 
			
		||||
      "dependencies": {
 | 
			
		||||
        "tslib": {
 | 
			
		||||
          "version": "2.2.0",
 | 
			
		||||
          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz",
 | 
			
		||||
          "integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w=="
 | 
			
		||||
        }
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    "@reach/combobox": {
 | 
			
		||||
      "version": "0.10.5",
 | 
			
		||||
      "resolved": "https://registry.npmjs.org/@reach/combobox/-/combobox-0.10.5.tgz",
 | 
			
		||||
      "integrity": "sha512-UrvdELLk+rnxK0o2e+jWmw6b7dteBWAylX4CEHE9KJuBbdwZ1PJY3YIAwJuvWM13Lcll2Pk7OlFJqRT90r2mRg==",
 | 
			
		||||
      "requires": {
 | 
			
		||||
        "@reach/auto-id": "0.10.5",
 | 
			
		||||
        "@reach/descendants": "0.10.5",
 | 
			
		||||
        "@reach/popover": "0.10.5",
 | 
			
		||||
        "@reach/portal": "0.10.5",
 | 
			
		||||
        "@reach/utils": "0.10.5",
 | 
			
		||||
        "highlight-words-core": "1.2.2",
 | 
			
		||||
        "prop-types": "^15.7.2",
 | 
			
		||||
        "tslib": "^2.0.0"
 | 
			
		||||
      },
 | 
			
		||||
      "dependencies": {
 | 
			
		||||
        "tslib": {
 | 
			
		||||
          "version": "2.2.0",
 | 
			
		||||
          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz",
 | 
			
		||||
          "integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w=="
 | 
			
		||||
        }
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    "@reach/descendants": {
 | 
			
		||||
      "version": "0.10.5",
 | 
			
		||||
      "resolved": "https://registry.npmjs.org/@reach/descendants/-/descendants-0.10.5.tgz",
 | 
			
		||||
      "integrity": "sha512-8HhN4DwS/HsPQ+Ym/Ft/XJ1spXBYdE8hqpnbYR9UcU7Nx3oDbTIdhjA6JXXt23t5avYIx2jRa8YHCtVKSHuiwA==",
 | 
			
		||||
      "requires": {
 | 
			
		||||
        "@reach/utils": "0.10.5",
 | 
			
		||||
        "tslib": "^2.0.0"
 | 
			
		||||
      },
 | 
			
		||||
      "dependencies": {
 | 
			
		||||
        "tslib": {
 | 
			
		||||
          "version": "2.2.0",
 | 
			
		||||
          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz",
 | 
			
		||||
          "integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w=="
 | 
			
		||||
        }
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    "@reach/observe-rect": {
 | 
			
		||||
      "version": "1.2.0",
 | 
			
		||||
      "resolved": "https://registry.npmjs.org/@reach/observe-rect/-/observe-rect-1.2.0.tgz",
 | 
			
		||||
      "integrity": "sha512-Ba7HmkFgfQxZqqaeIWWkNK0rEhpxVQHIoVyW1YDSkGsGIXzcaW4deC8B0pZrNSSyLTdIk7y+5olKt5+g0GmFIQ=="
 | 
			
		||||
    },
 | 
			
		||||
    "@reach/popover": {
 | 
			
		||||
      "version": "0.10.5",
 | 
			
		||||
      "resolved": "https://registry.npmjs.org/@reach/popover/-/popover-0.10.5.tgz",
 | 
			
		||||
      "integrity": "sha512-S+qWIsjrN1yMpHjgELhjpdGc4Q3q1plJtXBGGQRxUAjmCUA/5OY7t5w5C8iqMNAEBwCvYXKvK/pLcXFxxLykSw==",
 | 
			
		||||
      "requires": {
 | 
			
		||||
        "@reach/portal": "0.10.5",
 | 
			
		||||
        "@reach/rect": "0.10.5",
 | 
			
		||||
        "@reach/utils": "0.10.5",
 | 
			
		||||
        "tabbable": "^4.0.0",
 | 
			
		||||
        "tslib": "^2.0.0"
 | 
			
		||||
      },
 | 
			
		||||
      "dependencies": {
 | 
			
		||||
        "tslib": {
 | 
			
		||||
          "version": "2.2.0",
 | 
			
		||||
          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz",
 | 
			
		||||
          "integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w=="
 | 
			
		||||
        }
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    "@reach/portal": {
 | 
			
		||||
      "version": "0.10.5",
 | 
			
		||||
      "resolved": "https://registry.npmjs.org/@reach/portal/-/portal-0.10.5.tgz",
 | 
			
		||||
      "integrity": "sha512-K5K8gW99yqDPDCWQjEfSNZAbGOQWSx5AN2lpuR1gDVoz4xyWpTJ0k0LbetYJTDVvLP/InEcR7AU42JaDYDCXQw==",
 | 
			
		||||
      "requires": {
 | 
			
		||||
        "@reach/utils": "0.10.5",
 | 
			
		||||
        "tslib": "^2.0.0"
 | 
			
		||||
      },
 | 
			
		||||
      "dependencies": {
 | 
			
		||||
        "tslib": {
 | 
			
		||||
          "version": "2.2.0",
 | 
			
		||||
          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz",
 | 
			
		||||
          "integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w=="
 | 
			
		||||
        }
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    "@reach/rect": {
 | 
			
		||||
      "version": "0.10.5",
 | 
			
		||||
      "resolved": "https://registry.npmjs.org/@reach/rect/-/rect-0.10.5.tgz",
 | 
			
		||||
      "integrity": "sha512-JBKs2HniYecq5zLO6UFReX28SUBPM3n0aizdNgHuvwZmDcTfNV4jsuJYQLqJ+FbCQsrSHkBxKZqWpfGXY9bUEg==",
 | 
			
		||||
      "requires": {
 | 
			
		||||
        "@reach/observe-rect": "1.2.0",
 | 
			
		||||
        "@reach/utils": "0.10.5",
 | 
			
		||||
        "prop-types": "^15.7.2",
 | 
			
		||||
        "tslib": "^2.0.0"
 | 
			
		||||
      },
 | 
			
		||||
      "dependencies": {
 | 
			
		||||
        "tslib": {
 | 
			
		||||
          "version": "2.2.0",
 | 
			
		||||
          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz",
 | 
			
		||||
          "integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w=="
 | 
			
		||||
        }
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    "@reach/utils": {
 | 
			
		||||
      "version": "0.10.5",
 | 
			
		||||
      "resolved": "https://registry.npmjs.org/@reach/utils/-/utils-0.10.5.tgz",
 | 
			
		||||
      "integrity": "sha512-5E/xxQnUbmpI/LrufBAOXjunl96DnqX6B4zC2MO2KH/dRzLug5gM5VuOwV26egsp0jvsSPxojwciOhS43px3qw==",
 | 
			
		||||
      "requires": {
 | 
			
		||||
        "@types/warning": "^3.0.0",
 | 
			
		||||
        "tslib": "^2.0.0",
 | 
			
		||||
        "warning": "^4.0.3"
 | 
			
		||||
      },
 | 
			
		||||
      "dependencies": {
 | 
			
		||||
        "tslib": {
 | 
			
		||||
          "version": "2.2.0",
 | 
			
		||||
          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz",
 | 
			
		||||
          "integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w=="
 | 
			
		||||
        }
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    "@react-google-maps/api": {
 | 
			
		||||
      "version": "1.13.0",
 | 
			
		||||
      "resolved": "https://registry.npmjs.org/@react-google-maps/api/-/api-1.13.0.tgz",
 | 
			
		||||
      "integrity": "sha512-mKwXziG5MbOvvcWG53FyZVZ8zjAuPNYkcS/+nYX9STMFNrI96AFq5l/zUn2QifRJnPzE8iO4V1vyMM+Ie9LpGg==",
 | 
			
		||||
      "requires": {
 | 
			
		||||
        "@googlemaps/js-api-loader": "1.6.0",
 | 
			
		||||
        "@react-google-maps/infobox": "1.12.1",
 | 
			
		||||
        "@react-google-maps/marker-clusterer": "1.12.1",
 | 
			
		||||
        "invariant": "2.2.4"
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    "@react-google-maps/infobox": {
 | 
			
		||||
      "version": "1.12.1",
 | 
			
		||||
      "resolved": "https://registry.npmjs.org/@react-google-maps/infobox/-/infobox-1.12.1.tgz",
 | 
			
		||||
      "integrity": "sha512-tD/xijqRtKK/LNRzuerzuyvybnRaD8SLgCA064len4/enTo1abhQN215ZYqwbTOn7RgYt9qMgNnwoX//u3xoWw=="
 | 
			
		||||
    },
 | 
			
		||||
    "@react-google-maps/marker-clusterer": {
 | 
			
		||||
      "version": "1.12.1",
 | 
			
		||||
      "resolved": "https://registry.npmjs.org/@react-google-maps/marker-clusterer/-/marker-clusterer-1.12.1.tgz",
 | 
			
		||||
      "integrity": "sha512-JBSO5VJuouP/boBnSdRDCWq0UKO7jr3HvZVhis3ew+VGJ/BoCPu3lpU0HDsjjulfng+xwqLfVOIzP3QnvBPdCA=="
 | 
			
		||||
    },
 | 
			
		||||
    "@restart/context": {
 | 
			
		||||
      "version": "2.1.4",
 | 
			
		||||
      "resolved": "https://registry.npmjs.org/@restart/context/-/context-2.1.4.tgz",
 | 
			
		||||
| 
						 | 
				
			
			@ -4999,6 +5232,11 @@
 | 
			
		|||
        "whatwg-url": "^8.0.0"
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    "date-fns": {
 | 
			
		||||
      "version": "2.19.0",
 | 
			
		||||
      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.19.0.tgz",
 | 
			
		||||
      "integrity": "sha512-X3bf2iTPgCAQp9wvjOQytnf5vO5rESYRXlPIVcgSbtT5OTScPcsf9eZU+B/YIkKAtYr5WeCii58BgATrNitlWg=="
 | 
			
		||||
    },
 | 
			
		||||
    "debug": {
 | 
			
		||||
      "version": "4.3.1",
 | 
			
		||||
      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
 | 
			
		||||
| 
						 | 
				
			
			@ -7412,6 +7650,11 @@
 | 
			
		|||
      "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz",
 | 
			
		||||
      "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ=="
 | 
			
		||||
    },
 | 
			
		||||
    "highlight-words-core": {
 | 
			
		||||
      "version": "1.2.2",
 | 
			
		||||
      "resolved": "https://registry.npmjs.org/highlight-words-core/-/highlight-words-core-1.2.2.tgz",
 | 
			
		||||
      "integrity": "sha512-BXUKIkUuh6cmmxzi5OIbUJxrG8OAk2MqoL1DtO3Wo9D2faJg2ph5ntyuQeLqaHJmzER6H5tllCDA9ZnNe9BVGg=="
 | 
			
		||||
    },
 | 
			
		||||
    "history": {
 | 
			
		||||
      "version": "4.10.1",
 | 
			
		||||
      "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
 | 
			
		||||
| 
						 | 
				
			
			@ -10238,6 +10481,11 @@
 | 
			
		|||
      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
 | 
			
		||||
      "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g="
 | 
			
		||||
    },
 | 
			
		||||
    "memoize-one": {
 | 
			
		||||
      "version": "5.1.1",
 | 
			
		||||
      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.1.1.tgz",
 | 
			
		||||
      "integrity": "sha512-HKeeBpWvqiVJD57ZUAsJNm71eHTykffzcLZVYWiVfQeI1rJtuEaS7hQiEpWfVVk18donPwJEcFKIkCmPJNOhHA=="
 | 
			
		||||
    },
 | 
			
		||||
    "memory-fs": {
 | 
			
		||||
      "version": "0.4.1",
 | 
			
		||||
      "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz",
 | 
			
		||||
| 
						 | 
				
			
			@ -12933,6 +13181,14 @@
 | 
			
		|||
        }
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    "react-input-autosize": {
 | 
			
		||||
      "version": "3.0.0",
 | 
			
		||||
      "resolved": "https://registry.npmjs.org/react-input-autosize/-/react-input-autosize-3.0.0.tgz",
 | 
			
		||||
      "integrity": "sha512-nL9uS7jEs/zu8sqwFE5MAPx6pPkNAriACQ2rGLlqmKr2sPGtN7TXTyDdQt4lbNXVx7Uzadb40x8qotIuru6Rhg==",
 | 
			
		||||
      "requires": {
 | 
			
		||||
        "prop-types": "^15.5.8"
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    "react-is": {
 | 
			
		||||
      "version": "16.13.1",
 | 
			
		||||
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
 | 
			
		||||
| 
						 | 
				
			
			@ -13083,6 +13339,20 @@
 | 
			
		|||
        "workbox-webpack-plugin": "5.1.4"
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    "react-select": {
 | 
			
		||||
      "version": "4.3.0",
 | 
			
		||||
      "resolved": "https://registry.npmjs.org/react-select/-/react-select-4.3.0.tgz",
 | 
			
		||||
      "integrity": "sha512-SBPD1a3TJqE9zoI/jfOLCAoLr/neluaeokjOixr3zZ1vHezkom8K0A9J4QG9IWDqIDE9K/Mv+0y1GjidC2PDtQ==",
 | 
			
		||||
      "requires": {
 | 
			
		||||
        "@babel/runtime": "^7.12.0",
 | 
			
		||||
        "@emotion/cache": "^11.0.0",
 | 
			
		||||
        "@emotion/react": "^11.1.1",
 | 
			
		||||
        "memoize-one": "^5.0.0",
 | 
			
		||||
        "prop-types": "^15.6.0",
 | 
			
		||||
        "react-input-autosize": "^3.0.0",
 | 
			
		||||
        "react-transition-group": "^4.3.0"
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    "react-transition-group": {
 | 
			
		||||
      "version": "4.4.1",
 | 
			
		||||
      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz",
 | 
			
		||||
| 
						 | 
				
			
			@ -14814,6 +15084,11 @@
 | 
			
		|||
        }
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    "stylis": {
 | 
			
		||||
      "version": "4.0.9",
 | 
			
		||||
      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.0.9.tgz",
 | 
			
		||||
      "integrity": "sha512-ci7pEFNVW3YJiWEzqPOMsAjY6kgraZ3ZgBfQ5HYbNtLJEsQ0G46ejWZpfSSCp/FaSiCSGGhzL9O2lN+2cB6ong=="
 | 
			
		||||
    },
 | 
			
		||||
    "supports-color": {
 | 
			
		||||
      "version": "5.5.0",
 | 
			
		||||
      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
 | 
			
		||||
| 
						 | 
				
			
			@ -14881,6 +15156,11 @@
 | 
			
		|||
      "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
 | 
			
		||||
      "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw=="
 | 
			
		||||
    },
 | 
			
		||||
    "tabbable": {
 | 
			
		||||
      "version": "4.0.0",
 | 
			
		||||
      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-4.0.0.tgz",
 | 
			
		||||
      "integrity": "sha512-H1XoH1URcBOa/rZZWxLxHCtOdVUEev+9vo5YdYhC9tCY4wnybX+VQrCYuy9ubkg69fCBxCONJOSLGfw0DWMffQ=="
 | 
			
		||||
    },
 | 
			
		||||
    "table": {
 | 
			
		||||
      "version": "6.0.7",
 | 
			
		||||
      "resolved": "https://registry.npmjs.org/table/-/table-6.0.7.tgz",
 | 
			
		||||
| 
						 | 
				
			
			@ -15581,6 +15861,11 @@
 | 
			
		|||
      "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",
 | 
			
		||||
      "integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ=="
 | 
			
		||||
    },
 | 
			
		||||
    "use-places-autocomplete": {
 | 
			
		||||
      "version": "1.9.1",
 | 
			
		||||
      "resolved": "https://registry.npmjs.org/use-places-autocomplete/-/use-places-autocomplete-1.9.1.tgz",
 | 
			
		||||
      "integrity": "sha512-ZIkCob6qFBT5kP5wvtiDHV2Dw+DjlVSOj8RoM0XRkDB95PPQzICTjWHOhe4ClY0gO2Nq1bFG5K2WfIYYlIYtfg=="
 | 
			
		||||
    },
 | 
			
		||||
    "util": {
 | 
			
		||||
      "version": "0.11.1",
 | 
			
		||||
      "resolved": "https://registry.npmjs.org/util/-/util-0.11.1.tgz",
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -14,8 +14,13 @@
 | 
			
		|||
    "react-google-maps": "^9.4.5",
 | 
			
		||||
    "react-router-dom": "^5.2.0",
 | 
			
		||||
    "react-scripts": "4.0.3",
 | 
			
		||||
    "react-select": "^4.3.0",
 | 
			
		||||
    "spectre.css": "^0.5.9",
 | 
			
		||||
    "web-vitals": "^1.1.1"
 | 
			
		||||
    "web-vitals": "^1.1.1",
 | 
			
		||||
    "@reach/combobox": "^0.10.2",
 | 
			
		||||
    "@react-google-maps/api": "^1.9.0",
 | 
			
		||||
    "date-fns": "^2.13.0",
 | 
			
		||||
    "use-places-autocomplete": "^1.3.5"
 | 
			
		||||
  },
 | 
			
		||||
  "scripts": {
 | 
			
		||||
    "start": "react-scripts start",
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
							
								
								
									
										
											BIN
										
									
								
								src/images/bg1.jpg
									
										
									
									
									
										Normal file
									
								
							
							
						
						
									
										
											BIN
										
									
								
								src/images/bg1.jpg
									
										
									
									
									
										Normal file
									
								
							
										
											Binary file not shown.
										
									
								
							| 
		 After Width: | Height: | Size: 1.1 MiB  | 
							
								
								
									
										
											BIN
										
									
								
								src/images/fbg1.png
									
										
									
									
									
										Normal file
									
								
							
							
						
						
									
										
											BIN
										
									
								
								src/images/fbg1.png
									
										
									
									
									
										Normal file
									
								
							
										
											Binary file not shown.
										
									
								
							| 
		 After Width: | Height: | Size: 10 KiB  | 
							
								
								
									
										
											BIN
										
									
								
								src/images/fbg2.png
									
										
									
									
									
										Normal file
									
								
							
							
						
						
									
										
											BIN
										
									
								
								src/images/fbg2.png
									
										
									
									
									
										Normal file
									
								
							
										
											Binary file not shown.
										
									
								
							| 
		 After Width: | Height: | Size: 25 KiB  | 
							
								
								
									
										
											BIN
										
									
								
								src/images/fbg3.png
									
										
									
									
									
										Normal file
									
								
							
							
						
						
									
										
											BIN
										
									
								
								src/images/fbg3.png
									
										
									
									
									
										Normal file
									
								
							
										
											Binary file not shown.
										
									
								
							| 
		 After Width: | Height: | Size: 8.7 KiB  | 
| 
						 | 
				
			
			@ -1,3 +1,9 @@
 | 
			
		|||
body{
 | 
			
		||||
    /*background-image: url("../images/bg1.jpg");
 | 
			
		||||
    background-position: 0px 60px;
 | 
			
		||||
    */
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.booking_button{
 | 
			
		||||
    text-align: right; 
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			@ -6,4 +12,33 @@
 | 
			
		|||
    font-size: 40px;
 | 
			
		||||
    font-weight:bolder;
 | 
			
		||||
    padding-right: 5%;
 | 
			
		||||
};
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.search{
 | 
			
		||||
    display:inline-block;
 | 
			
		||||
    margin:3% 0%;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.compass{
 | 
			
		||||
    height:25px;
 | 
			
		||||
    width:25px;
 | 
			
		||||
}
 | 
			
		||||
.buttonImg{
 | 
			
		||||
    background-color: transparent;
 | 
			
		||||
    border: none !important;
 | 
			
		||||
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.main_borders{
 | 
			
		||||
  padding:0% 10% 4% 10%;
 | 
			
		||||
    
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.map_style{
 | 
			
		||||
    text-align: center;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.filters{
 | 
			
		||||
    margin: 2% 0%
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -1,268 +1,354 @@
 | 
			
		|||
import React, { useState, useEffect, Component } from "react";
 | 
			
		||||
import {
 | 
			
		||||
  GoogleMap, 
 | 
			
		||||
  withScriptjs, 
 | 
			
		||||
  withGoogleMap,
 | 
			
		||||
  GoogleMap,
 | 
			
		||||
  useLoadScript,
 | 
			
		||||
  Marker,
 | 
			
		||||
  InfoWindow,
 | 
			
		||||
  useLoadScript
 | 
			
		||||
 } from "react-google-maps";
 | 
			
		||||
} from "@react-google-maps/api";
 | 
			
		||||
import usePlacesAutocomplete, {
 | 
			
		||||
  getGeocode,
 | 
			
		||||
  getLatLng,
 | 
			
		||||
} from "use-places-autocomplete";
 | 
			
		||||
import {
 | 
			
		||||
  Combobox,
 | 
			
		||||
  ComboboxInput,
 | 
			
		||||
  ComboboxPopover,
 | 
			
		||||
  ComboboxList,
 | 
			
		||||
  ComboboxOption,
 | 
			
		||||
} from "@reach/combobox";
 | 
			
		||||
import { formatRelative } from "date-fns";
 | 
			
		||||
import Select from "react-select";
 | 
			
		||||
 | 
			
		||||
import "@reach/combobox/styles.css";
 | 
			
		||||
import mapStyles from "./mapStyles";
 | 
			
		||||
import * as listingData from "./data/property-data.json";
 | 
			
		||||
import "./ListingsPage.css";
 | 
			
		||||
 | 
			
		||||
 import * as listingData from "./data/property-data.json";
 | 
			
		||||
 import mapStyles from "./mapStyles";
 | 
			
		||||
 import "./ListingsPage.css";
 | 
			
		||||
import compassImg from "./compass.svg";
 | 
			
		||||
 | 
			
		||||
 
 | 
			
		||||
const libraries = ["places"];
 | 
			
		||||
 | 
			
		||||
function Map(){
 | 
			
		||||
const mapContainerStyle = {
 | 
			
		||||
  height: "700px",
 | 
			
		||||
  width: "100vm",
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
  const [selectedProperty, setSelectedProperty] = useState(null);
 | 
			
		||||
const options = {
 | 
			
		||||
  styles: mapStyles,
 | 
			
		||||
  disableDefaultUI: true,
 | 
			
		||||
  zoomControl: true,
 | 
			
		||||
};
 | 
			
		||||
const center = {
 | 
			
		||||
  lat: 45.4231,
 | 
			
		||||
  lng: -75.6931,
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
export default function ListingsPage() {
 | 
			
		||||
  const price_filter = [
 | 
			
		||||
    {
 | 
			
		||||
      value: null,
 | 
			
		||||
      label: "Any",
 | 
			
		||||
    },
 | 
			
		||||
    {
 | 
			
		||||
      value: 100000,
 | 
			
		||||
      label: "$100000",
 | 
			
		||||
    },
 | 
			
		||||
    {
 | 
			
		||||
      value: 200000,
 | 
			
		||||
      label: "$200000",
 | 
			
		||||
    },
 | 
			
		||||
    {
 | 
			
		||||
      value: 300000,
 | 
			
		||||
      label: "$300000",
 | 
			
		||||
    },
 | 
			
		||||
    {
 | 
			
		||||
      value: 400000,
 | 
			
		||||
      label: "$400000",
 | 
			
		||||
    }
 | 
			
		||||
  ];
 | 
			
		||||
 | 
			
		||||
  const bed_filter = [
 | 
			
		||||
    {
 | 
			
		||||
      value: null,
 | 
			
		||||
      label: "Any",
 | 
			
		||||
    },
 | 
			
		||||
    {
 | 
			
		||||
      value: 1,
 | 
			
		||||
      label: "One Bed",
 | 
			
		||||
    },
 | 
			
		||||
    {
 | 
			
		||||
      value: 2,
 | 
			
		||||
      label: "Two Beds",
 | 
			
		||||
    },
 | 
			
		||||
    {
 | 
			
		||||
      value: 3,
 | 
			
		||||
      label: "Three Beds",
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
  ];
 | 
			
		||||
 | 
			
		||||
  const bath_filter = [
 | 
			
		||||
    {
 | 
			
		||||
      value: null,
 | 
			
		||||
      label: "Any",
 | 
			
		||||
    },
 | 
			
		||||
    {
 | 
			
		||||
      value: 1,
 | 
			
		||||
      label: "One Bath",
 | 
			
		||||
    },
 | 
			
		||||
    {
 | 
			
		||||
      value: 2,
 | 
			
		||||
      label: "Two Baths",
 | 
			
		||||
    },
 | 
			
		||||
    {
 | 
			
		||||
      value: 3,
 | 
			
		||||
      label: "Three Baths",
 | 
			
		||||
    }
 | 
			
		||||
  ];
 | 
			
		||||
 | 
			
		||||
  //console.log(data1[0]);
 | 
			
		||||
 | 
			
		||||
  const { isLoaded, loadError } = useLoadScript({
 | 
			
		||||
    googleMapsApiKey: `https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=
 | 
			
		||||
     AIzaSyC5TiZoTEwEcB_HUZRhe_rXrcSWW1Z5x8I`,
 | 
			
		||||
    libraries,
 | 
			
		||||
  });
 | 
			
		||||
 | 
			
		||||
  const [selectedBudget, setSelectedBudget] = useState(null);
 | 
			
		||||
  const [selectedBeds, setSelectedBeds] = useState(null);
 | 
			
		||||
  const [selectedBaths, setSelectedBaths] = useState(null);
 | 
			
		||||
 | 
			
		||||
  const [markers, setMarkers] = React.useState([]);
 | 
			
		||||
  const [selected, setSelected] = React.useState(null);
 | 
			
		||||
 | 
			
		||||
  const [budget, setBudget] = useState(null);
 | 
			
		||||
  const [bed, setBed] = useState(null);
 | 
			
		||||
  const [bath, setBath] = useState(null);
 | 
			
		||||
 | 
			
		||||
  const mapRef = React.useRef();
 | 
			
		||||
  const onMapLoad = React.useCallback((map) => {
 | 
			
		||||
    mapRef.current = map;
 | 
			
		||||
    //console.log(current);
 | 
			
		||||
  }, []);
 | 
			
		||||
 | 
			
		||||
  const panTo = React.useCallback(({ lat, lng }) => {
 | 
			
		||||
    mapRef.current.panTo({ lat, lng });
 | 
			
		||||
    mapRef.current.setZoom(10);
 | 
			
		||||
  }, []);
 | 
			
		||||
 | 
			
		||||
  if (loadError) return "Error";
 | 
			
		||||
  if (!isLoaded) return "Loading...";
 | 
			
		||||
 | 
			
		||||
  // handle onChange event of the dropdown
 | 
			
		||||
  const handleBudgetChange = (e) => {
 | 
			
		||||
    setSelectedBudget(e);
 | 
			
		||||
    setBudget(e.value);
 | 
			
		||||
 | 
			
		||||
    //https://stackoverflow.com/questions/54150783/react-hooks-usestate-with-object
 | 
			
		||||
    //https://stackoverflow.com/questions/57341541/removing-object-from-array-using-hooks-usestate/57341724
 | 
			
		||||
  };
 | 
			
		||||
  const handleBedChange = (e) => {
 | 
			
		||||
    setSelectedBeds(e);
 | 
			
		||||
    setBed(e.value);
 | 
			
		||||
  };
 | 
			
		||||
  const handleBathChange = (e) => {
 | 
			
		||||
    setSelectedBaths(e);
 | 
			
		||||
    setBath(e.value);
 | 
			
		||||
  };
 | 
			
		||||
 | 
			
		||||
  return (
 | 
			
		||||
 | 
			
		||||
  
 | 
			
		||||
    <GoogleMap
 | 
			
		||||
      defaultZoom={10}
 | 
			
		||||
      defaultCenter={{lat: 45.4231, lng:-75.6931}}
 | 
			
		||||
      //https://snazzymaps.com/explore
 | 
			
		||||
      defaultOptions={{styles: mapStyles}}
 | 
			
		||||
    >
 | 
			
		||||
    <div className="main_borders">
 | 
			
		||||
 | 
			
		||||
        {
 | 
			
		||||
      <div class="filters">
 | 
			
		||||
        <Search class="search" panTo={panTo} />
 | 
			
		||||
        <Locate class="search" panTo={panTo} />
 | 
			
		||||
 | 
			
		||||
        listingData.Properties.map(house => {
 | 
			
		||||
        <Select
 | 
			
		||||
          class="search"
 | 
			
		||||
          placeholder="Select Budget"
 | 
			
		||||
          value={selectedBudget} // set selected value
 | 
			
		||||
          options={price_filter} // set list of the data
 | 
			
		||||
          onChange={handleBudgetChange} // assign onChange function
 | 
			
		||||
        />
 | 
			
		||||
 | 
			
		||||
          console.log(house.PRICE)
 | 
			
		||||
          house.PRICE > 100 ? 
 | 
			
		||||
  
 | 
			
		||||
          <Marker
 | 
			
		||||
            key={house.LISTING_ID}
 | 
			
		||||
            position={{ 
 | 
			
		||||
              lat: house.coordinates[1],
 | 
			
		||||
              lng: house.coordinates[0]
 | 
			
		||||
            
 | 
			
		||||
            }}      
 | 
			
		||||
        <Select
 | 
			
		||||
          class="search"
 | 
			
		||||
          placeholder="# Beds"
 | 
			
		||||
          value={selectedBeds} // set selected value
 | 
			
		||||
          options={bed_filter} // set list of the data
 | 
			
		||||
          onChange={handleBedChange} // assign onChange function
 | 
			
		||||
        />
 | 
			
		||||
 | 
			
		||||
            onClick={() => {
 | 
			
		||||
              setSelectedProperty(house)
 | 
			
		||||
            }}      
 | 
			
		||||
 | 
			
		||||
            icon={{
 | 
			
		||||
              url:"homes-3.svg",
 | 
			
		||||
              scaledSize: new window.google.maps.Size(50,50)
 | 
			
		||||
            }}
 | 
			
		||||
            
 | 
			
		||||
 | 
			
		||||
            
 | 
			
		||||
          />
 | 
			
		||||
          :
 | 
			
		||||
          
 | 
			
		||||
          console.log(house.PRICE)
 | 
			
		||||
 | 
			
		||||
          
 | 
			
		||||
        })
 | 
			
		||||
        }
 | 
			
		||||
        <Select
 | 
			
		||||
          class="search"
 | 
			
		||||
          placeholder="# Baths"
 | 
			
		||||
          value={selectedBaths} // set selected value
 | 
			
		||||
          options={bath_filter} // set list of the data
 | 
			
		||||
          onChange={handleBathChange} // assign onChange function
 | 
			
		||||
        />
 | 
			
		||||
      </div>
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
        {selectedProperty && (
 | 
			
		||||
          
 | 
			
		||||
          <InfoWindow
 | 
			
		||||
            position={{ 
 | 
			
		||||
              lat: selectedProperty.coordinates[1],
 | 
			
		||||
              lng: selectedProperty.coordinates[0]
 | 
			
		||||
            
 | 
			
		||||
            }} 
 | 
			
		||||
            onCloseClick={() => {
 | 
			
		||||
             setSelectedProperty(null);
 | 
			
		||||
            }}
 | 
			
		||||
          >
 | 
			
		||||
            <div> 
 | 
			
		||||
              <h2>{selectedProperty.ADDRESS}</h2>
 | 
			
		||||
              <p> {selectedProperty.DESC}</p>
 | 
			
		||||
              <div>
 | 
			
		||||
                <div class="row">
 | 
			
		||||
 | 
			
		||||
                  <div className="col-6">
 | 
			
		||||
                  <i class="fas fa-bed fa-3x"></i> <span class="popup_nums"> 1 </span>
 | 
			
		||||
                  <i class="fas fa-bath fa-3x"></i> <span class="popup_nums"> 2</span>
 | 
			
		||||
           
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
                  </div>
 | 
			
		||||
 | 
			
		||||
                  <div className="col-6 booking_button">
 | 
			
		||||
                  <button>Show Listing</button>
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
                  </div>
 | 
			
		||||
 | 
			
		||||
                </div>
 | 
			
		||||
                
 | 
			
		||||
 | 
			
		||||
              </div>
 | 
			
		||||
     
 | 
			
		||||
              
 | 
			
		||||
            </div>
 | 
			
		||||
          </InfoWindow>
 | 
			
		||||
 | 
			
		||||
        )}
 | 
			
		||||
 | 
			
		||||
    </GoogleMap>
 | 
			
		||||
  
 | 
			
		||||
   
 | 
			
		||||
  );
 | 
			
		||||
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
const MapWrapped = withScriptjs(withGoogleMap(Map))
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
class ListingsPage extends Component {
 | 
			
		||||
  render() {
 | 
			
		||||
    return (
 | 
			
		||||
 | 
			
		||||
    <div className="listings">
 | 
			
		||||
 | 
			
		||||
      <section class="colored-section2" id="cta">
 | 
			
		||||
 | 
			
		||||
        <div className="row">
 | 
			
		||||
 | 
			
		||||
          <div className="col-4">
 | 
			
		||||
 | 
			
		||||
          
 | 
			
		||||
          <div class="input-group rounded">
 | 
			
		||||
            <input type="search" class="form-control rounded" placeholder="Search" aria-label="Search"
 | 
			
		||||
              aria-describedby="search-addon" />
 | 
			
		||||
            <span class="input-group-text border-0" id="search-addon">
 | 
			
		||||
              <i class="fas fa-search"></i>
 | 
			
		||||
            </span>
 | 
			
		||||
          </div>
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
          
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
          </div>
 | 
			
		||||
 | 
			
		||||
          <div className="col-4">
 | 
			
		||||
            <div class="dropdown">
 | 
			
		||||
              <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 | 
			
		||||
                Dropdown button
 | 
			
		||||
              </button>
 | 
			
		||||
              <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
 | 
			
		||||
                <a class="dropdown-item" href="#">Action</a>
 | 
			
		||||
                <a class="dropdown-item" href="#">Another action</a>
 | 
			
		||||
                <a class="dropdown-item" href="#">Something else here</a>
 | 
			
		||||
              </div>
 | 
			
		||||
            </div>
 | 
			
		||||
          </div>
 | 
			
		||||
 | 
			
		||||
          <div className="col-4">
 | 
			
		||||
 | 
			
		||||
            <div class="dropdown">
 | 
			
		||||
              <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 | 
			
		||||
                Beds
 | 
			
		||||
              </button>
 | 
			
		||||
              <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton2">
 | 
			
		||||
                <li><a class="dropdown-item" href="#">Action</a></li>
 | 
			
		||||
                <li><a class="dropdown-item" href="#">Another action</a></li>
 | 
			
		||||
                <li><a class="dropdown-item" href="#">Something else here</a></li>
 | 
			
		||||
              </ul>
 | 
			
		||||
            </div>
 | 
			
		||||
          </div>
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
          
 | 
			
		||||
          <div className="col-4">
 | 
			
		||||
 | 
			
		||||
            <div class="dropdown">
 | 
			
		||||
              <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 | 
			
		||||
                Beds
 | 
			
		||||
              </button>
 | 
			
		||||
              <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton3">
 | 
			
		||||
                <li><a class="dropdown-item" href="#">Action</a></li>
 | 
			
		||||
                <li><a class="dropdown-item" href="#">Another action</a></li>
 | 
			
		||||
                <li><a class="dropdown-item" href="#">Something else here</a></li>
 | 
			
		||||
              </ul>
 | 
			
		||||
            </div>
 | 
			
		||||
          </div>
 | 
			
		||||
 | 
			
		||||
        </div>
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
      {/*
 | 
			
		||||
      
 | 
			
		||||
    
 | 
			
		||||
    
 | 
			
		||||
        <div class="row"> 
 | 
			
		||||
 | 
			
		||||
    
 | 
			
		||||
          <div class="col-12">
 | 
			
		||||
          
 | 
			
		||||
            <div class="dropdown">
 | 
			
		||||
              <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
 | 
			
		||||
                Dropdown button
 | 
			
		||||
              </button>
 | 
			
		||||
              <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
 | 
			
		||||
                <li><a class="dropdown-item" href="#">Action</a></li>
 | 
			
		||||
                <li><a class="dropdown-item" href="#">Another action</a></li>
 | 
			
		||||
                <li><a class="dropdown-item" href="#">Something else here</a></li>
 | 
			
		||||
              </ul>
 | 
			
		||||
            </div>
 | 
			
		||||
 | 
			
		||||
            <div class="dropdown">
 | 
			
		||||
              <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
 | 
			
		||||
                Dropdown button
 | 
			
		||||
              </button>
 | 
			
		||||
              <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
 | 
			
		||||
                <li><a class="dropdown-item" href="#">Action</a></li>
 | 
			
		||||
                <li><a class="dropdown-item" href="#">Another action</a></li>
 | 
			
		||||
                <li><a class="dropdown-item" href="#">Something else here</a></li>
 | 
			
		||||
              </ul>
 | 
			
		||||
            </div>
 | 
			
		||||
 | 
			
		||||
          </div>
 | 
			
		||||
 | 
			
		||||
        </div>
 | 
			
		||||
  */}
 | 
			
		||||
       
 | 
			
		||||
        <div class="row"> 
 | 
			
		||||
 | 
			
		||||
          <div class="col-12">
 | 
			
		||||
 | 
			
		||||
       
 | 
			
		||||
            <div style={{ width: "100vm", height: "800px" }}>
 | 
			
		||||
              <MapWrapped
 | 
			
		||||
                googleMapURL={`https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=
 | 
			
		||||
                AIzaSyC5TiZoTEwEcB_HUZRhe_rXrcSWW1Z5x8I`}
 | 
			
		||||
                loadingElement={<div style={{ height: `100%` }} />}
 | 
			
		||||
                containerElement={<div style={{ height: `100%` }} />}
 | 
			
		||||
                mapElement={<div style={{ height: `100%` }} />}
 | 
			
		||||
      <div >
 | 
			
		||||
        <GoogleMap
 | 
			
		||||
          id="map"
 | 
			
		||||
          mapContainerStyle={mapContainerStyle}
 | 
			
		||||
          zoom={10}
 | 
			
		||||
          center={center}
 | 
			
		||||
          options={options}
 | 
			
		||||
          onLoad={onMapLoad}
 | 
			
		||||
        >
 | 
			
		||||
          {listingData.Properties.map((house) =>
 | 
			
		||||
            (budget >= house.PRICE || !budget) &&
 | 
			
		||||
            (bed == house.BEDS || !bed) &&
 | 
			
		||||
            (bath == house.BATHS || !bath) ? (
 | 
			
		||||
              <Marker
 | 
			
		||||
                key={house.LISTING_ID}
 | 
			
		||||
                position={{
 | 
			
		||||
                  lat: house.coordinates[1],
 | 
			
		||||
                  lng: house.coordinates[0],
 | 
			
		||||
                }}
 | 
			
		||||
                onClick={() => {
 | 
			
		||||
                  setSelected(house);
 | 
			
		||||
                }}
 | 
			
		||||
                icon={{
 | 
			
		||||
                  url: "homes-3.svg",
 | 
			
		||||
                  scaledSize: new window.google.maps.Size(50, 50),
 | 
			
		||||
                }}
 | 
			
		||||
                visible={true}
 | 
			
		||||
              />
 | 
			
		||||
            </div>
 | 
			
		||||
            ) : (
 | 
			
		||||
              <Marker
 | 
			
		||||
                key={house.LISTING_ID}
 | 
			
		||||
                position={{
 | 
			
		||||
                  lat: house.coordinates[1],
 | 
			
		||||
                  lng: house.coordinates[0],
 | 
			
		||||
                }}
 | 
			
		||||
                onClick={() => {
 | 
			
		||||
                  setSelected(house);
 | 
			
		||||
                }}
 | 
			
		||||
                icon={{
 | 
			
		||||
                  url: "homes-3.svg",
 | 
			
		||||
                  scaledSize: new window.google.maps.Size(50, 50),
 | 
			
		||||
                }}
 | 
			
		||||
                visible={false}
 | 
			
		||||
              />
 | 
			
		||||
            )
 | 
			
		||||
          )}
 | 
			
		||||
 | 
			
		||||
          {selected ? (
 | 
			
		||||
            <InfoWindow
 | 
			
		||||
              position={{
 | 
			
		||||
                lat: selected.coordinates[1],
 | 
			
		||||
                lng: selected.coordinates[0],
 | 
			
		||||
              }}
 | 
			
		||||
              onCloseClick={() => {
 | 
			
		||||
                setSelected(null);
 | 
			
		||||
              }}
 | 
			
		||||
            >
 | 
			
		||||
              <div>
 | 
			
		||||
                <h2>{selected.ADDRESS}</h2>
 | 
			
		||||
                <p> {selected.DESC}</p>
 | 
			
		||||
                <div>
 | 
			
		||||
                  <div class="row">
 | 
			
		||||
                    <div className="col-6">
 | 
			
		||||
                      <i class="fas fa-bed fa-3x"></i>{" "}
 | 
			
		||||
                      <span class="popup_nums"> {selected.BEDS} </span>
 | 
			
		||||
                      <i class="fas fa-bath fa-3x"></i>{" "}
 | 
			
		||||
                      <span class="popup_nums"> {selected.BATHS}</span>
 | 
			
		||||
                    </div>
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
          </div>
 | 
			
		||||
        
 | 
			
		||||
        </div>
 | 
			
		||||
 | 
			
		||||
     
 | 
			
		||||
          
 | 
			
		||||
 | 
			
		||||
      </section>
 | 
			
		||||
 | 
			
		||||
    
 | 
			
		||||
                    <div className="col-6 booking_button">
 | 
			
		||||
                      <button>Show Listing</button>
 | 
			
		||||
                    </div>
 | 
			
		||||
                  </div>
 | 
			
		||||
                </div>
 | 
			
		||||
              </div>
 | 
			
		||||
            </InfoWindow>
 | 
			
		||||
          ) : null}
 | 
			
		||||
        </GoogleMap>
 | 
			
		||||
      </div>
 | 
			
		||||
    </div>
 | 
			
		||||
    
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
    ); 
 | 
			
		||||
  }
 | 
			
		||||
  );
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
export default ListingsPage;
 | 
			
		||||
function Locate({ panTo }) {
 | 
			
		||||
  return (
 | 
			
		||||
    <button
 | 
			
		||||
      data-toggle="tooltip"
 | 
			
		||||
      data-placement="right"
 | 
			
		||||
      title="Go to my current location"
 | 
			
		||||
      class="buttonImg"
 | 
			
		||||
      onClick={() => {
 | 
			
		||||
        navigator.geolocation.getCurrentPosition(
 | 
			
		||||
          (position) => {
 | 
			
		||||
            panTo({
 | 
			
		||||
              lat: position.coords.latitude,
 | 
			
		||||
              lng: position.coords.longitude,
 | 
			
		||||
            });
 | 
			
		||||
          },
 | 
			
		||||
          () => null
 | 
			
		||||
        );
 | 
			
		||||
      }}
 | 
			
		||||
    >
 | 
			
		||||
      <img src={compassImg} class="compass" alt="my location" />
 | 
			
		||||
    </button>
 | 
			
		||||
  );
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
function Search({ panTo }) {
 | 
			
		||||
  const {
 | 
			
		||||
    ready,
 | 
			
		||||
    value,
 | 
			
		||||
    suggestions: { status, data },
 | 
			
		||||
    setValue,
 | 
			
		||||
    clearSuggestions,
 | 
			
		||||
  } = usePlacesAutocomplete({
 | 
			
		||||
    requestOptions: {
 | 
			
		||||
      location: { lat: () => 43.6532, lng: () => -79.3832 },
 | 
			
		||||
      radius: 100 * 1000,
 | 
			
		||||
    },
 | 
			
		||||
  });
 | 
			
		||||
 | 
			
		||||
  // https://developers.google.com/maps/documentation/javascript/reference/places-autocomplete-service#AutocompletionRequest
 | 
			
		||||
 | 
			
		||||
  const handleInput = (e) => {
 | 
			
		||||
    setValue(e.target.value);
 | 
			
		||||
  };
 | 
			
		||||
 | 
			
		||||
  const handleSelect = async (address) => {
 | 
			
		||||
    setValue(address, false);
 | 
			
		||||
    clearSuggestions();
 | 
			
		||||
 | 
			
		||||
    try {
 | 
			
		||||
      const results = await getGeocode({ address });
 | 
			
		||||
      const { lat, lng } = await getLatLng(results[0]);
 | 
			
		||||
      panTo({ lat, lng });
 | 
			
		||||
    } catch (error) {
 | 
			
		||||
      console.log("😱 Error: ", error);
 | 
			
		||||
    }
 | 
			
		||||
  };
 | 
			
		||||
 | 
			
		||||
  return (
 | 
			
		||||
    <div className="search">
 | 
			
		||||
      <Combobox onSelect={handleSelect}>
 | 
			
		||||
        <ComboboxInput
 | 
			
		||||
          value={value}
 | 
			
		||||
          onChange={handleInput}
 | 
			
		||||
          disabled={!ready}
 | 
			
		||||
          placeholder="Search your location"
 | 
			
		||||
        />
 | 
			
		||||
        <ComboboxPopover>
 | 
			
		||||
          <ComboboxList>
 | 
			
		||||
            {status === "OK" &&
 | 
			
		||||
              data.map(({ id, description }) => (
 | 
			
		||||
                <ComboboxOption key={id} value={description} />
 | 
			
		||||
              ))}
 | 
			
		||||
          </ComboboxList>
 | 
			
		||||
        </ComboboxPopover>
 | 
			
		||||
      </Combobox>
 | 
			
		||||
    </div>
 | 
			
		||||
  );
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
							
								
								
									
										78
									
								
								src/listings-page/compass.svg
									
										
									
									
									
										Normal file
									
								
							
							
						
						
									
										78
									
								
								src/listings-page/compass.svg
									
										
									
									
									
										Normal file
									
								
							| 
						 | 
				
			
			@ -0,0 +1,78 @@
 | 
			
		|||
<?xml version="1.0" encoding="iso-8859-1"?>
 | 
			
		||||
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 | 
			
		||||
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="25px" y="25px"
 | 
			
		||||
	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
 | 
			
		||||
<circle style="fill:#2C5871;" cx="256" cy="256" r="256"/>
 | 
			
		||||
<path style="fill:#1C4754;" d="M256,0c-7.933,0-15.777,0.38-23.526,1.086C362.829,12.966,464.948,122.548,464.948,256
 | 
			
		||||
	S362.829,499.034,232.474,510.914C240.223,511.62,248.067,512,256,512c141.385,0,256-114.615,256-256S397.385,0,256,0z"/>
 | 
			
		||||
<circle style="fill:#E6F1FF;" cx="256" cy="256" r="221.06"/>
 | 
			
		||||
<path style="fill:#BFCFD6;" d="M256,34.939c-7.948,0-15.795,0.429-23.526,1.247C343.5,47.932,430.009,141.859,430.009,256
 | 
			
		||||
	S343.5,464.068,232.474,475.814c7.731,0.818,15.578,1.247,23.526,1.247c122.089,0,221.061-98.972,221.061-221.061
 | 
			
		||||
	S378.089,34.939,256,34.939z"/>
 | 
			
		||||
<path style="fill:#66C1FF;" d="M159.806,163.214L233.29,278.71l115.5,73.487c2.226,1.417,4.823-1.18,3.406-3.406l-73.487-115.5
 | 
			
		||||
	l-115.496-73.484C160.986,158.389,158.389,160.986,159.806,163.214z"/>
 | 
			
		||||
<path style="fill:#FF4C4C;" d="M159.807,163.215L233.29,278.71l45.419-45.419l-115.494-73.483
 | 
			
		||||
	C160.988,158.39,158.39,160.988,159.807,163.215z"/>
 | 
			
		||||
<circle style="fill:#555A66;" cx="256" cy="256" r="33.03"/>
 | 
			
		||||
<g>
 | 
			
		||||
	<path style="fill:#2C5871;" d="M377.166,142.576c-1.981,0-3.963-0.756-5.474-2.268c-3.024-3.023-3.024-7.925,0-10.949
 | 
			
		||||
		l12.408-12.408c3.023-3.023,7.925-3.023,10.949,0c3.024,3.023,3.024,7.925,0,10.949l-12.408,12.408
 | 
			
		||||
		C381.129,141.82,379.148,142.576,377.166,142.576z"/>
 | 
			
		||||
	<path style="fill:#2C5871;" d="M122.425,397.317c-1.981,0-3.963-0.756-5.474-2.268c-3.024-3.023-3.024-7.925,0-10.949
 | 
			
		||||
		l12.408-12.408c3.023-3.023,7.925-3.023,10.949,0s3.024,7.925,0,10.949L127.9,395.049
 | 
			
		||||
		C126.388,396.56,124.407,397.317,122.425,397.317z"/>
 | 
			
		||||
	<path style="fill:#2C5871;" d="M389.575,397.317c-1.981,0-3.963-0.756-5.474-2.268l-12.408-12.408
 | 
			
		||||
		c-3.024-3.023-3.024-7.925,0-10.949c3.023-3.023,7.925-3.023,10.949,0L395.05,384.1c3.024,3.023,3.024,7.925,0,10.949
 | 
			
		||||
		C393.537,396.56,391.556,397.317,389.575,397.317z"/>
 | 
			
		||||
	<path style="fill:#2C5871;" d="M134.834,142.576c-1.981,0-3.963-0.756-5.474-2.268L116.951,127.9
 | 
			
		||||
		c-3.024-3.023-3.024-7.925,0-10.949c3.023-3.023,7.925-3.023,10.949,0l12.408,12.408c3.024,3.023,3.024,7.925,0,10.949
 | 
			
		||||
		C138.796,141.82,136.815,142.576,134.834,142.576z"/>
 | 
			
		||||
	<path style="fill:#2C5871;" d="M114.668,275.577c-0.709,2.126-3.331,3.118-6.023,3.118c-2.622,0-5.386-0.992-5.882-3.118
 | 
			
		||||
		l-4.535-19.133l-4.606,19.133c-0.496,2.126-3.26,3.118-5.882,3.118c-2.693,0-5.386-0.992-6.024-3.118l-14.031-44.573
 | 
			
		||||
		c-0.071-0.213-0.142-0.567-0.142-0.85c0-2.055,3.26-3.685,5.882-3.685c1.417,0,2.693,0.496,3.047,1.842l11.197,38.408l6.023-24.66
 | 
			
		||||
		c0.425-1.772,2.48-2.551,4.535-2.551c1.984,0,4.039,0.78,4.465,2.551l6.023,24.66l11.197-38.408
 | 
			
		||||
		c0.354-1.346,1.63-1.842,3.047-1.842c2.622,0,5.882,1.63,5.882,3.685c0,0.283-0.071,0.638-0.142,0.85L114.668,275.577z"/>
 | 
			
		||||
	<path style="fill:#2C5871;" d="M420.998,248.72h10.771c1.842,0,2.905,1.772,2.905,3.685c0,1.63-0.921,3.543-2.905,3.543h-10.771
 | 
			
		||||
		v14.243h20.054c1.842,0,2.905,1.913,2.905,4.11c0,1.913-0.921,3.968-2.905,3.968h-25.228c-2.055,0-4.039-0.992-4.039-2.905v-45.991
 | 
			
		||||
		c0-1.913,1.984-2.905,4.039-2.905h25.228c1.984,0,2.905,2.055,2.905,3.968c0,2.197-1.063,4.11-2.905,4.11h-20.054V248.72z"/>
 | 
			
		||||
	<path style="fill:#2C5871;" d="M263.262,108.382l-15.235-28.487v28.487c0,1.913-2.339,2.905-4.606,2.905
 | 
			
		||||
		c-2.338,0-4.606-0.992-4.606-2.905V62.391c0-1.984,2.268-2.905,4.606-2.905c3.331,0,4.677,0.709,6.874,4.89l13.676,26.432V62.321
 | 
			
		||||
		c0-1.984,2.268-2.835,4.606-2.835c2.268,0,4.606,0.85,4.606,2.835v46.061c0,1.913-2.339,2.905-4.606,2.905
 | 
			
		||||
		C266.381,111.287,264.467,110.579,263.262,108.382z"/>
 | 
			
		||||
	<path style="fill:#2C5871;" d="M263.228,431.434c0-10.63-22.747-7.37-22.747-24.164c0-10.559,9.071-14.173,17.22-14.173
 | 
			
		||||
		c4.181,0,13.464,0.992,13.464,5.669c0,1.63-1.134,4.89-3.685,4.89c-2.197,0-3.827-2.693-9.779-2.693
 | 
			
		||||
		c-5.102,0-8.008,2.055-8.008,5.457c0,8.787,22.747,5.74,22.747,24.093c0,10.134-7.087,15.378-16.866,15.378
 | 
			
		||||
		c-9.283,0-16.369-4.677-16.369-8.787c0-1.984,1.843-4.961,4.039-4.961c2.905,0,4.819,5.457,12.047,5.457
 | 
			
		||||
		C259.543,437.599,263.228,435.686,263.228,431.434z"/>
 | 
			
		||||
</g>
 | 
			
		||||
<g>
 | 
			
		||||
</g>
 | 
			
		||||
<g>
 | 
			
		||||
</g>
 | 
			
		||||
<g>
 | 
			
		||||
</g>
 | 
			
		||||
<g>
 | 
			
		||||
</g>
 | 
			
		||||
<g>
 | 
			
		||||
</g>
 | 
			
		||||
<g>
 | 
			
		||||
</g>
 | 
			
		||||
<g>
 | 
			
		||||
</g>
 | 
			
		||||
<g>
 | 
			
		||||
</g>
 | 
			
		||||
<g>
 | 
			
		||||
</g>
 | 
			
		||||
<g>
 | 
			
		||||
</g>
 | 
			
		||||
<g>
 | 
			
		||||
</g>
 | 
			
		||||
<g>
 | 
			
		||||
</g>
 | 
			
		||||
<g>
 | 
			
		||||
</g>
 | 
			
		||||
<g>
 | 
			
		||||
</g>
 | 
			
		||||
<g>
 | 
			
		||||
</g>
 | 
			
		||||
</svg>
 | 
			
		||||
| 
		 After Width: | Height: | Size: 4.3 KiB  | 
| 
						 | 
				
			
			@ -6,6 +6,8 @@
 | 
			
		|||
            "LISTING_ID": 1,
 | 
			
		||||
            "ADDRESS": "8720 Russell Road",
 | 
			
		||||
            "PRICE": 400000,
 | 
			
		||||
            "BEDS":3,
 | 
			
		||||
            "BATHS":3,
 | 
			
		||||
            "IMAGES":[
 | 
			
		||||
 | 
			
		||||
            ],
 | 
			
		||||
| 
						 | 
				
			
			@ -25,6 +27,8 @@
 | 
			
		|||
            "LISTING_ID": 2,
 | 
			
		||||
            "ADDRESS": "1490 Youville Drive",
 | 
			
		||||
            "PRICE": 100000,
 | 
			
		||||
            "BEDS":1,
 | 
			
		||||
            "BATHS":1,
 | 
			
		||||
            "IMAGES":[
 | 
			
		||||
 | 
			
		||||
            ],
 | 
			
		||||
| 
						 | 
				
			
			@ -45,6 +49,8 @@
 | 
			
		|||
            "LISTING_ID": 3,
 | 
			
		||||
            "ADDRESS": "100 Charlie Rogers Place",
 | 
			
		||||
            "PRICE": 200000,
 | 
			
		||||
            "BEDS":2,
 | 
			
		||||
            "BATHS":3,
 | 
			
		||||
            "IMAGES":[
 | 
			
		||||
 | 
			
		||||
            ],
 | 
			
		||||
| 
						 | 
				
			
			@ -66,6 +72,8 @@
 | 
			
		|||
            "LISTING_ID": 4,
 | 
			
		||||
            "ADDRESS": "2785 8th Line Road",
 | 
			
		||||
            "PRICE": 300000,
 | 
			
		||||
            "BEDS":3,
 | 
			
		||||
            "BATHS":3,
 | 
			
		||||
            "IMAGES":[
 | 
			
		||||
 | 
			
		||||
            ],
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -1,6 +1,8 @@
 | 
			
		|||
 | 
			
		||||
#footer{
 | 
			
		||||
    text-align: center;
 | 
			
		||||
    padding: 5% 7%;
 | 
			
		||||
    background-color: white ;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.social-icon{
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue