search and filters
This commit is contained in:
ruchi
parent
66783412f0
commit
147dfd376d
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",
|
"resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz",
|
||||||
"integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg=="
|
"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": {
|
"@eslint/eslintrc": {
|
||||||
"version": "0.4.0",
|
"version": "0.4.0",
|
||||||
"resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.0.tgz",
|
"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": {
|
"@hapi/address": {
|
||||||
"version": "2.1.4",
|
"version": "2.1.4",
|
||||||
"resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",
|
"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",
|
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.9.1.tgz",
|
||||||
"integrity": "sha512-DvJbbn3dUgMxDnJLH+RZQPnXak1h4ZVYQ7CWiFWjQwBFkVajT4rfw2PdpHLTSTwxrYfnoEXkuBiwkDm6tPMQeA=="
|
"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": {
|
"@restart/context": {
|
||||||
"version": "2.1.4",
|
"version": "2.1.4",
|
||||||
"resolved": "https://registry.npmjs.org/@restart/context/-/context-2.1.4.tgz",
|
"resolved": "https://registry.npmjs.org/@restart/context/-/context-2.1.4.tgz",
|
||||||
|
|
@ -4999,6 +5232,11 @@
|
||||||
"whatwg-url": "^8.0.0"
|
"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": {
|
"debug": {
|
||||||
"version": "4.3.1",
|
"version": "4.3.1",
|
||||||
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
|
"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",
|
"resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz",
|
||||||
"integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ=="
|
"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": {
|
"history": {
|
||||||
"version": "4.10.1",
|
"version": "4.10.1",
|
||||||
"resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
|
"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",
|
"resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
|
||||||
"integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g="
|
"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": {
|
"memory-fs": {
|
||||||
"version": "0.4.1",
|
"version": "0.4.1",
|
||||||
"resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz",
|
"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": {
|
"react-is": {
|
||||||
"version": "16.13.1",
|
"version": "16.13.1",
|
||||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
||||||
|
|
@ -13083,6 +13339,20 @@
|
||||||
"workbox-webpack-plugin": "5.1.4"
|
"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": {
|
"react-transition-group": {
|
||||||
"version": "4.4.1",
|
"version": "4.4.1",
|
||||||
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz",
|
"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": {
|
"supports-color": {
|
||||||
"version": "5.5.0",
|
"version": "5.5.0",
|
||||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
|
"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",
|
"resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
|
||||||
"integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw=="
|
"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": {
|
"table": {
|
||||||
"version": "6.0.7",
|
"version": "6.0.7",
|
||||||
"resolved": "https://registry.npmjs.org/table/-/table-6.0.7.tgz",
|
"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",
|
"resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",
|
||||||
"integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ=="
|
"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": {
|
"util": {
|
||||||
"version": "0.11.1",
|
"version": "0.11.1",
|
||||||
"resolved": "https://registry.npmjs.org/util/-/util-0.11.1.tgz",
|
"resolved": "https://registry.npmjs.org/util/-/util-0.11.1.tgz",
|
||||||
|
|
|
||||||
|
|
@ -14,8 +14,13 @@
|
||||||
"react-google-maps": "^9.4.5",
|
"react-google-maps": "^9.4.5",
|
||||||
"react-router-dom": "^5.2.0",
|
"react-router-dom": "^5.2.0",
|
||||||
"react-scripts": "4.0.3",
|
"react-scripts": "4.0.3",
|
||||||
|
"react-select": "^4.3.0",
|
||||||
"spectre.css": "^0.5.9",
|
"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": {
|
"scripts": {
|
||||||
"start": "react-scripts start",
|
"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{
|
.booking_button{
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
|
|
@ -6,4 +12,33 @@
|
||||||
font-size: 40px;
|
font-size: 40px;
|
||||||
font-weight:bolder;
|
font-weight:bolder;
|
||||||
padding-right: 5%;
|
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 React, { useState, useEffect, Component } from "react";
|
||||||
import {
|
import {
|
||||||
GoogleMap,
|
GoogleMap,
|
||||||
withScriptjs,
|
useLoadScript,
|
||||||
withGoogleMap,
|
|
||||||
Marker,
|
Marker,
|
||||||
InfoWindow,
|
InfoWindow,
|
||||||
useLoadScript
|
} from "@react-google-maps/api";
|
||||||
} from "react-google-maps";
|
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 compassImg from "./compass.svg";
|
||||||
import mapStyles from "./mapStyles";
|
|
||||||
import "./ListingsPage.css";
|
|
||||||
|
|
||||||
|
const libraries = ["places"];
|
||||||
|
|
||||||
|
const mapContainerStyle = {
|
||||||
|
height: "700px",
|
||||||
|
width: "100vm",
|
||||||
|
};
|
||||||
|
|
||||||
function Map(){
|
const options = {
|
||||||
|
styles: mapStyles,
|
||||||
|
disableDefaultUI: true,
|
||||||
|
zoomControl: true,
|
||||||
|
};
|
||||||
|
const center = {
|
||||||
|
lat: 45.4231,
|
||||||
|
lng: -75.6931,
|
||||||
|
};
|
||||||
|
|
||||||
const [selectedProperty, setSelectedProperty] = useState(null);
|
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 (
|
return (
|
||||||
|
|
||||||
|
<div className="main_borders">
|
||||||
<GoogleMap
|
|
||||||
defaultZoom={10}
|
<div class="filters">
|
||||||
defaultCenter={{lat: 45.4231, lng:-75.6931}}
|
<Search class="search" panTo={panTo} />
|
||||||
//https://snazzymaps.com/explore
|
<Locate class="search" panTo={panTo} />
|
||||||
defaultOptions={{styles: mapStyles}}
|
|
||||||
>
|
<Select
|
||||||
|
class="search"
|
||||||
{
|
placeholder="Select Budget"
|
||||||
|
value={selectedBudget} // set selected value
|
||||||
listingData.Properties.map(house => {
|
options={price_filter} // set list of the data
|
||||||
|
onChange={handleBudgetChange} // assign onChange function
|
||||||
console.log(house.PRICE)
|
/>
|
||||||
house.PRICE > 100 ?
|
|
||||||
|
<Select
|
||||||
<Marker
|
class="search"
|
||||||
key={house.LISTING_ID}
|
placeholder="# Beds"
|
||||||
position={{
|
value={selectedBeds} // set selected value
|
||||||
lat: house.coordinates[1],
|
options={bed_filter} // set list of the data
|
||||||
lng: house.coordinates[0]
|
onChange={handleBedChange} // assign onChange function
|
||||||
|
/>
|
||||||
}}
|
|
||||||
|
<Select
|
||||||
onClick={() => {
|
class="search"
|
||||||
setSelectedProperty(house)
|
placeholder="# Baths"
|
||||||
}}
|
value={selectedBaths} // set selected value
|
||||||
|
options={bath_filter} // set list of the data
|
||||||
icon={{
|
onChange={handleBathChange} // assign onChange function
|
||||||
url:"homes-3.svg",
|
/>
|
||||||
scaledSize: new window.google.maps.Size(50,50)
|
</div>
|
||||||
}}
|
|
||||||
|
|
||||||
|
|
||||||
|
<div >
|
||||||
/>
|
<GoogleMap
|
||||||
:
|
id="map"
|
||||||
|
mapContainerStyle={mapContainerStyle}
|
||||||
console.log(house.PRICE)
|
zoom={10}
|
||||||
|
center={center}
|
||||||
|
options={options}
|
||||||
})
|
onLoad={onMapLoad}
|
||||||
}
|
>
|
||||||
|
{listingData.Properties.map((house) =>
|
||||||
|
(budget >= house.PRICE || !budget) &&
|
||||||
{selectedProperty && (
|
(bed == house.BEDS || !bed) &&
|
||||||
|
(bath == house.BATHS || !bath) ? (
|
||||||
<InfoWindow
|
<Marker
|
||||||
position={{
|
key={house.LISTING_ID}
|
||||||
lat: selectedProperty.coordinates[1],
|
position={{
|
||||||
lng: selectedProperty.coordinates[0]
|
lat: house.coordinates[1],
|
||||||
|
lng: house.coordinates[0],
|
||||||
}}
|
}}
|
||||||
onCloseClick={() => {
|
onClick={() => {
|
||||||
setSelectedProperty(null);
|
setSelected(house);
|
||||||
}}
|
}}
|
||||||
>
|
icon={{
|
||||||
<div>
|
url: "homes-3.svg",
|
||||||
<h2>{selectedProperty.ADDRESS}</h2>
|
scaledSize: new window.google.maps.Size(50, 50),
|
||||||
<p> {selectedProperty.DESC}</p>
|
}}
|
||||||
<div>
|
visible={true}
|
||||||
<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>
|
) : (
|
||||||
|
<Marker
|
||||||
|
key={house.LISTING_ID}
|
||||||
|
position={{
|
||||||
|
lat: house.coordinates[1],
|
||||||
</div>
|
lng: house.coordinates[0],
|
||||||
|
}}
|
||||||
</div>
|
onClick={() => {
|
||||||
|
setSelected(house);
|
||||||
|
}}
|
||||||
|
icon={{
|
||||||
|
url: "homes-3.svg",
|
||||||
</section>
|
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 className="col-6 booking_button">
|
||||||
|
<button>Show Listing</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</InfoWindow>
|
||||||
|
) : null}
|
||||||
|
</GoogleMap>
|
||||||
|
</div>
|
||||||
</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,
|
"LISTING_ID": 1,
|
||||||
"ADDRESS": "8720 Russell Road",
|
"ADDRESS": "8720 Russell Road",
|
||||||
"PRICE": 400000,
|
"PRICE": 400000,
|
||||||
|
"BEDS":3,
|
||||||
|
"BATHS":3,
|
||||||
"IMAGES":[
|
"IMAGES":[
|
||||||
|
|
||||||
],
|
],
|
||||||
|
|
@ -25,6 +27,8 @@
|
||||||
"LISTING_ID": 2,
|
"LISTING_ID": 2,
|
||||||
"ADDRESS": "1490 Youville Drive",
|
"ADDRESS": "1490 Youville Drive",
|
||||||
"PRICE": 100000,
|
"PRICE": 100000,
|
||||||
|
"BEDS":1,
|
||||||
|
"BATHS":1,
|
||||||
"IMAGES":[
|
"IMAGES":[
|
||||||
|
|
||||||
],
|
],
|
||||||
|
|
@ -45,6 +49,8 @@
|
||||||
"LISTING_ID": 3,
|
"LISTING_ID": 3,
|
||||||
"ADDRESS": "100 Charlie Rogers Place",
|
"ADDRESS": "100 Charlie Rogers Place",
|
||||||
"PRICE": 200000,
|
"PRICE": 200000,
|
||||||
|
"BEDS":2,
|
||||||
|
"BATHS":3,
|
||||||
"IMAGES":[
|
"IMAGES":[
|
||||||
|
|
||||||
],
|
],
|
||||||
|
|
@ -66,6 +72,8 @@
|
||||||
"LISTING_ID": 4,
|
"LISTING_ID": 4,
|
||||||
"ADDRESS": "2785 8th Line Road",
|
"ADDRESS": "2785 8th Line Road",
|
||||||
"PRICE": 300000,
|
"PRICE": 300000,
|
||||||
|
"BEDS":3,
|
||||||
|
"BATHS":3,
|
||||||
"IMAGES":[
|
"IMAGES":[
|
||||||
|
|
||||||
],
|
],
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,8 @@
|
||||||
|
|
||||||
#footer{
|
#footer{
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 5% 7%;
|
padding: 5% 7%;
|
||||||
|
background-color: white ;
|
||||||
}
|
}
|
||||||
|
|
||||||
.social-icon{
|
.social-icon{
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue