Component Hierarchy with Wireframes

WanderCamp Component Hierarchy

General

• Root
  • App
    • Navbar
    • Main
    • Footer

NavBar

• NavBar
• State: session
• Components:
  • SessionButtonsContainer + SessionsButton
  • SearchFormContainer
    • SearchForm

Home Page

• Route: /
• State: listings[:id]
• Components:
  • ListingsIndexItem
  • SearchFormContainer
    • SearchForm

Session Form

• LoginFormContainer + SignUpFormContainer
  • SessionForm
• Route: /#/login and /#/signup
• State: errors.login

Discover

• DiscoverContainer + Discover
• Route: /#/discover
• State: listings
• Components:
  • ListingsIndexContainer + ListingsIndex
    • ListingsIndexItem
  • FiltersIndexContainer + FiltersIndex
    • FiltersIndexItem

Listing/Reviews

• ListingContainer + Listing
• Route: /#/listings/:listingId
• State: listings[:listingId], reviews[:listingId]
• Components: ReviewsIndexContainer + ReviewsIndex
  • ReviewsIndexItem

• ReviewsIndexContainer + ReviewsIndex
• Route: /listings/:listingId
• State: reviews, users
• Components:
  • ReviewsIndexItem
    • State: reviews[:listingId], users[:listingId]

• BookingContainer + Booking
  • Route: /listings/:listingId
  • State: listings[:listingId], bookings

images/ListingPage2.png

• NewReviewContainer + EditReviewContainer
  • ReviewForm
• Routes: /#/reviews/new, /#/reviews/:reviewId/edit
• State: errors.reviewForm

images/ReviewPage.png