Update

React/test-housing/src/pages/Listing.js

@@ -1,7 +1,122 @@
 import React from 'react'
+import { useState, useEffect } from 'react'
+import { Link, useNavigate, useParams } from 'react-router-dom'
+import { getDoc, doc } from 'firebase/firestore'
+import { getAuth } from 'firebase/auth'
+import { db } from '../firebase.config'
+import Spinner from '../components/Spinner'
+import shareIcon from '../assets/svg/shareIcon.svg'
+// import { MapContainer, Marker, Popup, TileLayer } from 'react-leaflet'
+// import SwiperCore, { Navigation, Pagination, Scrollbar, A11y } from 'swiper'
+// import { Swiper, SwiperSlide } from 'swiper/react'
+// import 'swiper/css'
+// import 'swiper/css/navigation';
+// import 'swiper/css/pagination';
+// import 'swiper/css/scrollbar';
 
 export const Listing = () => {
+  const [listing, setListing] = useState(null)
+  const [loading, setLoading] = useState(true)
+  const [shareLinkCopied, setShareLinkCopied] = useState(false)
+  const navigate = useNavigate()
+  const params = useParams()
+  const auth = getAuth()
+
   return (
-    <div>Listing</div>
+    <main>
+      {/* <Swiper slidesPerView={1} pagination={{ clickable: true }}>
+        {listing.imageUrls.map((urls, index) => (
+          <SwiperSlide key={index}>
+            <div
+              style={{
+                background: `url(${listing.imageUrls[index]}) center no-repeat`,
+                backgroundSize: 'cover',
+                height: '300px',                
+              }}
+              className="swiperSlideDiv"
+            ></div>
+          </SwiperSlide>
+        ))}
+      </Swiper> */}
+
+      <div
+        className="shareIconDiv"
+        onClick={() => {
+          navigator.clipboard.writeText(window.location.href)
+          setShareLinkCopied(true)
+          setTimeout(() => {
+            setShareLinkCopied(false)
+          }, 2000)
+        }}
+      >
+        <img src={shareIcon} alt="" />
+      </div>
+      {shareLinkCopied && <p className="linkCopied">Link Copied</p>}
+      <div className="listingDetails">
+        <p className="listingName">
+          {listing.name} - $
+          {listing.offer
+            ? listing.discountedPrice
+                .toString()
+                .replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+            : listing.regularPrice
+                .toString()
+                .replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
+        </p>
+        <p className="listingLocation">{listing.location}</p>
+        <p className="listingType">
+          For {listing.type === 'rent' ? 'Rent' : 'Sale'}
+        </p>
+        {listing.offer && (
+          <p className="discountPrice">
+            ${listing.regularPrice - listing.discountedPrice} discount
+          </p>
+        )}
+
+        <ul className="listingDetailsList">
+          <li>
+            {listing.bedrooms > 1 ? `${listing.bedrooms}bedrooms` : '1 bedroom'}
+          </li>
+          <li>
+            {listing.bathrooms > 1
+              ? `${listing.bathrooms}bathrooms`
+              : '1 bathroom'}
+          </li>
+          <li>{listing.parking && 'Parking spot'}</li>
+          <li>{listing.furnished && 'Furnished'}</li>
+        </ul>
+
+        <p className="listingLocationTitle">Location</p>
+
+        {/* <div className="leafletContainer">
+          <MapContainer
+            style={{ height: '100%', width: '100%' }}
+            center={[listing.geolocation.lat, listing.geolocation.lng]}
+            zoom={13}
+            scrollWheelZoom={false}
+          >
+            <TileLayer
+              attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+              url="https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png"
+            />
+
+            <Marker
+              position={[listing.geolocation.lat, listing.geolocation.lng]}
+            >
+              <Popup>{listing.location}</Popup>
+            </Marker>
+          </MapContainer>
+        </div> */}
+
+        {auth.currentUser?.uid !== listing.userRef && (
+          <Link
+            to={`/contact/${listing.userRef}?listingName=${listing.name}`}
+            className="primaryButton"
+          >
+            Contact landlord
+          </Link>
+        )}
+      </div>
+    </main>
   )
 }