Merge pull request #10 from HrridoyV2/fetchData

homepage data done
HrridoyV2 · Nov 16, 2020 · 162585c · 162585c
2 parents eaf48ce + 7777521
commit 162585c
Show file tree

Hide file tree

Showing 28 changed files with 39 additions and 45 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -5,6 +5,7 @@
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.32",
     "@fortawesome/free-brands-svg-icons": "^5.15.1",
+    "@fortawesome/free-regular-svg-icons": "^5.15.1",
     "@fortawesome/free-solid-svg-icons": "^5.15.1",
     "@fortawesome/react-fontawesome": "^0.1.12",
     "@material-ui/core": "^4.11.0",

diff --git a/src/components/Home/Home/HeaderMain/HeaderMain.css b/src/components/Home/Home/HeaderMain/HeaderMain.css
@@ -4,7 +4,7 @@ background: #275A53;
 border-radius: 5px;
 } */
 .searchsection {
-    background-image:linear-gradient(to right, rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.7)), url("../../../../image/images/Rectangle 13.png");
+    background-image:linear-gradient(to right, rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.7)), url("../../../../image/images/Luxury\ villa.png");
     background-repeat: no-repeat;
     background-position: center ;
     background-size: cover;

diff --git a/src/components/Home/Home/HouseRent/HouseRent.js b/src/components/Home/Home/HouseRent/HouseRent.js
@@ -1,39 +1,14 @@
-import React from 'react';
-import img1 from '../../../../image/images/Rectangle 394.png';
-import img2 from '../../../../image/images/Rectangle 396.png';
-import img3 from '../../../../image/images/Rectangle 398.png';
-import img4 from '../../../../image/images/Rectangle 405.png';
-import img5 from '../../../../image/images/Rectangle 403.png';
-import img6 from '../../../../image/images/Rectangle 404.png';
+import React, { useEffect, useState } from 'react';
 import HouseRentDetails from '../HouseRentDetails/HouseRentDetails';
 
 const HouseRent = () => {
-    const houseRentData = [
-        {
-            img: img1,
-            title: 'Washington Avenue'
-        },
-        {
-            img: img2,
-            title: 'Family Apartment Three'
-        },
-        {
-            img: img3,
-            title: 'Gorgeous house'
-        },
-        {
-            img: img4,
-            title: 'Luxury villa'
-        },
-        {
-            img: img5,
-            title: 'Epic Huda Palacio'
-        },
-        {
-            img: img6,
-            title: 'Washington Avenue'
-        },
-    ]
+      const [rentsData, setRentsData] = useState([])
+
+        useEffect(() => {
+          fetch("http://localhost:5000/rentData")
+            .then((res) => res.json())
+            .then((data) => setRentsData(data));
+        }, [])
     return (
         <section>
 
@@ -43,12 +18,12 @@ const HouseRent = () => {
                     <h1 style={{ fontWeight: 'bold' }}>Discover the latest
                     rent
                     <br />
-                    available today </h1>
+                    available today</h1>
                 </div>
                 <div>
                     <div className="row">
                         {
-                            houseRentData.map(houseRentData =>
+                            rentsData.map(houseRentData =>
                                 <HouseRentDetails houseRentData={houseRentData}></HouseRentDetails>)
                         }
                     </div>

diff --git a/src/components/Home/Home/HouseRentDetails/HouseRentDetails.js b/src/components/Home/Home/HouseRentDetails/HouseRentDetails.js
@@ -4,17 +4,19 @@ import bed from '../../../../image/logos/bed 1.png';
 import bath from '../../../../image/logos/bath 1.png';
 
 const HouseRentDetails = ({ houseRentData }) => {
+    const { title, price, img, location} = {...houseRentData}
+
     return (
 
         <div className="col-md-4">
             <div className="card mt-4">
-                <img className="card-img-top" src={houseRentData.img} alt="" />
+                <img className="card-img-top" src={img} alt="" />
                 <div className="card-body">
-                    <h4 className="card-title">{houseRentData.title}</h4>
+                    <h4 className="card-title">{title}</h4>
                     <div className="d-flex mb-2">
 
                         <img style={{ height: "20px" }} src={map} alt="" />
-                        <p className="ml-3">Nasirabad H/S, Chattogram</p>
+                        <p className="ml-3">{location}</p>
 
                     </div>
                     <div className="d-flex align-items-center">
@@ -28,7 +30,7 @@ const HouseRentDetails = ({ houseRentData }) => {
                         </div>
                     </div>
                     <div className="d-flex justify-content-between mt-4">
-                        <h2 style={{ color: "#275A53", fontWeight: "bold", fontSize: "36px" }}>$194</h2>
+                        <h2 style={{ color: "#275A53", fontWeight: "bold", fontSize: "36px" }}>${price}</h2>
                         <button className="btn" style={{ backgroundColor: "#275A53", color: "#F1F6F4" }}>View Details</button>
                     </div>
                 </div>

diff --git a/src/components/HuntDetails/HuntGallery/HuntGallery.js b/src/components/HuntDetails/HuntGallery/HuntGallery.js
@@ -1,12 +1,12 @@
 import React from "react";
 import "./HuntGallery.css";
 
-import hunt from "../../../image/images/Rectangle 406.png";
+import hunt from "../../../image/images/Gorgeous house.png";
 
-import sm1 from "../../../image/images/Rectangle 410.png";
-import sm2 from "../../../image/images/Rectangle 409.png";
-import sm3 from "../../../image/images/Rectangle 408.png";
-import sm4 from "../../../image/images/Rectangle 407.png";
+import sm1 from "../../../image/images/Gorgeous house.png";
+import sm2 from "../../../image/images/Gorgeous house.png";
+import sm3 from "../../../image/images/Gorgeous house.png";
+import sm4 from "../../../image/images/Gorgeous house.png";
 function HuntGallery() {
   return (
     <div className="hunt-gallery">

diff --git a/src/image/images/Epic Huda Palacio.png b/src/image/images/Epic Huda Palacio.png
diff --git a/src/image/images/Family Apartment.png b/src/image/images/Family Apartment.png
diff --git a/src/image/images/Four.png b/src/image/images/Four.png
diff --git a/src/image/images/Gorgeous house.png b/src/image/images/Gorgeous house.png
diff --git a/src/image/images/Luxury villa.png b/src/image/images/Luxury villa.png
diff --git a/src/image/images/One.png b/src/image/images/One.png
diff --git a/src/image/images/Rectangle 394.png b/src/image/images/Rectangle 394.png
diff --git a/src/image/images/Rectangle 396.png b/src/image/images/Rectangle 396.png
diff --git a/src/image/images/Rectangle 398.png b/src/image/images/Rectangle 398.png
diff --git a/src/image/images/Rectangle 403.png b/src/image/images/Rectangle 403.png
diff --git a/src/image/images/Rectangle 404.png b/src/image/images/Rectangle 404.png
diff --git a/src/image/images/Rectangle 405.png b/src/image/images/Rectangle 405.png
diff --git a/src/image/images/Rectangle 406.png b/src/image/images/Rectangle 406.png
diff --git a/src/image/images/Rectangle 407.png b/src/image/images/Rectangle 407.png
diff --git a/src/image/images/Rectangle 408.png b/src/image/images/Rectangle 408.png
diff --git a/src/image/images/Rectangle 409.png b/src/image/images/Rectangle 409.png
diff --git a/src/image/images/Rectangle 410.png b/src/image/images/Rectangle 410.png
diff --git a/src/image/images/Rectangle 13.png → src/image/images/ShowOff.png b/src/image/images/Rectangle 13.png → src/image/images/ShowOff.png
diff --git a/src/image/images/Three.png b/src/image/images/Three.png
diff --git a/src/image/images/Two.png b/src/image/images/Two.png
diff --git a/src/image/images/Washington.png b/src/image/images/Washington.png
diff --git a/src/image/images/Wonderfull.png b/src/image/images/Wonderfull.png