From b03cbe3164c558bd0e190d3de0d78d867d186755 Mon Sep 17 00:00:00 2001 From: soyed Date: Wed, 31 Mar 2021 00:30:37 -0400 Subject: [PATCH 1/3] made the route for the pages, navbar and footer of the application --- public/index.html | 33 +++++++++++- src/App.css | 38 ++----------- src/App.js | 35 ++++++------ .../contactUs.css => homePage/homePage.css} | 0 src/homePage/homePage.js | 9 ++++ src/homePage/homePage.test.js | 10 ++++ src/homePage/index.js | 1 + .../footer.css => contact-us/Contact-us.css} | 0 .../contact-us/Contact-us.test.js | 10 ++++ .../contact-us/contact-us.js | 9 ++++ src/shared-components/contact-us/index.js | 1 + .../footer-component/Footer.css | 12 +++++ .../footer-component/Footer.js | 18 +++++++ .../Footer.test.js} | 6 +-- src/shared-components/footer/footer.js | 0 src/shared-components/navBar/index.js | 1 - src/shared-components/navBar/navBar.css | 0 src/shared-components/navBar/navBar.js | 9 ---- .../navbar-component/Navbar.css | 3 ++ .../navbar-component/Navbar.js | 54 +++++++++++++++++++ .../navbar-component/Navbar.test.js | 10 ++++ 21 files changed, 193 insertions(+), 66 deletions(-) rename src/{shared-components/contact-us/contactUs.css => homePage/homePage.css} (100%) create mode 100644 src/homePage/homePage.js create mode 100644 src/homePage/homePage.test.js create mode 100644 src/homePage/index.js rename src/shared-components/{footer/footer.css => contact-us/Contact-us.css} (100%) create mode 100644 src/shared-components/contact-us/Contact-us.test.js create mode 100644 src/shared-components/contact-us/index.js create mode 100644 src/shared-components/footer-component/Footer.css create mode 100644 src/shared-components/footer-component/Footer.js rename src/shared-components/{navBar/navBar.test.js => footer-component/Footer.test.js} (59%) delete mode 100644 src/shared-components/footer/footer.js delete mode 100644 src/shared-components/navBar/index.js delete mode 100644 src/shared-components/navBar/navBar.css delete mode 100644 src/shared-components/navBar/navBar.js create mode 100644 src/shared-components/navbar-component/Navbar.css create mode 100644 src/shared-components/navbar-component/Navbar.js create mode 100644 src/shared-components/navbar-component/Navbar.test.js diff --git a/public/index.html b/public/index.html index aa069f2..91eee89 100644 --- a/public/index.html +++ b/public/index.html @@ -24,7 +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`. --> - React App + + + + + + + + + + + + Kene's Crib diff --git a/src/App.css b/src/App.css index 74b5e05..f71ecfa 100644 --- a/src/App.css +++ b/src/App.css @@ -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); - } -} diff --git a/src/App.js b/src/App.js index 7cc58df..8a4cd7b 100644 --- a/src/App.js +++ b/src/App.js @@ -1,28 +1,25 @@ 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 { render() { return (
-
-

Kene's Cribs

-

Real Website loading.......

-
-
-

hello everyone

- - - - -
+ + + + + + + + +
); } diff --git a/src/shared-components/contact-us/contactUs.css b/src/homePage/homePage.css similarity index 100% rename from src/shared-components/contact-us/contactUs.css rename to src/homePage/homePage.css diff --git a/src/homePage/homePage.js b/src/homePage/homePage.js new file mode 100644 index 0000000..fba8d3b --- /dev/null +++ b/src/homePage/homePage.js @@ -0,0 +1,9 @@ +import React, { Component } from "react"; + +class HomePage extends Component { + render() { + return
HomePage
; + } +} + +export default HomePage; diff --git a/src/homePage/homePage.test.js b/src/homePage/homePage.test.js new file mode 100644 index 0000000..5dd92a5 --- /dev/null +++ b/src/homePage/homePage.test.js @@ -0,0 +1,10 @@ +import React from "react"; +import { shallow } from "enzyme"; +import HomePage from "./homePage"; + +describe("HomePage", () => { + test("matches snapshot", () => { + const wrapper = shallow(); + expect(wrapper).toMatchSnapshot(); + }); +}); diff --git a/src/homePage/index.js b/src/homePage/index.js new file mode 100644 index 0000000..7d52476 --- /dev/null +++ b/src/homePage/index.js @@ -0,0 +1 @@ +export { default } from "./homePage"; diff --git a/src/shared-components/footer/footer.css b/src/shared-components/contact-us/Contact-us.css similarity index 100% rename from src/shared-components/footer/footer.css rename to src/shared-components/contact-us/Contact-us.css diff --git a/src/shared-components/contact-us/Contact-us.test.js b/src/shared-components/contact-us/Contact-us.test.js new file mode 100644 index 0000000..3f91e5b --- /dev/null +++ b/src/shared-components/contact-us/Contact-us.test.js @@ -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(); + expect(wrapper).toMatchSnapshot(); + }); +}); diff --git a/src/shared-components/contact-us/contact-us.js b/src/shared-components/contact-us/contact-us.js index e69de29..dc5a7e5 100644 --- a/src/shared-components/contact-us/contact-us.js +++ b/src/shared-components/contact-us/contact-us.js @@ -0,0 +1,9 @@ +import React, { Component } from "react"; + +class ContactUs extends Component { + render() { + return
ContactUs
; + } +} + +export default ContactUs; diff --git a/src/shared-components/contact-us/index.js b/src/shared-components/contact-us/index.js new file mode 100644 index 0000000..cffb00b --- /dev/null +++ b/src/shared-components/contact-us/index.js @@ -0,0 +1 @@ +export { default } from "./Contact-us"; diff --git a/src/shared-components/footer-component/Footer.css b/src/shared-components/footer-component/Footer.css new file mode 100644 index 0000000..1118310 --- /dev/null +++ b/src/shared-components/footer-component/Footer.css @@ -0,0 +1,12 @@ +#footer{ + text-align: center; + padding: 5% 7%; +} + +.social-icon{ + margin: 2px 10px; +} + +.social-icon:hover{ + color: pink; +} \ No newline at end of file diff --git a/src/shared-components/footer-component/Footer.js b/src/shared-components/footer-component/Footer.js new file mode 100644 index 0000000..5439651 --- /dev/null +++ b/src/shared-components/footer-component/Footer.js @@ -0,0 +1,18 @@ +import React from "react"; +import "./Footer.css"; +const Footer = () => { + return ( +
+ +
+ ); +}; +export default Footer; diff --git a/src/shared-components/navBar/navBar.test.js b/src/shared-components/footer-component/Footer.test.js similarity index 59% rename from src/shared-components/navBar/navBar.test.js rename to src/shared-components/footer-component/Footer.test.js index 32a093e..cf7f5d7 100644 --- a/src/shared-components/navBar/navBar.test.js +++ b/src/shared-components/footer-component/Footer.test.js @@ -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(); + const wrapper = shallow(