diff --git a/package-lock.json b/package-lock.json index 1db6c0a..3c81fb4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 13fcc57..7730a1c 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/images/bg1.jpg b/src/images/bg1.jpg new file mode 100644 index 0000000..9caa986 Binary files /dev/null and b/src/images/bg1.jpg differ diff --git a/src/images/fbg1.png b/src/images/fbg1.png new file mode 100644 index 0000000..1e09172 Binary files /dev/null and b/src/images/fbg1.png differ diff --git a/src/images/fbg2.png b/src/images/fbg2.png new file mode 100644 index 0000000..fe37465 Binary files /dev/null and b/src/images/fbg2.png differ diff --git a/src/images/fbg3.png b/src/images/fbg3.png new file mode 100644 index 0000000..8b8019e Binary files /dev/null and b/src/images/fbg3.png differ diff --git a/src/listings-page/ListingsPage.css b/src/listings-page/ListingsPage.css index 80ebdc9..706b707 100644 --- a/src/listings-page/ListingsPage.css +++ b/src/listings-page/ListingsPage.css @@ -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%; -}; \ No newline at end of file +} + +.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% +} + diff --git a/src/listings-page/ListingsPage.js b/src/listings-page/ListingsPage.js index 0e87f8a..60ac2b7 100644 --- a/src/listings-page/ListingsPage.js +++ b/src/listings-page/ListingsPage.js @@ -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 ( - - +
- { +
+ + - listingData.Properties.map(house => { + +
- {selectedProperty && ( - - { - setSelectedProperty(null); - }} - > -
-

{selectedProperty.ADDRESS}

-

{selectedProperty.DESC}

-
-
-
- 1 - 2 - - - -
- -
- - - -
- -
- - -
- - -
- - - )} - - - - - ); - -} - -const MapWrapped = withScriptjs(withGoogleMap(Map)) - - -class ListingsPage extends Component { - render() { - return ( - -
- -
- -
- -
- - -
- - - - -
- - - - - -
- -
-
- -
- Action - Another action - Something else here -
-
-
- -
- -
- - -
-
- - - -
- -
- - -
-
- -
- - - {/* - - - -
- - -
- -
- - -
- -
- - -
- -
- -
- */} - -
- -
- - -
- } - containerElement={
} - mapElement={
} +
+ + {listingData.Properties.map((house) => + (budget >= house.PRICE || !budget) && + (bed == house.BEDS || !bed) && + (bath == house.BATHS || !bath) ? ( + { + setSelected(house); + }} + icon={{ + url: "homes-3.svg", + scaledSize: new window.google.maps.Size(50, 50), + }} + visible={true} /> -
+ ) : ( + { + setSelected(house); + }} + icon={{ + url: "homes-3.svg", + scaledSize: new window.google.maps.Size(50, 50), + }} + visible={false} + /> + ) + )} + {selected ? ( + { + setSelected(null); + }} + > +
+

{selected.ADDRESS}

+

{selected.DESC}

+
+
+
+ {" "} + {selected.BEDS} + {" "} + {selected.BATHS} +
- - -
- -
- - - - -
- - +
+ +
+
+
+ + + ) : null} + + - - - - ); - } + ); } -export default ListingsPage; +function Locate({ panTo }) { + return ( + + ); +} + +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 ( +
+ + + + + {status === "OK" && + data.map(({ id, description }) => ( + + ))} + + + +
+ ); +} diff --git a/src/listings-page/compass.svg b/src/listings-page/compass.svg new file mode 100644 index 0000000..e63f36e --- /dev/null +++ b/src/listings-page/compass.svg @@ -0,0 +1,78 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/listings-page/data/property-data.json b/src/listings-page/data/property-data.json index fea6ad5..887662f 100644 --- a/src/listings-page/data/property-data.json +++ b/src/listings-page/data/property-data.json @@ -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":[ ], diff --git a/src/shared-components/footer-component/Footer.css b/src/shared-components/footer-component/Footer.css index 1118310..fc1d112 100644 --- a/src/shared-components/footer-component/Footer.css +++ b/src/shared-components/footer-component/Footer.css @@ -1,6 +1,8 @@ + #footer{ text-align: center; padding: 5% 7%; + background-color: white ; } .social-icon{