Built out HostVanDetail 'vans' routes, sub-navigation and correspondi…

…ng sub-sections

src/App.jsx

@@ -11,6 +11,9 @@ import Income from "./pages/host/Income"
 import Reviews from "./pages/host/Reviews"
 import HostVans from "./pages/host/HostVans"
 import HostVanDetail from "./pages/host/HostVanDetail"
+import HostVanInfo from "./pages/host/hostVanDetailSections/HostVanInfo"
+import HostVanPricing from "./pages/host/hostVanDetailSections/HostVanPricing"
+import HostVanPhotos from "./pages/host/hostVanDetailSections/HostVanPhotos"
 
 function App() {
   return (
@@ -52,7 +55,20 @@ function App() {
             <Route
               path="host-vans/:id"
               element={<HostVanDetail />}
-            />
+            >
+              <Route
+                index
+                element={<HostVanInfo />}
+              />
+              <Route
+                path="pricing"
+                element={<HostVanPricing />}
+              />
+              <Route
+                path="photos"
+                element={<HostVanPhotos />}
+              />
+            </Route>
             <Route
               path="reviews"
               element={<Reviews />}

src/components/HostVanDetailNav.jsx

@@ -0,0 +1,39 @@
+import { NavLink } from "react-router-dom"
+
+function HostVanDetailNav() {
+  return (
+    <>
+      <nav className="site-navigation hosts-nav">
+        <ul>
+          <li>
+            <NavLink
+              to="."
+              aria-current="page"
+              end
+            >
+              DetailsInfo
+            </NavLink>
+          </li>
+          <li>
+            <NavLink
+              to="pricing"
+              aria-current="page"
+            >
+              Pricing
+            </NavLink>
+          </li>
+          <li>
+            <NavLink
+              to="photos"
+              aria-current="page"
+            >
+              Photos
+            </NavLink>
+          </li>
+        </ul>
+      </nav>
+    </>
+  )
+}
+
+export default HostVanDetailNav

src/components/Nav.jsx

@@ -6,7 +6,7 @@ function Nav() {
       <ul>
         <li>
           <NavLink
-            to="/"
+            to="."
             aria-current="page"
             end
           >

src/layout/LayoutHost.jsx

@@ -7,7 +7,7 @@ function LayoutHost() {
         <ul>
           <li>
             <NavLink
-              to="/host"
+              to="."
               aria-current="page"
               end
             >
@@ -18,7 +18,6 @@ function LayoutHost() {
             <NavLink
               to="income"
               aria-current="page"
-              end
             >
               Income
             </NavLink>
@@ -35,7 +34,6 @@ function LayoutHost() {
             <NavLink
               to="reviews"
               aria-current="page"
-              end
             >
               Reviews
             </NavLink>

src/pages/host/HostVanDetail.jsx

@@ -1,7 +1,65 @@
+import { useState, useEffect } from "react"
+import { useParams, Link, Outlet } from "react-router-dom"
+import HostVanDetailNav from "../../components/HostVanDetailNav"
+
 function HostVanDetail() {
+  const params = useParams()
+
+  const [van, setVan] = useState(null)
+
+  useEffect(() => {
+    async function getVan() {
+      try {
+        const res = await fetch(`/api/vans/${params.id}`)
+        const vanData = await res.json()
+        setVan(vanData.vans)
+      } catch (error) {
+        console.log(error)
+      }
+    }
+    getVan()
+  }, [params.id])
   return (
-    <div className="hosts-container  content-container host-van-detail">
-      <h1>Your Listed Van Details</h1>
+    <div className="hosts-container  content-container host-van-detail van-detail-container">
+      <Link
+        className="back-link link-button"
+        to=".."
+        relative="path"
+      >
+        Back to Host Vans list
+      </Link>
+      {van ? (
+        <>
+          <div className="top-wrap">
+            <div>
+              <picture>
+                <source
+                  srcSet={van.imageUrlWebp}
+                  type="image/webp"
+                />
+                <img
+                  className="van-image"
+                  src={van.imageUrlPng}
+                  alt={`The ${van.name} van`}
+                  loading="lazy"
+                  width="881"
+                  height="881"
+                />
+              </picture>
+            </div>
+            <div>
+              <p>{van.type}</p>
+              <h1>{van.name}</h1>
+              <p>&pound;{van.price}/day</p>
+            </div>
+
+            <HostVanDetailNav />
+          </div>
+          {<Outlet context={{ van }} />}
+        </>
+      ) : (
+        <p>Loading ...</p>
+      )}
     </div>
   )
 }

src/pages/host/HostVans.jsx

@@ -1,7 +1,71 @@
+import { useState, useEffect } from "react"
+import { Link } from "react-router-dom"
+import { FaCircleArrowRight } from "react-icons/fa6"
+
 function HostVans() {
+  const [vans, setVans] = useState([])
+
+  useEffect(() => {
+    async function getVans() {
+      try {
+        const res = await fetch("/api/vans")
+        const vansData = await res.json()
+        setVans(vansData.vans)
+      } catch (error) {
+        console.log(error)
+      }
+    }
+    getVans()
+  }, [])
+
+  // hostId 123 or 456 or 789
+  const hostVanId = "123"
+  const vanList = vans
+    .filter((van) => van.hostId === hostVanId)
+    .map((van) => {
+      return (
+        <li key={van.id}>
+          <Link
+            className="link-button"
+            to={van.id}
+            aria-label={`View details for ${van.name}, 
+                             priced at £${van.price} per day`}
+          >
+            <p>{van.name}</p>
+            <picture>
+              <source
+                srcSet={van.imageUrlWebp}
+                type="image/webp"
+              />
+              <img
+                className="van-image"
+                src={van.imageUrlPng}
+                alt={`The ${van.name} van`}
+                loading="lazy"
+                width="881"
+                height="881"
+              />
+            </picture>
+
+            <ul className="van-footer">
+              <li>Price: £{van.price}/day</li>
+              {/* <li>
+                Type: <span className="van-type">{van.type}</span>
+              </li> */}
+            </ul>
+            <FaCircleArrowRight aria-hidden="true" />
+          </Link>
+        </li>
+      )
+    })
   return (
-    <div className="hosts-container  content-container host-vans">
+    <div className="hosts-container  content-container host-vans vans-container">
       <h1>Your Listed Vans</h1>
+      {vans.length > 0 ? (
+        <ul className="van-list">{vanList}</ul>
+      ) : (
+        <h2>Loading ...</h2>
+      )}
     </div>
   )
 }

src/pages/host/hostVanDetailSections/HostVanInfo.jsx

@@ -0,0 +1,15 @@
+import { useOutletContext } from "react-router-dom"
+
+function HostVanInfo() {
+  const { van } = useOutletContext()
+  return (
+    <section className="host-vans-section">
+      <div>Name: {van.name}</div>
+      <div>Category: {van.type}</div>
+      <div>Description: {van.description}</div>
+      <div>Visibility: Public</div>
+    </section>
+  )
+}
+
+export default HostVanInfo

src/pages/host/hostVanDetailSections/HostVanPhotos.jsx

@@ -0,0 +1,25 @@
+import { useOutletContext } from "react-router-dom"
+
+function HostVanPhotos() {
+  const { van } = useOutletContext()
+  return (
+    <section className="host-vans-section">
+      <picture>
+        <source
+          srcSet={van.imageUrlWebp}
+          type="image/webp"
+        />
+        <img
+          className="van-image"
+          src={van.imageUrlPng}
+          alt={`The ${van.name} van`}
+          loading="lazy"
+          width="881"
+          height="881"
+        />
+      </picture>
+    </section>
+  )
+}
+
+export default HostVanPhotos

src/pages/host/hostVanDetailSections/HostVanPricing.jsx

@@ -0,0 +1,8 @@
+import { useOutletContext } from "react-router-dom"
+
+function HostVanPricing() {
+  const { van } = useOutletContext()
+  return <section className="host-vans-section">&pound;{van.price}/day</section>
+}
+
+export default HostVanPricing

src/pages/vans/VanDetail.jsx

@@ -23,9 +23,9 @@ function VanDetail() {
     <div className="van-detail-container  content-container">
       <Link
         className="back-link link-button"
-        to="/vans"
+        to=".."
+        relative="path"
       >
-        {" "}
         Back to Vans list
       </Link>
       {van ? (

src/pages/vans/Vans.jsx

@@ -57,7 +57,11 @@ function Vans() {
   return (
     <div className="vans-container  content-container">
       <h1>Explore our van options</h1>
-      {vans ? <ul className="van-list">{vanList}</ul> : "Loading ..."}
+      {vans.length > 0 ? (
+        <ul className="van-list">{vanList}</ul>
+      ) : (
+        <h2>Loading ...</h2>
+      )}
     </div>
   )
 }