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

made the route for the pages, navbar and footer of the application

Browse source
This commit is contained in:
soyed 2021-03-31 00:30:37 -04:00
parent 447a96bdb7
commit b2a6c46255
21 changed files with 193 additions and 66 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
public/index.html
View file

@ -24,7 +24,38 @@
work correctly both with client-side routing and a non-root public URL. 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`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
<title>React App</title>
<!-- fontawesome -->
<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 Crib</title>
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <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; text-align: center;
} }
.App-logo { /* .App {
height: 40vmin; text-align: center;
pointer-events: none; } */
}
@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);
}
}

35
src/App.js
View file

@ -1,28 +1,25 @@
import { Component } from "react"; 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/listings-page";
import AgentPage from "./agent-page/agent-page";
import ContactUs from "./shared-components/Contact-us/Contact-us";
class App extends Component { class App extends Component {
render() { render() {
return ( return (
<div className="App"> <div className="App">
<header className="App-header"> <BrowserRouter>
<h1>Kene's Cribs</h1> <Navbar></Navbar>
<p>Real Website loading.......</p> <Route path="/home" component={HomePage}></Route>
</header> <Route path="/listings" component={ListingsPage}></Route>
<section> <Route path="/agents" component={AgentPage}></Route>
<h1>hello everyone</h1> <Route path="/contact-us" component={ContactUs}></Route>
<div class="alert alert-primary" role="alert"> </BrowserRouter>
A simple primary alert—check it out!
</div> <Footer></Footer>
<div class="alert alert-primary" role="alert">
A simple primary alert—check it out!
</div>
<div class="alert alert-primary" role="alert">
A simple primary alert—check it out!
</div>
<div class="alert alert-primary" role="alert">
A simple primary alert—check it out!
</div>
</section>
</div> </div>
); );
} }

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

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

@ -0,0 +1,9 @@
import React, { Component } from "react";
class HomePage extends Component {
render() {
return <div>HomePage</div>;
}
}
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";

0
src/shared-components/footer/footer.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 React from "react";
import { shallow } from "enzyme"; import { shallow } from "enzyme";
import NavBar from "./navBar"; import Footer from "./Footer";
describe("NavBar", () => { describe("Footer", () => {
test("matches snapshot", () => { test("matches snapshot", () => {
const wrapper = shallow(<NavBar />); const wrapper = shallow(<Footer />);
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
}); });
}); });

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

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

@ -0,0 +1,54 @@
import React from "react";
import { Link } 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" to="/home">
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>
<li class="nav-item">
<Link class="nav-link" to="/contact-us">
Contact Us
</Link>
</li>
</ul>
</div>
</nav>
</div>
);
};
export default 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();
});
});