diff --git a/package-lock.json b/package-lock.json index b7192cb..1110de5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1271,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", @@ -1916,6 +1921,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", @@ -5108,6 +5263,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", @@ -7570,6 +7730,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", @@ -15242,6 +15407,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", @@ -15952,6 +16122,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 2879447..0a896a8 100644 --- a/package.json +++ b/package.json @@ -34,9 +34,13 @@ "react-router-dom": "^5.2.0", "react-scripts": "4.0.3", "react-select": "^4.3.0", - "reactstrap": "^8.9.0", "spectre.css": "^0.5.9", "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", + "reactstrap": "^8.9.0", "yup": "^0.32.9" }, "scripts": { diff --git a/src/homePage/Homepage.css b/src/homePage/Homepage.css deleted file mode 100644 index 018d5c6..0000000 --- a/src/homePage/Homepage.css +++ /dev/null @@ -1,126 +0,0 @@ -.colored-section { - background-color: #e7dec8; - color: #000000; - white-space: nowrap; -} - - -.white-section { - background-color: #ffffff; - padding-top: 10rem; - padding-bottom: 5rem; - padding-left: 18%; -} - -#title .container-fluid { - padding: 5% 34% 6%; - text-align: left; - font-family: "Georgia"; -} - -#features .container-fluid { - padding: 2% 14% 4%; - text-align: left; - font-family: "Georgia"; -} - - -.housesIntro{ - width: 1200px; - height: 800px; -} - -.contactIntro{ - padding-left: 30%; - padding-right: 30%; - padding-bottom: 80px; -} - -.headerImg{ - width: 1200px; - height: 800px; -} - -.button-1 { - background-color: rgb(0, 0, 0); - border-color: transparent; - color: #ffffff; - font-size: 20px; -} - -.button-1:hover { - background-color: rgb(92, 92, 92); - color: #ffffff; - border-color: transparent; -} - -.buttonhelper { - padding-left: 45%; - padding-top: 15px; -} - -.buttonka{ - padding-top: 2px; -} - -.prev-icon, -.next-icon { - height: 210px; - width: 100px; - outline: black; - background-size: 100%, 100%; - border-radius: 50%; - background-image: none; - text-shadow: 2px 2px 5px black; -} - -.next-icon:after -{ - content: '>'; - font-size: 140px; - color: rgb(255, 255, 255); - text-shadow: 2px 2px 5px black; -} - -.prev-icon:after { - content: '<'; - font-size: 140px; - color: rgb(255, 255, 255); - text-shadow: 2px 2px 5px black; -} - -ol.carousel-indicators { - position: absolute; - bottom: 5px; - margin: 0; - left: 0; - right: 0; - width: auto; - } - - ol.carousel-indicators li, - ol.carousel-indicators li.active { - width: 1rem; - height: 1rem; - margin: 0; - border-radius: 50%; - border: 0; - background: transparent; - box-shadow: 0 0 1px 1px black; - } - - ol.carousel-indicators li { - background: rgb(255, 255, 255); - margin-left: .5rem; - margin-right: .5rem; - box-shadow: 0 0 1px 1px black; - } - - ol.carousel-indicators li.active { - background: #17a2b8; - box-shadow: 0 0 1px 1px black; - } - -.homePage{ - padding-bottom: 15%; -} \ No newline at end of file diff --git a/src/homePage/Homepage.js b/src/homePage/Homepage.js deleted file mode 100644 index dc2ce32..0000000 --- a/src/homePage/Homepage.js +++ /dev/null @@ -1,103 +0,0 @@ -import { Component } from "react"; -import "./Homepage.css"; -import house1 from "../images/house1.jpg"; -import house2 from "../images/house2.jpg"; -import house3 from "../images/house3.jpg"; -import house4 from "../images/house4.jpg"; -import Carousel from "react-bootstrap/Carousel"; -import Button from "react-bootstrap/Button"; -import { withTranslation } from "react-i18next"; - - - -class Homepage extends Component { - constructor(props) { - super(props); - this.state = { - nextIcon: , - prevIcon: , - }; - } - - render() { - const { t } = this.props; - const { nextIcon, prevIcon } = this.state; - return ( -
-
-
-
-
-

{t("Slogan_1")}

-

{t("Slogan_2")}

-
-
-
-
-
-
- - - First House - -

100 Charlie Rogers, Kanata, ON K2V 1A7

-

{t("Rooms")}

-
- -
-
-
- - Second House - -

1490 Youville Drive, Orléans, ON K1C 2X8

-

{t("Rooms")}

-
- -
-
-
- - Third House - -

8720 Russell Road, Navan, ON K4B 1J1

-

{t("Rooms")}

-
- -
-
-
- - Fourth House - -

2785 8th Line Road, Metcalfe, ON K0A 2P0

-

{t("Rooms")}

-
- -
-
-
-
-
-
-
-
-

{t("Desc")}

-

{t("Home1")}

- {t("Home2")}

- {t("Home3")}

- {t("Home4")}

- {t("Home5")}

- {t("Home6")}

-
-
-
-
-
-
-
- ); - } -} - -export default withTranslation()(Homepage); 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 4d17a58..c9bbe8c 100644 --- a/src/listings-page/ListingsPage.js +++ b/src/listings-page/ListingsPage.js @@ -2,198 +2,354 @@ import React, { useState, useEffect, Component } from "react"; import { GoogleMap, - withScriptjs, - withGoogleMap, + useLoadScript, Marker, - InfoWindow -} from "react-google-maps"; -import * as listingData from "./data/property-data.json"; + InfoWindow, +} 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"; -function Map() { +import compassImg from "./compass.svg"; - const [selectedProperty, setSelectedProperty] = useState(null); +const libraries = ["places"]; +const mapContainerStyle = { + height: "700px", + width: "100vm", +}; +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 => ( - - { - setSelectedProperty(house) - }} - - icon={{ - url: "homes-3.svg", - scaledSize: new window.google.maps.Size(50, 50) - }} +
+
+ + + - - ))} - - - {selectedProperty && ( - - { - setSelectedProperty(null); - }} - > -
-

{selectedProperty.ADDRESS}

-

{selectedProperty.DESC}

-
-
- -
- 1 - 2 - - - -
- -
- - - -
- -
- - -
- - -
-
- - )} - - - - - - - - - ); - -} - -const MapWrapped = withScriptjs(withGoogleMap(Map)) - - -class ListingsPage extends Component { - render() { - return ( - -
- -
- - - {/* - - - -
- - -
- - - - - -
- -
- */} - -
- -
- -
-
-

Map

-
-
- -
- } - containerElement={
} - mapElement={
} - /> -
- - - - -
- -
- - - - -
- - +