search and filters

This commit is contained in:
ruchi 2021-04-07 15:58:35 -04:00
parent 66783412f0
commit 147dfd376d
11 changed files with 742 additions and 243 deletions

285
package-lock.json generated
View file

@ -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",

View file

@ -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

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 MiB

BIN
src/images/fbg1.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

BIN
src/images/fbg2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

BIN
src/images/fbg3.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.7 KiB

View file

@ -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%
}

View file

@ -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>
);
}

View 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

View file

@ -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":[
],

View file

@ -1,6 +1,8 @@
#footer{
text-align: center;
padding: 5% 7%;
background-color: white ;
}
.social-icon{