scrimba
Learn React Router
Suspense
Refactor getHostVans function
Go Pro!Bootcamp

Bootcamp

Study group

Collaborate with peers in your dedicated #study-group channel.

Code reviews

Submit projects for review using the /review command in your #code-reviews channel

Refactor getHostVans function
AboutCommentsNotes
Refactor getHostVans function
Expand for more info
api.js
run
preview
console
import { initializeApp } from "firebase/app";
import { getFirestore, collection, doc, getDocs, getDoc } from "firebase/firestore/lite"

const firebaseConfig = {
apiKey: "AIzaSyD_k3v3HK3tKEqhlqFHPkwogW7PqEqhGhk",
authDomain: "vanlife-a1af5.firebaseapp.com",
projectId: "vanlife-a1af5",
storageBucket: "vanlife-a1af5.appspot.com",
messagingSenderId: "803007000356",
appId: "1:803007000356:web:446cd3a1ca406839258db1"
};

const app = initializeApp(firebaseConfig);
const db = getFirestore(app)

const vansCollectionRef = collection(db, "vans")

export async function getVans() {
const querySnapshot = await getDocs(vansCollectionRef)
const dataArr = querySnapshot.docs.map(doc => ({
...doc.data(),
id: doc.id
}))
return dataArr
}

export async function getVan(id) {
const docRef = doc(db, "vans", id)
const vanSnapshot = await getDoc(docRef)
return {
...vanSnapshot.data(),
id: vanSnapshot.id
}
}

export async function getHostVans(id) {
const url = id ? `/api/host/vans/${id}` : "/api/host/vans"
const res = await fetch(url)
if (!res.ok) {
throw {
message: "Failed to fetch vans",
statusText: res.statusText,
status: res.status
}
}
const data = await res.json()
return data.vans
}

export async function loginUser(creds) {
const res = await fetch("/api/login",
{ method: "post", body: JSON.stringify(creds) }
)
const data = await res.json()

if (!res.ok) {
throw {
message: data.message,
statusText: res.statusText,
status: res.status
}
}

return data
}
Console
[
{price:
60
, imageUrl:
"https://assets.scrimba.com/advanced-react/react-router/modest-explorer.png"
, name:
"Modest Explorer"
, 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!"
, hostId:
"123"
, type:
"simple"
, id:
"1"
}
,
{price:
80
, imageUrl:
"https://assets.scrimba.com/advanced-react/react-router/beach-bum.png"
, name:
"Beach Bum"
, hostId:
"123"
, 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."
, type:
"rugged"
, id:
"2"
}
,
{price:
"100"
, imageUrl:
"https://assets.scrimba.com/advanced-react/react-router/reliable-red.png"
, name:
"Reliable Red"
, hostId:
"456"
, 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."
, type:
"luxury"
, id:
"3"
}
,
{price:
65
, imageUrl:
"https://assets.scrimba.com/advanced-react/react-router/dreamfinder.png"
, name:
"Dreamfinder"
, 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."
, hostId:
"789"
, type:
"simple"
, id:
"4"
}
,
{price:
120
, imageUrl:
"https://assets.scrimba.com/advanced-react/react-router/the-cruiser.png"
, name:
"The Cruiser"
, hostId:
"789"
, 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."
, type:
"luxury"
, id:
"5"
}
,
{price:
70
, imageUrl:
"https://assets.scrimba.com/advanced-react/react-router/green-wonder.png"
, name:
"Green Wonder"
, 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."
, hostId:
"123"
, type:
"rugged"
, id:
"6"
}
]
,
[
{price:
60
, imageUrl:
"https://assets.scrimba.com/advanced-react/react-router/modest-explorer.png"
, name:
"Modest Explorer"
, 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!"
, hostId:
"123"
, type:
"simple"
, id:
"1"
}
,
{price:
80
, imageUrl:
"https://assets.scrimba.com/advanced-react/react-router/beach-bum.png"
, name:
"Beach Bum"
, hostId:
"123"
, 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."
, type:
"rugged"
, id:
"2"
}
,
{price:
"100"
, imageUrl:
"https://assets.scrimba.com/advanced-react/react-router/reliable-red.png"
, name:
"Reliable Red"
, hostId:
"456"
, 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."
, type:
"luxury"
, id:
"3"
}
,
{price:
65
, imageUrl:
"https://assets.scrimba.com/advanced-react/react-router/dreamfinder.png"
, name:
"Dreamfinder"
, 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."
, hostId:
"789"
, type:
"simple"
, id:
"4"
}
,
{price:
120
, imageUrl:
"https://assets.scrimba.com/advanced-react/react-router/the-cruiser.png"
, name:
"The Cruiser"
, hostId:
"789"
, 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."
, type:
"luxury"
, id:
"5"
}
,
{price:
70
, imageUrl:
"https://assets.scrimba.com/advanced-react/react-router/green-wonder.png"
, name:
"Green Wonder"
, 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."
, hostId:
"123"
, type:
"rugged"
, id:
"6"
}
]
,
/host/vans
-3:44