Merge pull request #8 from ivanbatchev/dev

Refactoring Routes

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "trailingComma": "none",
+  "tabWidth": 2,
+  "semi": false,
+  "singleQuote": true,
+  "printWidth": 80
+}

src/App.jsx

@@ -1,21 +1,39 @@
 import { BrowserRouter, Routes, Route } from 'react-router-dom'
-import { Home, About, Vans, VanDetails } from './pages'
+import {
+  Home,
+  About,
+  Vans,
+  VanDetails,
+  Dashboard,
+  Income,
+  Reviews
+} from './pages'
+import { HeaderLayout, HostLayout } from './shared/layouts'
 import './App.css'
-import { Layout } from './shared/components'
 
 const App = () => {
   return (
     <BrowserRouter>
       <Routes>
-        <Route element={<Layout />}>
-          <Route path='/' element={<Home />} />
-          <Route path='/about' element={<About />} />
-          <Route path='/vans' element={<Vans />} />
-          <Route path='/vans/:id' element={<VanDetails />} />
+        <Route path="/" element={<HeaderLayout />}>
+          <Route index element={<Home />} />
+          <Route path="about" element={<About />} />
+          {/* VANS related pages */}
+          <Route path="vans">
+            <Route index element={<Vans />} />
+            <Route path=":id" element={<VanDetails />} />
+          </Route>
+          {/* Host related pages */}
+          <Route path="host" element={<HostLayout />}>
+            <Route index element={<Dashboard />} />
+            <Route path="income" element={<Income />} />
+            <Route path="reviews" element={<Reviews />} />
+          </Route>
+          {/* ================================================= */}
         </Route>
       </Routes>
     </BrowserRouter>
   )
 }
 
-export default App
+export default App

src/pages/About/About.jsx

@@ -1,5 +1,5 @@
-import bgImg from "../../shared/assets/images/about-hero.png"
-import { Link } from "react-router-dom"
+import bgImg from '../../shared/assets/images/about-hero.png'
+import { Link } from 'react-router-dom'
 import './styles.css'
 
 export const About = () => {
@@ -8,14 +8,26 @@ export const About = () => {
       <img src={bgImg} className="about-hero-image" />
       <div className="about-page-content">
         <h1>Don’t squeeze in a sedan when you could relax in a van.</h1>
-        <p>Our mission is to enliven your road trip with the perfect travel van rental. Our vans are recertified before each trip to ensure your travel plans can go off without a hitch. (Hitch costs extra 😉)</p>
-        <p>Our team is full of vanlife enthusiasts who know firsthand the magic of touring the world on 4 wheels.</p>
+        <p>
+          Our mission is to enliven your road trip with the perfect travel van
+          rental. Our vans are recertified before each trip to ensure your
+          travel plans can go off without a hitch. (Hitch costs extra 😉)
+        </p>
+        <p>
+          Our team is full of vanlife enthusiasts who know firsthand the magic
+          of touring the world on 4 wheels.
+        </p>
       </div>
       <div className="about-page-cta">
-        <h2>Your destination is waiting.<br />Your van is ready.</h2>
-        <Link className="link-button" to="/vans">Explore our vans</Link>
+        <h2>
+          Your destination is waiting.
+          <br />
+          Your van is ready.
+        </h2>
+        <Link className="link-button" to="/vans">
+          Explore our vans
+        </Link>
       </div>
     </section>
   )
 }
-

src/pages/About/index.js

@@ -1 +1 @@
-export { About as default } from './About'
+export { About as default } from './About'

src/pages/About/styles.css

@@ -1,38 +1,38 @@
 /*** ABOUT PAGE ***/
 .about-hero-image {
-    max-width: 100%;
+  max-width: 100%;
 }
 
 .about-page-content {
-    padding-inline: 23px;
-    color: #161616;
-    margin-bottom: 55px;
+  padding-inline: 23px;
+  color: #161616;
+  margin-bottom: 55px;
 }
 
 .about-page-content h1 {
-    line-height: 38px;
+  line-height: 38px;
 }
 
 .about-page-content p {
-    line-height: 22px;
+  line-height: 22px;
 }
 
 .about-page-cta {
-    background-color: #FFCC8D;
-    color: #161616;
-    padding-inline: 32px;
-    padding-bottom: 32px;
-    margin-inline: 27px;
-    border-radius: 5px;
+  background-color: #ffcc8d;
+  color: #161616;
+  padding-inline: 32px;
+  padding-bottom: 32px;
+  margin-inline: 27px;
+  border-radius: 5px;
 }
 
 .about-page-cta h2 {
-    margin: 0;
-    padding-block: 37px;
+  margin: 0;
+  padding-block: 37px;
 }
 
 .about-page-cta .link-button {
-    background-color: #161616;
-    color: white;
-    border-radius: 10px;
-}
+  background-color: #161616;
+  color: white;
+  border-radius: 10px;
+}

src/pages/Home/Home.jsx

@@ -1,11 +1,14 @@
-import { Link } from "react-router-dom"
+import { Link } from 'react-router-dom'
 import './styles.css'
 
 export const Home = () => {
   return (
     <section className="home-container">
       <h1>You got the travel plans, we got the travel vans.</h1>
-      <p>Add adventure to your life by joining the #vanlife movement. Rent the perfect van to make your perfect road trip.</p>
+      <p>
+        Add adventure to your life by joining the #vanlife movement. Rent the
+        perfect van to make your perfect road trip.
+      </p>
       <Link to="vans">Find your van</Link>
     </section>
   )

src/pages/Home/index.js

@@ -1 +1 @@
-export { Home as default } from './Home'
+export { Home as default } from './Home'

src/pages/Home/styles.css

@@ -1,42 +1,42 @@
-
 /*** HOME PAGE ***/
 .home-container {
-    background: linear-gradient(0deg, rgba(0, 0, 0, 0.46), rgba(0, 0, 0, 0.46)), url("../../shared/assets/images/home-hero.png") no-repeat center center;
-    -webkit-background-size: cover;
-    -moz-background-size: cover;
-    -o-background-size: cover;
-    background-size: cover;
-    min-height: 350px;
-    color: white;
-    padding: 45px 23px;
+  background: linear-gradient(0deg, rgba(0, 0, 0, 0.46), rgba(0, 0, 0, 0.46)),
+    url('../../shared/assets/images/home-hero.png') no-repeat center center;
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
+  background-size: cover;
+  min-height: 350px;
+  color: white;
+  padding: 45px 23px;
 }
 
 .home-container h1 {
-    font-weight: 700;
-    font-size: 2.25rem;
-    line-height: 42px;
+  font-weight: 700;
+  font-size: 2.25rem;
+  line-height: 42px;
 }
 
 .home-container p {
-    line-height: 24px;
+  line-height: 24px;
 }
 
 .home-container a {
-    display: inline-block;
-    text-align: center;
-    text-decoration: none;
-    background-color: #FF8C38;
-    border: none;
-    width: 100%;
-    margin-top: 27px;
-    padding-block: .75rem;
-    color: white;
-    font-weight: 700;
-    border-radius: 5px;
-    cursor: pointer;
-    transition: transform .1s ease-in-out;
+  display: inline-block;
+  text-align: center;
+  text-decoration: none;
+  background-color: #ff8c38;
+  border: none;
+  width: 100%;
+  margin-top: 27px;
+  padding-block: 0.75rem;
+  color: white;
+  font-weight: 700;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: transform 0.1s ease-in-out;
 }
 
 .home-container a:hover {
-    transform: translate(1px, 1px);
+  transform: translate(1px, 1px);
 }

src/pages/Host/Dashboard/Dashboard.jsx

@@ -0,0 +1,9 @@
+import { Outlet } from 'react-router-dom'
+
+export const Dashboard = () => {
+  return (
+    <>
+      <div>Dashboard</div>
+    </>
+  )
+}

src/pages/Host/Dashboard/index.js

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

src/pages/Host/Income/Income.jsx

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

src/pages/Host/Income/index.js

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

src/pages/Host/Reviews/Reviews.jsx

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

src/pages/Host/Reviews/index.js

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

src/pages/Host/index.js

@@ -0,0 +1,5 @@
+import Reviews from './Reviews'
+import Dashboard from './Dashboard'
+import Income from './Income'
+
+export { Reviews, Dashboard, Income }

src/pages/VanDetails/VanDetails.jsx

@@ -1,29 +1,35 @@
-import { useVans } from "../../shared/lib/hooks"
-import { useParams } from "react-router-dom"
-import { Loader } from "../../shared/components"
+import { useVans } from '../../shared/lib/hooks'
+import { useParams } from 'react-router-dom'
+import { Loader } from '../../shared/components'
 import './styles.css'
 
 export const VanDetails = () => {
   const { id } = useParams()
-  const { loading, data: van } = useVans(id);
+  const { loading, data: van } = useVans(id)
 
   if (loading) {
     return <Loader />
   }
 
   return (
     <section className="van-detail-container">
-      {van ?
+      {van ? (
         <div className="van-detail">
           <img src={van.imageUrl} />
           <i className={`van-type ${van.type} selected`}>{van.type}</i>
           <h2>{van.name}</h2>
-          <p className="van-price"><span>${van.price}</span>/day</p>
+          <p className="van-price">
+            <span>${van.price}</span>/day
+          </p>
           <p>{van.description}</p>
           <button className="link-button">Rent this van</button>
-        </div> : <h2>Van not found...<br /> Sorry...</h2>}
-
+        </div>
+      ) : (
+        <h2>
+          Van not found...
+          <br /> Sorry...
+        </h2>
+      )}
     </section>
   )
 }
-

src/pages/VanDetails/index.js

@@ -1 +1 @@
-export { VanDetails as default } from './VanDetails'
+export { VanDetails as default } from './VanDetails'

src/pages/VanDetails/styles.css

@@ -31,7 +31,7 @@
   margin-bottom: 10px;
 }
 
-.van-detail>i {
+.van-detail > i {
   align-self: flex-start;
 }
 
@@ -46,7 +46,7 @@
 }
 
 .van-detail .link-button {
-  background-color: #FF8C38;
+  background-color: #ff8c38;
   color: white;
   font-size: 1.125rem;
-}
+}

src/pages/Vans/index.js

@@ -1 +1 @@
-export { Vans as default } from './Vans'
+export { Vans as default } from './Vans'

src/pages/Vans/styles.css

@@ -1,12 +1,12 @@
 .van-list-container {
-    padding-inline: 24px;
-    padding-bottom: 24px;
+  padding-inline: 24px;
+  padding-bottom: 24px;
 }
 
 .van-list {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    justify-items: center;
-    gap: 34px;
-    margin-top: 57px;
-}
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  justify-items: center;
+  gap: 34px;
+  margin-top: 57px;
+}

src/pages/index.js

@@ -1,12 +1,7 @@
+import Home from './Home'
+import About from './About'
+import Vans from './Vans'
+import VanDetails from './VanDetails'
+import { Dashboard, Income, Reviews } from './Host'
 
-import Home from "./Home";
-import About from "./About";
-import Vans from "./Vans";
-import VanDetails from "./VanDetails";
-
-export {
-  Home,
-  About,
-  Vans,
-  VanDetails
-}
+export { Home, About, Vans, VanDetails, Dashboard, Income, Reviews }