batuhan-basoglu/Kene-s-Cribs-Website
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge branch 'master' into listings

Browse source
This commit is contained in:
ruchi 2021-03-31 15:56:13 -04:00
commit a798917057
36 changed files with 20917 additions and 87 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20474
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

1
package.json
View file

@ -13,6 +13,7 @@
"react-dom": "^17.0.2",
"react-google-maps": "^9.4.5",
"react-scripts": "4.0.3",
"spectre.css": "^0.5.9",
"web-vitals": "^1.1.1"
},
"scripts": {

33
public/index.html
View file

@ -24,9 +24,38 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<!-- fontawesome -->
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<title>React App</title>
<link
rel="stylesheet"
href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"
/>
<link rel="stylesheet" href="/resources/demos/style.css" />
<!-- Bootstrap Scripts -->
<script
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"
integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF"
crossorigin="anonymous"
></script>
<title>Kene's Cribs</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>

38
src/App.css
View file

@ -1,38 +1,10 @@
.App {
body{
margin: 0;
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
/* .App {
text-align: center;
} */
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

16
src/App.js
View file

@ -1,13 +1,23 @@
import { Component } from "react";
import Footer from "./shared-components/footer-component/Footer";
import Navbar from "./shared-components/navbar-component/Navbar";
import { BrowserRouter, Route } from "react-router-dom";
import HomePage from "./homePage/homePage";
import ListingsPage from "./listings-page/ListingsPage";
import Homepage from './homePage/Homepage';
import AgentPage from "./agent-page/AgentPage";
// import ContactUs from "./shared-components/Contact-us/Contact-us";
class App extends Component {
render() {
return (
<div className="App">
<Homepage></Homepage>
<BrowserRouter>
<Navbar></Navbar>
<Route exact path="/" component={HomePage}></Route>
<Route path="/listings" component={ListingsPage}></Route>
<Route path="/agents" component={AgentPage}></Route>
</BrowserRouter>
<Footer></Footer>
</div>
);
}

41
src/agent-page/AgentPage.js Normal file
View file

@ -0,0 +1,41 @@
import React, { Component } from "react";
import Agents from './Agents'
import './agent-page.css';
import Carousel from 'react-bootstrap/Carousel'
import Agent1 from "../images/Agent1.jpg";
import Agent2 from "../images/Agent2.jpg";
import Agent3 from "../images/Agent3.jpg";
import Agent4 from "../images/Agent4.jpg";
import Agent5 from "../images/Agent5.jpg";
import Agent6 from "../images/Agent6.jpg";
class AgentPage extends Component {
state={
agents: [
{title:'head sales assistant',name: 'Michael', src: Agent1,word:'Michael has a genuine passion for helping others and for giving back to the community.',id:1},
{title:'sales assistant',name: 'Jin', src: Agent2,word:'I have a passion for assisting clients with various real estate needs.',id:2},
{title:'sales assistant',name: 'Anita', src: Agent3,word:'Anita looks forward to servicing you to her fullest potential, building long-lasting relationships and making your real estate experience a smooth and memorable one.',id:3},
{title:'sales assistant',name: 'Alex', src: Agent4,word:'Since getting licensed in 2010 Alex has consistently been a top producing agent in the GTA',id:4},
{title:'sales assistant',name: 'Xuan', src: Agent5,word:'Xuan grew up in the GTA, and he explored many different neighborhoods in and surrounding Toronto. ',id:5},
{title:'sales assistant',name: 'Walter', src: Agent6,word:'Walter Henry has always been one to follow his passion. At 13 years old, he started his career as a competitive gymnast.Walter will be certain that you feel informed and at ease throughout the entire process.',id:6},
]
}
render(){
return(
<div className="container">
<div className="center blue-text text-darken-4">
<h1>Meet the team</h1>
</div>
<Agents agents={this.state.agents} />
</div>
)
}
displayAgents= (agent) => {
console.log(agent);
}
}
export default AgentPage;

40
src/agent-page/Agents.js Normal file
View file

@ -0,0 +1,40 @@
import React from "react";
import AgentPage from "./AgentPage";
/* import {Link} from 'react-router-dom' */
import Card from "react-bootstrap/Card";
import Button from "react-bootstrap/Button";
const Agents = ({ agents }) => {
const agentlist = agents.map((agent) => {
return (
<div className="agent" key={agent.id}>
{}
<Card style={{ width: "18rem" }}>
<Card.Img variant="top" src={agent.src} />
<Card.Body>
<Card.Title>{agent.title}</Card.Title>
<Card.Text>{agent.name}</Card.Text>
<Card.Text>
{agent.word}
</Card.Text>
<Button variant="primary">VIEW</Button>
</Card.Body>
</Card>
</div>
);
});
console.log(agentlist);
return (
<div className="agent-list">
<div className="row">
<div className="col m4">{agentlist[0]}</div>
<div className="col m4">{agentlist[1]}</div>
<div className="col m4">{agentlist[2]}</div>
<div className="col m4">{agentlist[3]}</div>
<div className="col m4">{agentlist[4]}</div>
<div className="col m4">{agentlist[5]}</div>
</div>
</div>
);
};
export default Agents;

19
src/agent-page/agent-page.css
View file

@ -0,0 +1,19 @@
.agentPage {
background-image: url('../images/Agent1.jpg');
background-repeat: no-repeat;
background-size: cover;
background-attachment: scroll;
}
@media screen and (min-width: 992px) {
.miniHero {
background-position-y: -150px;
}
}
.center{
height: 25vh; /* Magic here */
background-color: yellow;
display: flex;
justify-content: center;
align-items: center;
}

9
src/agent-page/agent-page.js
View file

@ -1,9 +0,0 @@
import React, { Component } from "react";
class AgentPage extends Component {
render() {
return <div>AgentPage</div>;
}
}
export default AgentPage;

7
src/agent-page/workspace.code-workspace Normal file
View file

@ -0,0 +1,7 @@
{
"folders": [
{
"path": "../../.."
}
]
}

62
src/homePage/homePage.css Normal file
View file

@ -0,0 +1,62 @@
.colored-section {
background-color: #ffe609;
color: #000000;
white-space: nowrap;
}
.white-section {
background-color: #ffffff;
}
#title .container-fluid {
padding: 4% 34% 6%;
text-align: left;
font-family: "Georgia";
}
.housesIntro{
padding: 4% 5%;
}
.contactIntro{
padding-left: 30%;
padding-right: 30%;
padding-bottom: 80px;
}
.carouselSection {
margin: 2% 8%;
}
.headerImg{
width: 2000px;
height: 600px;
}
.heading-1{
padding-left: 40%;
padding-top: 10%;
padding-bottom: 20px;
}
.formhelper{
padding-bottom: 15px;
}
.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;
}

123
src/homePage/homePage.js Normal file
View file

@ -0,0 +1,123 @@
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 Carousel from "react-bootstrap/Carousel";
class homePage extends Component {
constructor(props) {
super(props);
this.state = {
firstname: "",
lastname: "",
email: "",
message: "",
};
}
render() {
return (
<div className="homePage">
<section className="colored-section" id="title">
<div className="container-fluid">
<div className="row">
<div className="col-12">
<h1 className="big-heading">YOU ARE NOT BUYING A HOUSE, </h1>
<h1 className="big-heading">YOU ARE BUYING A LIFESTYLE. </h1>
</div>
</div>
</div>
</section>
<section className="white-section" id="white-section">
<div className="housesIntro">
<Carousel>
<Carousel.Item>
<img className="headerImg" src={house1} alt="First House" />
</Carousel.Item>
<Carousel.Item>
<img className="headerImg" src={house2} alt="Second House" />
</Carousel.Item>
<Carousel.Item>
<img className="headerImg" src={house3} alt="Third House" />
</Carousel.Item>
</Carousel>
</div>
</section>
<section class="colored-section" id="contact">
<div className="container-fluid">
<div className="contactIntro">
<h2 className="heading-1">Contact Us</h2>
<form
id="contact-form"
onSubmit={this.handleSubmit.bind(this)}
method="POST"
>
<div className="formhelper row">
<div className="col-6">
<input
type="text"
className="form-control"
placeholder="First Name"
value={this.state.name}
onChange={this.onNameChange.bind(this)}
/>
</div>
<div className="col-6">
<input
type="text"
className="form-control"
placeholder="Last Name"
value={this.state.name}
onChange={this.onNameChange.bind(this)}
/>
</div>
</div>
<div className="form-group">
<input
type="email"
className="form-control"
placeholder="Email Address"
aria-describedby="emailHelp"
value={this.state.email}
onChange={this.onEmailChange.bind(this)}
/>
</div>
<div className="form-group">
<textarea
className="form-control"
placeholder="Message"
rows="5"
value={this.state.message}
onChange={this.onMessageChange.bind(this)}
/>
</div>
<div className="buttonhelper">
<button type="submit" className="button-1">
Submit
</button>
</div>
</form>
</div>
</div>
</section>
</div>
);
}
onNameChange(event) {
this.setState({ name: event.target.value });
}
onEmailChange(event) {
this.setState({ email: event.target.value });
}
onMessageChange(event) {
this.setState({ message: event.target.value });
}
handleSubmit(event) {}
}
export default homePage;

10
src/homePage/homePage.test.js Normal file
View file

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

1
src/homePage/index.js Normal file
View file

@ -0,0 +1 @@
export { default } from "./homePage";

BIN
src/images/Agent1.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4.1 KiB

BIN
src/images/Agent2.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 57 KiB

BIN
src/images/Agent3.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 42 KiB

BIN
src/images/Agent4.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 24 KiB

BIN
src/images/Agent5.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 485 KiB

BIN
src/images/Agent6.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 36 KiB

2
src/listings-page/ListingsPage.js
View file

@ -163,7 +163,7 @@ class ListingsPage extends Component {
<div style={{ width: "100vm", height: "800px" }}>
<MapWrapped
googleMapURL={`https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=
AIzaSyDD2ndQ18tRLgWUwGw18MHAgrfinSMWBYw`}
AIzaSyC5TiZoTEwEcB_HUZRhe_rXrcSWW1Z5x8I`}
loadingElement={<div style={{ height: `100%` }} />}
containerElement={<div style={{ height: `100%` }} />}
mapElement={<div style={{ height: `100%` }} />}

0
src/shared-components/contact-us/contactUs.css → src/shared-components/contact-us/Contact-us.css
View file

10
src/shared-components/contact-us/Contact-us.test.js Normal file
View file

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

9
src/shared-components/contact-us/contact-us.js
View file

@ -0,0 +1,9 @@
import React, { Component } from "react";
class ContactUs extends Component {
render() {
return <div>ContactUs</div>;
}
}
export default ContactUs;

1
src/shared-components/contact-us/index.js Normal file
View file

@ -0,0 +1 @@
export { default } from "./Contact-us";

12
src/shared-components/footer-component/Footer.css Normal file
View file

@ -0,0 +1,12 @@
#footer{
text-align: center;
padding: 5% 7%;
}
.social-icon{
margin: 2px 10px;
}
.social-icon:hover{
color: pink;
}

18
src/shared-components/footer-component/Footer.js Normal file
View file

@ -0,0 +1,18 @@
import React from "react";
import "./Footer.css";
const Footer = () => {
return (
<footer>
<section id="footer">
<div class="container-fluid">
<i class="fab fa-twitter social-icon"></i>
<i class="fab fa-facebook social-icon"></i>
<i class="fab fa-instagram social-icon"></i>
<i class="fas fa-envelope social-icon"></i>
<p class="">© Copyright SEG3125 - Group 3</p>
</div>
</section>
</footer>
);
};
export default Footer;

6
src/shared-components/navBar/navBar.test.js → src/shared-components/footer-component/Footer.test.js
View file

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

0
src/shared-components/footer/footer.css
View file

0
src/shared-components/footer/footer.js
View file

1
src/shared-components/navBar/index.js
View file

@ -1 +0,0 @@
export { default } from "./navBar";

0
src/shared-components/navBar/navBar.css
View file

9
src/shared-components/navBar/navBar.js
View file

@ -1,9 +0,0 @@
import React, { Component } from "react";
class NavBar extends Component {
render() {
return <div>NavBar</div>;
}
}
export default NavBar;

3
src/shared-components/navbar-component/Navbar.css Normal file
View file

@ -0,0 +1,3 @@
.Navbar{
background-color: pink;
}

49
src/shared-components/navbar-component/Navbar.js Normal file
View file

@ -0,0 +1,49 @@
import React from "react";
import { Link, withRouter } from "react-router-dom";
import "./Navbar.css";
/* eslint-disable jsx-a11y/anchor-is-valid */
const Navbar = () => {
return (
/* Nav Bar */
<div className="Navbar">
<nav class="navbar navbar-expand-lg navbar-dark">
<img src=""></img>
<a href="/" class="navbar-brand">
Kene's Cribs
</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarTogglerDemo02"
aria-controls="navbarTogglerDemo02"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<Link class="nav-link" exact to="/">
Home
</Link>
</li>
<li class="nav-item">
<Link class="nav-link" to="/listings">
Listings
</Link>
</li>
<li class="nav-item">
<Link class="nav-link" to="/agents">
Agents
</Link>
</li>
</ul>
</div>
</nav>
</div>
);
};
export default withRouter(Navbar);

10
src/shared-components/navbar-component/Navbar.test.js Normal file
View file

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