Merge pull request #9 from ivanbatchev/dev

dev: add vans list with details page nested

package.json

@@ -25,6 +25,7 @@
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.14",
     "globals": "^15.11.0",
+    "prop-types": "^15.8.1",
     "vite": "^5.4.10"
   }
 }

server.js

@@ -1,30 +1,101 @@
-import { createServer, Model } from "miragejs"
-
+import { createServer, Model } from 'miragejs'
 
 createServer({
   models: {
-    vans: Model,
+    vans: Model
   },
 
   seeds(server) {
-    server.create("van", { id: "1", name: "Modest Explorer", price: 60, description: "The Modest Explorer is a van designed to get you out of the house and into nature. This beauty is equipped with solar panels, a composting toilet, a water tank and kitchenette. The idea is that you can pack up your home and escape for a weekend or even longer!", imageUrl: "https://assets.scrimba.com/advanced-react/react-router/modest-explorer.png", type: "simple" })
-    server.create("van", { id: "2", name: "Beach Bum", price: 80, description: "Beach Bum is a van inspired by surfers and travelers. It was created to be a portable home away from home, but with some cool features in it you won't find in an ordinary camper.", imageUrl: "https://assets.scrimba.com/advanced-react/react-router/beach-bum.png", type: "rugged" })
-    server.create("van", { id: "3", name: "Reliable Red", price: 100, description: "Reliable Red is a van that was made for travelling. The inside is comfortable and cozy, with plenty of space to stretch out in. There's a small kitchen, so you can cook if you need to. You'll feel like home as soon as you step out of it.", imageUrl: "https://assets.scrimba.com/advanced-react/react-router/reliable-red.png", type: "luxury" })
-    server.create("van", { id: "4", name: "Dreamfinder", price: 65, description: "Dreamfinder is the perfect van to travel in and experience. With a ceiling height of 2.1m, you can stand up in this van and there is great head room. The floor is a beautiful glass-reinforced plastic (GRP) which is easy to clean and very hard wearing. A large rear window and large side windows make it really light inside and keep it well ventilated.", imageUrl: "https://assets.scrimba.com/advanced-react/react-router/dreamfinder.png", type: "simple" })
-    server.create("van", { id: "5", name: "The Cruiser", price: 120, description: "The Cruiser is a van for those who love to travel in comfort and luxury. With its many windows, spacious interior and ample storage space, the Cruiser offers a beautiful view wherever you go.", imageUrl: "https://assets.scrimba.com/advanced-react/react-router/the-cruiser.png", type: "luxury" })
-    server.create("van", { id: "6", name: "Green Wonder", price: 70, description: "With this van, you can take your travel life to the next level. The Green Wonder is a sustainable vehicle that's perfect for people who are looking for a stylish, eco-friendly mode of transport that can go anywhere.", imageUrl: "https://assets.scrimba.com/advanced-react/react-router/green-wonder.png", type: "rugged" })
+    server.create('van', {
+      id: '1',
+      name: 'Modest Explorer',
+      price: 60,
+      description:
+        'The Modest Explorer is a van designed to get you out of the house and into nature. This beauty is equipped with solar panels, a composting toilet, a water tank and kitchenette. The idea is that you can pack up your home and escape for a weekend or even longer!',
+      imageUrl:
+        'https://assets.scrimba.com/advanced-react/react-router/modest-explorer.png',
+      type: 'simple',
+      hostId: '123'
+    })
+    server.create('van', {
+      id: '2',
+      name: 'Beach Bum',
+      price: 80,
+      description:
+        "Beach Bum is a van inspired by surfers and travelers. It was created to be a portable home away from home, but with some cool features in it you won't find in an ordinary camper.",
+      imageUrl:
+        'https://assets.scrimba.com/advanced-react/react-router/beach-bum.png',
+      type: 'rugged',
+      hostId: '123'
+    })
+    server.create('van', {
+      id: '3',
+      name: 'Reliable Red',
+      price: 100,
+      description:
+        "Reliable Red is a van that was made for travelling. The inside is comfortable and cozy, with plenty of space to stretch out in. There's a small kitchen, so you can cook if you need to. You'll feel like home as soon as you step out of it.",
+      imageUrl:
+        'https://assets.scrimba.com/advanced-react/react-router/reliable-red.png',
+      type: 'luxury',
+      hostId: '456'
+    })
+    server.create('van', {
+      id: '4',
+      name: 'Dreamfinder',
+      price: 65,
+      description:
+        'Dreamfinder is the perfect van to travel in and experience. With a ceiling height of 2.1m, you can stand up in this van and there is great head room. The floor is a beautiful glass-reinforced plastic (GRP) which is easy to clean and very hard wearing. A large rear window and large side windows make it really light inside and keep it well ventilated.',
+      imageUrl:
+        'https://assets.scrimba.com/advanced-react/react-router/dreamfinder.png',
+      type: 'simple',
+      hostId: '789'
+    })
+    server.create('van', {
+      id: '5',
+      name: 'The Cruiser',
+      price: 120,
+      description:
+        'The Cruiser is a van for those who love to travel in comfort and luxury. With its many windows, spacious interior and ample storage space, the Cruiser offers a beautiful view wherever you go.',
+      imageUrl:
+        'https://assets.scrimba.com/advanced-react/react-router/the-cruiser.png',
+      type: 'luxury',
+      hostId: '789'
+    })
+    server.create('van', {
+      id: '6',
+      name: 'Green Wonder',
+      price: 70,
+      description:
+        "With this van, you can take your travel life to the next level. The Green Wonder is a sustainable vehicle that's perfect for people who are looking for a stylish, eco-friendly mode of transport that can go anywhere.",
+      imageUrl:
+        'https://assets.scrimba.com/advanced-react/react-router/green-wonder.png',
+      type: 'rugged',
+      hostId: '123'
+    })
   },
 
   routes() {
-    this.namespace = "api"
+    this.namespace = 'api'
+    this.logging = false
 
-    this.get("/vans", (schema, request) => {
+    this.get('/vans', (schema) => {
       return schema.vans.all()
     })
 
-    this.get("/vans/:id", (schema, request) => {
+    this.get('/vans/:id', (schema, request) => {
       const id = request.params.id
       return schema.vans.find(id)
     })
+
+    this.get('/host/vans', (schema) => {
+      // Hard-code the hostId for now
+      return schema.vans.where({ hostId: '123' })
+    })
+
+    this.get('/host/vans/:id', (schema, request) => {
+      // Hard-code the hostId for now
+      const id = request.params.id
+      return schema.vans.where({ id, hostId: '123' })
+    })
   }
-})
+})

src/App.jsx

@@ -6,16 +6,21 @@ import {
   VanDetails,
   Dashboard,
   Income,
-  Reviews
+  Reviews,
+  HostVans,
+  HostVansDetails,
+  HostVanInfo,
+  HostVanPhoto,
+  HostVanPricing
 } from './pages'
-import { HeaderLayout, HostLayout } from './shared/layouts'
+import { MainLayout, HostLayout } from './shared/layouts'
 import './App.css'
 
 const App = () => {
   return (
     <BrowserRouter>
       <Routes>
-        <Route path="/" element={<HeaderLayout />}>
+        <Route path="/" element={<MainLayout />}>
           <Route index element={<Home />} />
           <Route path="about" element={<About />} />
           {/* VANS related pages */}
@@ -28,6 +33,15 @@ const App = () => {
             <Route index element={<Dashboard />} />
             <Route path="income" element={<Income />} />
             <Route path="reviews" element={<Reviews />} />
+            {/* VANs nested in host/* */}
+            <Route path="vans">
+              <Route index element={<HostVans />} />
+              <Route path=":id" element={<HostVansDetails />}>
+                <Route path="info" element={<HostVanInfo />} />
+                <Route path="pricing" element={<HostVanPricing />} />
+                <Route path="photos" element={<HostVanPhoto />} />
+              </Route>
+            </Route>
           </Route>
           {/* ================================================= */}
         </Route>

src/pages/Host/Dashboard/Dashboard.jsx

@@ -1,5 +1,3 @@
-import { Outlet } from 'react-router-dom'
-
 export const Dashboard = () => {
   return (
     <>

src/pages/Host/HostVanInfo/HostVanInfo.jsx

@@ -0,0 +1,3 @@
+export const HostVanInfo = () => {
+  return <div>HostVanInfo</div>
+}

src/pages/Host/HostVanInfo/index.js

@@ -0,0 +1 @@
+export { HostVanInfo as default } from './HostVanInfo'

src/pages/Host/HostVanPhoto/HostVanPhoto.jsx

@@ -0,0 +1,3 @@
+export const HostVanPhoto = () => {
+  return <div>HostVanPhoto</div>
+}

src/pages/Host/HostVanPhoto/index.js

@@ -0,0 +1 @@
+export { HostVanPhoto as default } from './HostVanPhoto'

src/pages/Host/HostVanPricing/HostVanPricing.jsx

@@ -0,0 +1,3 @@
+export const HostVanPricing = () => {
+  return <div>HostVanPricing</div>
+}

src/pages/Host/HostVanPricing/index.js

@@ -0,0 +1 @@
+export { HostVanPricing as default } from './HostVanPricing'

src/pages/Host/HostVans/HostVans.jsx

@@ -0,0 +1,37 @@
+import { Link } from 'react-router-dom'
+import { Loader } from '../../../shared/components'
+import { useVans } from '../../../shared/lib/hooks'
+import './styles.css'
+
+export const HostVans = () => {
+  const { loading, data: vans } = useVans('', true)
+
+  if (loading) {
+    return <Loader />
+  }
+
+  const hostVansEls = vans.map((van) => (
+    <Link
+      to={`/host/vans/${van.id}`}
+      key={van.id}
+      className="host-van-link-wrapper"
+    >
+      <div className="host-van-single" key={van.id}>
+        <img src={van.imageUrl} alt={`Photo of ${van.name}`} />
+        <div className="host-van-info">
+          <h3>{van.name}</h3>
+          <p>${van.price}/day</p>
+        </div>
+      </div>
+    </Link>
+  ))
+
+  return (
+    <section>
+      <h1 className="host-vans-title">Your listed vans</h1>
+      <div className="host-vans-list">
+        <section>{hostVansEls}</section>
+      </div>
+    </section>
+  )
+}

src/pages/Host/HostVans/index.js

@@ -0,0 +1 @@
+export { HostVans as default } from './HostVans'

src/pages/Host/HostVans/styles.css

@@ -0,0 +1,37 @@
+.host-van-link-wrapper {
+  color: unset;
+  text-decoration: unset;
+}
+
+.host-vans-list {
+  padding-inline: 26px;
+}
+
+.host-vans-title {
+  padding-inline: 26px;
+}
+
+.host-van-single {
+  display: flex;
+  align-items: center;
+  background-color: white;
+  margin-bottom: 15px;
+  padding-block: 18px;
+  padding-left: 24px;
+}
+
+.host-van-single > img {
+  height: 70px;
+  border-radius: 5px;
+  margin-right: 17px;
+}
+
+.host-van-info h3 {
+  font-size: 20px;
+  font-weight: 600;
+  margin-block: 10px;
+}
+
+.host-van-info p {
+  margin-block: 10px;
+}

src/pages/Host/HostVansDetails/HostVansDetails.jsx

@@ -0,0 +1,34 @@
+import { Link, useParams } from 'react-router-dom'
+import { Loader } from '../../../shared/components'
+import { useVans } from '../../../shared/lib/hooks'
+import './styles.css'
+
+export const HostVansDetails = () => {
+  const { id } = useParams()
+  const { loading, data: currentVan } = useVans(id, true)
+
+  if (loading) {
+    return <Loader />
+  }
+
+  return (
+    <section>
+      <Link to=".." className="back-button">
+        &larr; <span>Back to all vans</span>
+      </Link>
+
+      <div className="host-van-detail-layout-container">
+        <div className="host-van-detail">
+          <img src={currentVan.imageUrl} />
+          <div className="host-van-detail-info-text">
+            <i className={`van-type van-type-${currentVan.type}`}>
+              {currentVan.type}
+            </i>
+            <h3>{currentVan.name}</h3>
+            <h4>${currentVan.price}/day</h4>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}

src/pages/Host/HostVansDetails/index.js

@@ -0,0 +1 @@
+export { HostVansDetails as default } from './HostVansDetails'

src/pages/Host/HostVansDetails/styles.css

@@ -0,0 +1,40 @@
+.host-van-detail-layout-container {
+  background-color: white;
+  padding: 24px;
+  margin: 30px 26px;
+}
+
+.host-van-detail {
+  display: flex;
+  align-items: center;
+}
+
+.host-van-detail > img {
+  height: 160px;
+  border-radius: 5px;
+  margin-right: 20px;
+}
+
+.host-van-detail-info-text > h3 {
+  margin-top: 24px;
+  margin-bottom: 5px;
+  font-size: 26px;
+  font-weight: 700;
+}
+
+.host-van-detail-info-text > h4 {
+  font-size: 20px;
+  margin-block: 0;
+}
+
+.back-button {
+  display: block;
+  color: black;
+  text-decoration: none;
+  margin-top: 60px;
+  margin-left: 26px;
+}
+
+.back-button span:hover {
+  text-decoration: underline;
+}

src/pages/Host/index.js

@@ -1,5 +1,19 @@
 import Reviews from './Reviews'
 import Dashboard from './Dashboard'
 import Income from './Income'
+import HostVans from './HostVans'
+import HostVansDetails from './HostVansDetails'
+import HostVanInfo from './HostVanInfo'
+import HostVanPhoto from './HostVanPhoto'
+import HostVanPricing from './HostVanPricing'
 
-export { Reviews, Dashboard, Income }
+export {
+  Reviews,
+  Dashboard,
+  Income,
+  HostVans,
+  HostVansDetails,
+  HostVanInfo,
+  HostVanPhoto,
+  HostVanPricing
+}