smll fixes

This commit is contained in:
ruchi 2021-04-08 17:02:38 -04:00
commit dacadcdb2d
23 changed files with 711 additions and 127 deletions

View file

@ -3,7 +3,7 @@
The Real Estate Website using React made by Ruchira Perrera, Sam Oyediran, Batuhan Basoglu, and Kene Ojukwu.
After npm start execute the command "node src/shared-components/contact-us/index.js" in order to set up the backend of the contact form.
After npm start execute the command "node src/shared-components/contact-us/index.js" in order to set up the backend of the contact form. (Optional)
# Authors

View file

@ -3,12 +3,15 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@reach/combobox": "^0.10.5",
"@react-google-maps/api": "^1.9.0",
"@testing-library/jest-dom": "^5.11.10",
"@testing-library/react": "^11.2.5",
"@testing-library/user-event": "^12.8.3",
"axios": "^0.21.1",
"bootstrap": "^4.6.0",
"cors": "^2.8.5",
"date-fns": "^2.13.0",
"email-validator": "^2.0.4",
"express": "^4.17.1",
"flag-icon-css": "^3.5.0",
@ -34,13 +37,10 @@
"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",
"@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",
"spectre.css": "^0.5.9",
"use-places-autocomplete": "^1.3.5",
"web-vitals": "^1.1.1",
"yup": "^0.32.9"
},
"scripts": {

View file

@ -33,7 +33,10 @@
"Home5": "members who want to benefit from our deals. Above are some houses which can interest you. Feel free to",
"Home6": "click the buttons above to explore the houses you want.",
"Desc": "Description",
"Rooms": "1 Bedroom, 2 Bathroom",
"Rooms": "2 Bedroom, 3 Bathroom",
"Rooms1": "1 Bedroom, 1 Bathroom",
"Rooms2": "3 Bedroom, 3 Bathroom",
"Rooms3": "3 Bedroom, 3 Bathroom",
"Danger1": "Message could not send.",
"Danger2": "There are some errors in your contact form.",
"Success1": "The message is successfully sent.",

View file

@ -33,7 +33,10 @@
"Home5": "membres qui souhaitent bénéficier de nos offres. Ci-dessus, quelques maisons qui peuvent vous intéresser. N'hésitez",
"Home6": "pas à cliquez sur les boutons ci-dessus pour explorer les maisons que vous souhaitez.",
"Desc": "La Description",
"Rooms": "1 chambre, 2 salles de bains",
"Rooms": "2 chambre, 3 salles de bains",
"Rooms1": "1 chambre, 1 salles de bains",
"Rooms2": "3 chambre, 3 salles de bains",
"Rooms3": "3 chambre, 3 salles de bains",
"Danger1": "Le message n'a pas pu être envoyé.",
"Danger2": "Il y a des erreurs dans votre formulaire de contact.",
"Success1": "Le message a été envoyé avec succès.",

View file

@ -1,82 +1,31 @@
import React, { useEffect } from "react";
import React from "react";
import Footer from "./shared-components/footer-component/Footer";
import Navbar from "./shared-components/navbar-component/Navbar";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import i18next from "i18next";
import { useTranslation } from "react-i18next";
import Cookies from "js-cookie";
import HomePage from "./homePage/Homepage";
import ListingsPage from "./listings-page/ListingsPage";
import AgentPage from "./agent-page/AgentPage";
import ListingPage from "./listings-page/single-listing/listing-page";
import ListingPage1 from "./listings-page/single-listing-1/listing-page-1";
import ListingPage2 from "./listings-page/single-listing-2/listing-page-2";
import ListingPage3 from "./listings-page/single-listing-3/listing-page-3";
import ListingPage4 from "./listings-page/single-listing-4/listing-page-4";
import Login from "./login-page/Login";
import Account from "./login-page/account/Account";
import ContactUs from "./shared-components/contact-us/contact-us";
const langauges = [
{
code: "fr",
name: "Français",
country_code: "fr",
},
{
code: "en",
name: "English",
country_code: "gb",
},
];
function App() {
const currentLanguageCode = Cookies.get("i18next") || "en";
const currentLanguage = langauges.find(
(lang) => lang.code === currentLanguageCode
);
const { t } = useTranslation();
useEffect(() => {
document.body.dir = currentLanguage.dir || "ltr";
}, [currentLanguage]);
return (
<div className="App">
{/* create the translations button */}
<div className="container">
<div className="d-flex justify-content-end">
{/* <!-- Example single danger button --> */}
<div class="btn-group">
<button
type="button"
class="btn btn-link dropdown-toggle"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<i class="fas fa-globe"></i>
</button>
<div class="dropdown-menu">
{langauges.map(({ code, name, country_code }) => (
<button
class="dropdown-item"
key={code}
onClick={() => i18next.changeLanguage(code)}
disabled={code === currentLanguageCode}
>
<span
className={`flag-icon flag-icon-${country_code} mx-2`}
></span>
{name}
</button>
))}
</div>
</div>
</div>
</div>
<BrowserRouter>
<Navbar></Navbar>
<Switch>
<Route exact path="/" component={HomePage}></Route>
<Route path="/listings" component={ListingsPage}></Route>
<Route path="/agents" component={AgentPage}></Route>
<Route path="/listing-page" component={ListingPage}></Route>
<Route path="/listing-page-1" component={ListingPage1}></Route>
<Route path="/listing-page-2" component={ListingPage2}></Route>
<Route path="/listing-page-3" component={ListingPage3}></Route>
<Route path="/listing-page-4" component={ListingPage4}></Route>
<Route path="/login" component={Login}></Route>
<Route path="/contact-us" component={ContactUs}></Route>
<Route path="/account" component={Account}></Route>

View file

@ -43,7 +43,7 @@ class Homepage extends Component {
<h3 style={{ fontSize: "250%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>100 Charlie Rogers, Kanata, ON K2V 1A7</h3>
<h2 style={{ fontSize: "150%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>{t("Rooms")}</h2>
<div className="buttonka">
<Button href="/listings" variant="info">{t("Info")}</Button>
<Button href="/listing-page-3" variant="info">{t("Info")}</Button>
</div>
</Carousel.Caption>
</Carousel.Item>
@ -51,9 +51,9 @@ class Homepage extends Component {
<img className="headerImg" src={house2} alt="Second House" />
<Carousel.Caption>
<h3 style={{ fontSize: "250%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>1490 Youville Drive, Orléans, ON K1C 2X8</h3>
<h2 style={{ fontSize: "150%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>{t("Rooms")}</h2>
<h2 style={{ fontSize: "150%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>{t("Rooms1")}</h2>
<div className="buttonka">
<Button href="/listings" variant="info">{t("Info")}</Button>
<Button href="/listing-page-2" variant="info">{t("Info")}</Button>
</div>
</Carousel.Caption>
</Carousel.Item>
@ -61,9 +61,9 @@ class Homepage extends Component {
<img className="headerImg" src={house3} alt="Third House" />
<Carousel.Caption>
<h3 style={{ fontSize: "250%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>8720 Russell Road, Navan, ON K4B 1J1</h3>
<h2 style={{ fontSize: "150%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>{t("Rooms")}</h2>
<h2 style={{ fontSize: "150%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>{t("Rooms2")}</h2>
<div className="buttonka">
<Button href="/listings" variant="info">{t("Info")}</Button>
<Button href="/listing-page-1" variant="info">{t("Info")}</Button>
</div>
</Carousel.Caption>
</Carousel.Item>
@ -71,9 +71,9 @@ class Homepage extends Component {
<img className="headerImg" src={house4} alt="Fourth House" />
<Carousel.Caption>
<h3 style={{ fontSize: "250%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>2785 8th Line Road, Metcalfe, ON K0A 2P0</h3>
<h2 style={{ fontSize: "150%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>{t("Rooms")}</h2>
<h2 style={{ fontSize: "150%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>{t("Rooms3")}</h2>
<div className="buttonka">
<Button href="/listings" variant="info">{t("Info")}</Button>
<Button href="/listing-page-4" variant="info">{t("Info")}</Button>
</div>
</Carousel.Caption>
</Carousel.Item>

View file

Before

Width:  |  Height:  |  Size: 714 KiB

After

Width:  |  Height:  |  Size: 714 KiB

View file

@ -265,7 +265,8 @@ export default function ListingsPage() {
</div>
<div className="col-6 booking_button">
<button>Show Listing</button>
<button onClick={() => { window.location.href='/listing-page-'+selected.LISTING_ID
}}>Show Listing</button>
</div>
</div>
</div>

View file

@ -1,6 +1,7 @@
.single-listing{
.single-listing-1{
padding: 7% 15%;
/* background-color: darksalmon; */
text-align: center;
}
.listing-header{
@ -13,32 +14,24 @@
/* font-style: italic; */
}
.title-icon{
}
.listing-carousel{
margin: 5% 15%;
width: 70%;
/* padding-right: 10; */
}
.carousel-img{
/* width: 70%; */
}
.amentities{
border: 1px solid black;
/* padding: 5% 0; */
margin: 3% 40%;
padding: 1% 0%;
/* padding: 1% 0%; */
}
.amentities-text{
font-size: 2rem;
}
.amentities-icon{
margin: 0% 5%;
padding: 2% 7%;
}
.description-box{
@ -49,10 +42,6 @@
.description-title{
padding: 2% 0%;
}
.listing-description{
}
.booking-btn{

View file

@ -0,0 +1,135 @@
import React from "react";
import "./listing-page-1.css";
import { Link } from "react-router-dom";
// import house images
import house_img1 from "../../images/house3.jpg";
import house_img2 from "../../images/house1-2.jpg";
import house_img3 from "../../images/house1-3.jpg";
const ListingPage1 = () => {
return (
<div className="single-listing-1">
{/* Listing header */}
<div className="row listing-header">
<div className="col-12">
<h2 className="listing-title">
<i class="fas fa-home title-icon"></i> 8720 Russell Road
</h2>
</div>
</div>
{/* Carousel for images of the listings */}
<div className="listing-carousel">
<div
id="carouselExampleControls"
class="carousel slide"
data-ride="carousel"
>
<div class="carousel-inner">
<div class="carousel-item active carousel-img">
<img
src={house_img1}
class="d-block w-100"
alt="listing-img"
></img>
</div>
<div class="carousel-item carousel-img">
<img
src={house_img2}
class="d-block w-100"
alt="listing-img"
></img>
</div>
<div class="carousel-item">
<img
src={house_img3}
class="d-block w-100"
alt="listing-img"
></img>
</div>
</div>
<a
class="carousel-control-prev"
href="#carouselExampleControls"
role="button"
data-slide="prev"
>
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a
class="carousel-control-next"
href="#carouselExampleControls"
role="button"
data-slide="next"
>
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
{/* Text box for listing amenities */}
<div className="amentities">
<span className="amentities-text">2</span>
<i class="fas fa-bed fa-3x amentities-icon"></i>
<span className="amentities-text">4</span>
<i class="fas fa-bath fa-3x amentities-icon"></i>
</div>
{/* Description for the listing */}
<div className="description-box">
<h2 className="description-title">Description</h2>
<p className="listing-description">
RUN DON'T WALK to this beautiful former Jayman show home. This home
has every feature and convenience you could want in a home. When you
enter you will be greeted with a large entry way, open concept main
floor with a very spacious chef-like kitchen, the big eat in dinning
area is an entertainers dream and plenty of room in the living room as
to cozy up to the fireplace. When you head upstairs the owner 's suite
will impress with a gorgeous ensuite consisting of a large soaker tub,
oversized shower, separate vanities, in-floor heating and 2 separate
closest. You will also find a nice sized flex room, spacious laundry
room up stairs, 4 piece main bathroom and 2 more bedrooms. Then head
downstairs where you will find another bedroom, bathroom and Theatre
room with wet bar and beverage station that is perfect for any movie
lover. Must not forget that this home is air conditioned, has front
and back irrigation outside and speakers throughout the house. All of
this can be yours in the lake community of Auburn Bay close to all
amenities and year round lake access just a short distance away
</p>
<div className="booking-btn">
<Link to="/contact-us">
<button type="button" class="btn btn-lg btn-info">
Book Showing
</button>
</Link>
</div>
</div>
</div>
);
};
// sources for the images used
//images.adsttc.com/media/images/524c/2511/e8e4/4e67/bf00/03c3/large_jpg/Tetris_House_03.jpg?1380721927
//House description
// ->Link 1 -https://www.realtor.ca/real-estate/23018057/9811-elbow-drive-calgary-haysboro
// images
// 1 ->house1.jpg
// 2 ->//images.adsttc.com/media/images/524c/2511/e8e4/4e67/bf00/03c3/large_jpg/Tetris_House_03.jpg?1380721927
// 3 ->https://s3.amazonaws.com/on1-wp/wp-content/uploads/2018/08/3191-NW-Jenna-22-of-49v2-1024x683.jpg
//-> Link2 -> https://www.realtor.ca/real-estate/23020015/lot-14-67-seastone-drive-port-howe-port-howe
// 1 ->house2.jpg
// 2 ->https://static.photocdn.pt/images/articles/2019/12/24/How_to_Take_Gorgeous_Interior_Real_Estate_Photos.jpg
// 3 ->https://i.pinimg.com/originals/f3/72/87/f372870f4f99d3278193a3970aa394ce.jpg
//->Link3 -> https://www.realtor.ca/real-estate/23020040/1035-butler-boulevard-petawawa-laurentian-highlands
// 1 ->house3.jpg
// 2 ->https://miro.medium.com/max/1200/1*EyGqOwy0wQwKHUgi3xpQZA.png
// 3 ->https://i.pinimg.com/originals/9b/fe/76/9bfe76b23f7ed9dcb35f7553b8255f48.jpg
//->Link4 -> https://www.realtor.ca/real-estate/23020103/62-riddle-court-north-bay
// 1 ->house4.jpg
// 2 ->https://pictureitsoldfl.com/wp-content/uploads/2016/07/305-Rudder-Cay-Way-Jupiter-FL-print-014-28-Family-Room-4200x2800-300dpi-1170x780.jpg
// 3 ->https://www.tlcinteriors.com.au/wp-content/uploads/2018/06/hamptons-style-kitchen-from-metricon-bayville-display-home.jpg
export default ListingPage1;

View file

@ -1,10 +1,10 @@
import React from "react";
import { shallow } from "enzyme";
import ListingPage from "./listing-page";
import ListingPage1 from "./listing-page-1";
describe("ListingPage", () => {
describe("ListingPage1", () => {
test("matches snapshot", () => {
const wrapper = shallow(<ListingPage />);
const wrapper = shallow(<ListingPage1 />);
expect(wrapper).toMatchSnapshot();
});
});

View file

@ -0,0 +1,51 @@
.single-listing-2{
padding: 7% 15%;
/* background-color: darksalmon; */
text-align: center;
}
.listing-header{
border: 1px solid black;
text-align: left;
padding: 1%;
}
.listing-title{
font-size: 2.5rem;
/* font-style: italic; */
}
.listing-carousel{
margin: 5% 15%;
width: 70%;
/* padding-right: 10; */
}
.amentities{
border: 1px solid black;
/* padding: 5% 0; */
margin: 3% 40%;
/* padding: 1% 0%; */
}
.amentities-text{
font-size: 2rem;
}
.amentities-icon{
padding: 2% 7%;
}
.description-box{
border: 1px solid black;
padding: 5%;
text-align: left;
}
.description-title{
padding: 2% 0%;
}
.booking-btn{
padding: 2% 0%;
text-align: center;
}

View file

@ -0,0 +1,138 @@
import React from "react";
import "./listing-page-2.css";
import { Link } from "react-router-dom";
// import house images
import house_img1 from "../../images/house2.jpg";
import house_img2 from "../../images/house2-2.jpg";
import house_img3 from "../../images/house2-3.jpg";
const ListingPage2 = () => {
return (
<div className="single-listing-2">
{/* Listing header */}
<div className="row listing-header">
<div className="col-12">
<h2 className="listing-title">
<i class="fas fa-home title-icon"></i> 1490 Youville Drive
</h2>
</div>
</div>
{/* Carousel for images of the listings */}
<div className="listing-carousel">
<div
id="carouselExampleControls"
class="carousel slide"
data-ride="carousel"
>
<div class="carousel-inner">
<div class="carousel-item active carousel-img">
<img
src={house_img1}
class="d-block w-100"
alt="listing-img"
></img>
</div>
<div class="carousel-item carousel-img">
<img
src={house_img2}
class="d-block w-100"
alt="listing-img"
></img>
</div>
<div class="carousel-item">
<img
src={house_img3}
class="d-block w-100"
alt="listing-img"
></img>
</div>
</div>
<a
class="carousel-control-prev"
href="#carouselExampleControls"
role="button"
data-slide="prev"
>
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a
class="carousel-control-next"
href="#carouselExampleControls"
role="button"
data-slide="next"
>
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
{/* Text box for listing amenities */}
<div className="amentities">
<span className="amentities-text">1</span>
<i class="fas fa-bed fa-3x amentities-icon"></i>
<span className="amentities-text">1</span>
<i class="fas fa-bath fa-3x amentities-icon"></i>
</div>
{/* Description for the listing */}
<div className="description-box">
<h2 className="description-title">Description</h2>
<p className="listing-description">
Nature at its Finest The Shores of Toney Bay are located at the mouth
of River Phillip where it meets the Northumberland Straight with
direct access to the incredible recreational waterways of River
Phillip and nature rich Toney Bay. This nature lovers paradise boasts
a plethora of migratory bird life and the rich fish stock of River
Philip. The warm waters of the Northumberland Straight are swimmable
from your shorefront, easy access to year-around activities and close
proximity to the quaint community of Pugwash make this an ideal spot
for a permeant residence or cottage. There are also ocean view /
deeded access lots available. Large lots with unobstructed views and
well away from highway noise. Swim in the warm waters at beautiful
Heather's Beach just 4km away, fly fishing in the spring on River
Phillip, book at tee time at Northumberland links, 16km away or enjoy
a day at the Luxury Fox Harb'r Resort and Spa less then 30 mins away,
and in winter enjoy skiing at Ski Wentworth a short 30 minutes drive.
Lots are flat, cleared and ready for your dream home. All septic and
building lot approvals are in place, good roads, and power to the lot
line are included. Please take a few minutes to watch the video of the
stunning Shores at Toney Bay
</p>
<div className="booking-btn">
<Link to="/contact-us">
<button type="button" class="btn btn-lg btn-info">
Book Showing
</button>
</Link>
</div>
</div>
</div>
);
};
// sources for the images used
//images.adsttc.com/media/images/524c/2511/e8e4/4e67/bf00/03c3/large_jpg/Tetris_House_03.jpg?1380721927
//House description
// ->Link 1 -https://www.realtor.ca/real-estate/23018057/9811-elbow-drive-calgary-haysboro
// images
// 1 ->house1.jpg
// 2 ->//images.adsttc.com/media/images/524c/2511/e8e4/4e67/bf00/03c3/large_jpg/Tetris_House_03.jpg?1380721927
// 3 ->https://s3.amazonaws.com/on1-wp/wp-content/uploads/2018/08/3191-NW-Jenna-22-of-49v2-1024x683.jpg
//-> Link2 -> https://www.realtor.ca/real-estate/23020015/lot-14-67-seastone-drive-port-howe-port-howe
// 1 ->house2.jpg
// 2 ->https://static.photocdn.pt/images/articles/2019/12/24/How_to_Take_Gorgeous_Interior_Real_Estate_Photos.jpg
// 3 ->https://i.pinimg.com/originals/f3/72/87/f372870f4f99d3278193a3970aa394ce.jpg
//->Link3 -> https://www.realtor.ca/real-estate/23020040/1035-butler-boulevard-petawawa-laurentian-highlands
// 1 ->house3.jpg
// 2 ->https://miro.medium.com/max/1200/1*EyGqOwy0wQwKHUgi3xpQZA.png
// 3 ->https://i.pinimg.com/originals/9b/fe/76/9bfe76b23f7ed9dcb35f7553b8255f48.jpg
//->Link4 -> https://www.realtor.ca/real-estate/23020103/62-riddle-court-north-bay
// 1 ->house4.jpg
// 2 ->https://pictureitsoldfl.com/wp-content/uploads/2016/07/305-Rudder-Cay-Way-Jupiter-FL-print-014-28-Family-Room-4200x2800-300dpi-1170x780.jpg
// 3 ->https://www.tlcinteriors.com.au/wp-content/uploads/2018/06/hamptons-style-kitchen-from-metricon-bayville-display-home.jpg
export default ListingPage2;

View file

@ -0,0 +1,10 @@
import React from "react";
import { shallow } from "enzyme";
import ListingPage2 from "./listing-page-2";
describe("ListingPage2", () => {
test("matches snapshot", () => {
const wrapper = shallow(<ListingPage2 />);
expect(wrapper).toMatchSnapshot();
});
});

View file

@ -0,0 +1,51 @@
.single-listing-3{
padding: 7% 15%;
/* background-color: darksalmon; */
text-align: center;
}
.listing-header{
border: 1px solid black;
text-align: left;
padding: 1%;
}
.listing-title{
font-size: 2.5rem;
/* font-style: italic; */
}
.listing-carousel{
margin: 5% 15%;
width: 70%;
/* padding-right: 10; */
}
.amentities{
border: 1px solid black;
/* padding: 5% 0; */
margin: 3% 40%;
/* padding: 1% 0%; */
}
.amentities-text{
font-size: 2rem;
}
.amentities-icon{
padding: 2% 7%;
}
.description-box{
border: 1px solid black;
padding: 5%;
text-align: left;
}
.description-title{
padding: 2% 0%;
}
.booking-btn{
padding: 2% 0%;
text-align: center;
}

View file

@ -0,0 +1,133 @@
import React from "react";
import "./listing-page-3.css";
import { Link } from "react-router-dom";
// import house images
import house_img1 from "../../images/house1.jpg";
import house_img2 from "../../images/house3-2.jpg";
import house_img3 from "../../images/house3-3.jpg";
const ListingPage3 = () => {
return (
<div className="single-listing-3">
{/* Listing header */}
<div className="row listing-header">
<div className="col-12">
<h2 className="listing-title">
<i class="fas fa-home title-icon"></i> 100 Charlie Rogers Place
</h2>
</div>
</div>
{/* Carousel for images of the listings */}
<div className="listing-carousel">
<div
id="carouselExampleControls"
class="carousel slide"
data-ride="carousel"
>
<div class="carousel-inner">
<div class="carousel-item active carousel-img">
<img
src={house_img1}
class="d-block w-100"
alt="listing-img"
></img>
</div>
<div class="carousel-item carousel-img">
<img
src={house_img2}
class="d-block w-100"
alt="listing-img"
></img>
</div>
<div class="carousel-item">
<img
src={house_img3}
class="d-block w-100"
alt="listing-img"
></img>
</div>
</div>
<a
class="carousel-control-prev"
href="#carouselExampleControls"
role="button"
data-slide="prev"
>
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a
class="carousel-control-next"
href="#carouselExampleControls"
role="button"
data-slide="next"
>
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
{/* Text box for listing amenities */}
<div className="amentities">
<span className="amentities-text">2</span>
<i class="fas fa-bed fa-3x amentities-icon"></i>
<span className="amentities-text">3</span>
<i class="fas fa-bath fa-3x amentities-icon"></i>
</div>
{/* Description for the listing */}
<div className="description-box">
<h2 className="description-title">Description</h2>
<p className="listing-description">
Custom, Hi-Ranch home located in sought after neighborhood in the
Heart of Petawawa. This home features 2+1 bedrooms and 4 bathrooms.
Main level features spacious foyer, hardwood staircase, gleaming
hardwood floors and open concept living. Large windows provide lots of
natural light, vaulted ceilings in living room, a spectacular spacious
kitchen with stainless steel appliances and large island. Master
bedroom with walk through closet and 3 piece en-suite with custom tile
shower and heated tile floor. Lower level features a finished rec room
with cozy gas fireplace, bedroom and 3 piece bathroom. Patio door in
foyer leads to large private backyard with no rear neighbours,
spacious wood deck and hot tub. Double attached garage completes the
package. Pack your backs and move right in! No Conveyances of offers
until Friday April 9th at 3PM however the seller has the right to view
and may accept pre-emptive offers
</p>
<div className="booking-btn">
<Link to="/contact-us">
<button type="button" class="btn btn-lg btn-info">
Book Showing
</button>
</Link>
</div>
</div>
</div>
);
};
// sources for the images used
//images.adsttc.com/media/images/524c/2511/e8e4/4e67/bf00/03c3/large_jpg/Tetris_House_03.jpg?1380721927
//House description
// ->Link 1 -https://www.realtor.ca/real-estate/23018057/9811-elbow-drive-calgary-haysboro
// images
// 1 ->house1.jpg
// 2 ->//images.adsttc.com/media/images/524c/2511/e8e4/4e67/bf00/03c3/large_jpg/Tetris_House_03.jpg?1380721927
// 3 ->https://s3.amazonaws.com/on1-wp/wp-content/uploads/2018/08/3191-NW-Jenna-22-of-49v2-1024x683.jpg
//-> Link2 -> https://www.realtor.ca/real-estate/23020015/lot-14-67-seastone-drive-port-howe-port-howe
// 1 ->house2.jpg
// 2 ->https://static.photocdn.pt/images/articles/2019/12/24/How_to_Take_Gorgeous_Interior_Real_Estate_Photos.jpg
// 3 ->https://i.pinimg.com/originals/f3/72/87/f372870f4f99d3278193a3970aa394ce.jpg
//->Link3 -> https://www.realtor.ca/real-estate/23020040/1035-butler-boulevard-petawawa-laurentian-highlands
// 1 ->house3.jpg
// 2 ->https://miro.medium.com/max/1200/1*EyGqOwy0wQwKHUgi3xpQZA.png
// 3 ->https://i.pinimg.com/originals/9b/fe/76/9bfe76b23f7ed9dcb35f7553b8255f48.jpg
//->Link4 -> https://www.realtor.ca/real-estate/23020103/62-riddle-court-north-bay
// 1 ->house4.jpg
// 2 ->https://pictureitsoldfl.com/wp-content/uploads/2016/07/305-Rudder-Cay-Way-Jupiter-FL-print-014-28-Family-Room-4200x2800-300dpi-1170x780.jpg
// 3 ->https://www.tlcinteriors.com.au/wp-content/uploads/2018/06/hamptons-style-kitchen-from-metricon-bayville-display-home.jpg
export default ListingPage3;

View file

@ -0,0 +1,10 @@
import React from "react";
import { shallow } from "enzyme";
import ListingPage3 from "./listing-page-3";
describe("ListingPage3", () => {
test("matches snapshot", () => {
const wrapper = shallow(<ListingPage3 />);
expect(wrapper).toMatchSnapshot();
});
});

View file

@ -0,0 +1,51 @@
.single-listing-4{
padding: 7% 15%;
/* background-color: darksalmon; */
text-align: center;
}
.listing-header{
border: 1px solid black;
text-align: left;
padding: 1%;
}
.listing-title{
font-size: 2.5rem;
/* font-style: italic; */
}
.listing-carousel{
margin: 5% 15%;
width: 70%;
/* padding-right: 10; */
}
.amentities{
border: 1px solid black;
/* padding: 5% 0; */
margin: 3% 40%;
/* padding: 1% 0%; */
}
.amentities-text{
font-size: 2rem;
}
.amentities-icon{
padding: 2% 7%;
}
.description-box{
border: 1px solid black;
padding: 5%;
text-align: left;
}
.description-title{
padding: 2% 0%;
}
.booking-btn{
padding: 2% 0%;
text-align: center;
}

View file

@ -1,17 +1,19 @@
import React from "react";
import "./listing-page.css";
import "./listing-page-4.css";
import { Link } from "react-router-dom";
// import house images
import house_img1 from "../../images/house1-2.jpg";
const ListingPage = () => {
import house_img1 from "../../images/house4.jpg";
import house_img2 from "../../images/house4-2.jpg";
import house_img3 from "../../images/house4-3.jpg";
const ListingPage4 = () => {
return (
<div className="single-listing">
<div className="single-listing-4">
{/* Listing header */}
<div className="row listing-header">
<div className="col-12">
<h2 className="listing-title">
<i class="fas fa-home title-icon"></i> My title
<i class="fas fa-home title-icon"></i> 2785 8th Line Road
</h2>
</div>
</div>
@ -33,14 +35,14 @@ const ListingPage = () => {
</div>
<div class="carousel-item carousel-img">
<img
src={house_img1}
src={house_img2}
class="d-block w-100"
alt="listing-img"
></img>
</div>
<div class="carousel-item">
<img
src={house_img1}
src={house_img3}
class="d-block w-100"
alt="listing-img"
></img>
@ -69,12 +71,10 @@ const ListingPage = () => {
{/* Text box for listing amenities */}
<div className="amentities">
<span className="amentities-text">1</span>
<i class="fas fa-bed fa-2x amentities-icon"></i>
<span className="amentities-text">2</span>
<i class="fas fa-bath fa-2x amentities-icon"></i>
<span className="amentities-text">3</span>
<i class="fas fa-wifi fa-2x amentities-icon"></i>
<i class="fas fa-bed fa-3x amentities-icon"></i>
<span className="amentities-text">3</span>
<i class="fas fa-bath fa-3x amentities-icon"></i>
</div>
{/* Description for the listing */}
@ -136,4 +136,4 @@ const ListingPage = () => {
// 2 ->https://pictureitsoldfl.com/wp-content/uploads/2016/07/305-Rudder-Cay-Way-Jupiter-FL-print-014-28-Family-Room-4200x2800-300dpi-1170x780.jpg
// 3 ->https://www.tlcinteriors.com.au/wp-content/uploads/2018/06/hamptons-style-kitchen-from-metricon-bayville-display-home.jpg
export default ListingPage;
export default ListingPage4;

View file

@ -0,0 +1,10 @@
import React from "react";
import { shallow } from "enzyme";
import ListingPage4 from "./listing-page-4";
describe("ListingPage4", () => {
test("matches snapshot", () => {
const wrapper = shallow(<ListingPage4 />);
expect(wrapper).toMatchSnapshot();
});
});

View file

@ -14,14 +14,20 @@ class Login extends Component {
},
};
handleLogin = (e) => {
console.log(e);
};
handleLogin() {
// if ( !== this.state.Account.email) {
// alert("invalid");
// }
// if (password !== this.state.Account.password) {
// alert("invalid");
// }
}
render() {
const { t } = this.props;
return (
<div className="login-page">
<form action="" className="signin-Form" onClick={this.handleLogin}>
<form action="" className="signin-Form" onSubmit={this.handleLogin}>
<img className="app-logo" src={Logo} alt="app-logo" />
<h1 className="form-title">{t("Login_header")} </h1>
<p>{t("Login_message")}</p>
@ -61,11 +67,10 @@ class Login extends Component {
</label>
</div>
<div className="login-btn">
<Link to="/account">
<Link to="/account"></Link>
<button type="submit" class="btn btn-lg btn-primary">
{t("Login_submit_button")}
</button>
</Link>
</div>
</div>
</form>

View file

@ -11,6 +11,7 @@ class Account extends Component {
lastName: "Green",
email: "kevon.green@kcribs.com",
password: "Kcribs123",
phoneNumber: "613-234-8796",
},
};
render() {
@ -93,7 +94,7 @@ class Account extends Component {
type="text"
class="form-control"
id="account-phoneNumber"
placeholder={this.state.Account.email}
placeholder={this.state.Account.phoneNumber}
required
disabled={true}
/>

View file

@ -1,11 +1,33 @@
import React from "react";
import React, { useEffect } from "react";
import { Link, withRouter } from "react-router-dom";
import "./Navbar.css";
import logo from "./logo2.png";
import Cookies from "js-cookie";
/* eslint-disable jsx-a11y/anchor-is-valid */
import { useTranslation } from "react-i18next";
import i18next from "i18next";
const langauges = [
{
code: "fr",
name: "Français",
country_code: "fr",
},
{
code: "en",
name: "English",
country_code: "gb",
},
];
const Navbar = () => {
const currentLanguageCode = Cookies.get("i18next") || "en";
const currentLanguage = langauges.find(
(lang) => lang.code === currentLanguageCode
);
const { t } = useTranslation();
useEffect(() => {
document.body.dir = currentLanguage.dir || "ltr";
}, [currentLanguage]);
return (
/* Nav Bar */
<div className="Navbar">
@ -27,6 +49,34 @@ const Navbar = () => {
</button>
<div className="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul className="navbar-nav ml-auto">
<li className="nav-item">
<div class="btn-group">
<button
type="button"
class="btn btn-link dropdown-toggle"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<i class="fas fa-globe"></i>
</button>
<div class="dropdown-menu">
{langauges.map(({ code, name, country_code }) => (
<button
class="dropdown-item"
key={code}
onClick={() => i18next.changeLanguage(code)}
disabled={code === currentLanguageCode}
>
<span
className={`flag-icon flag-icon-${country_code} mx-2`}
></span>
{name}
</button>
))}
</div>
</div>
</li>
<li className="nav-item">
<Link className="nav-link" exact to="/">
{t("Nav_Home")}
@ -50,12 +100,6 @@ const Navbar = () => {
</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="/listing-page">
{t("Nav_listing_page")}
</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="/login">
{t("Nav_Login")}