Component Hierarchy

React Component Hierarchy

Functional Component Hierarchy

• Root
  • App
    • NavBar
    • MainPage
    • Footer

NavBar

• NavBar
  • Components:
    • SessionButtonsContainer + SessionButtons
    • State: ui[:session]

Lodgings

• LodgingIndexContainer + LodgingIndex

  • Route: /# ^ Exact?

  • State: entities[:lodgings], ui[:loading][:indexLoading]

  • Note: Before mounting the LodgingIndex, we will fetch all lodgings from the database using componentWillMount.

  • Component: LodgingIndexItem

    • State: lodgings[:id]

  • Components: LodgingDetailContainer + LodgingDetail

    • Route: /#/lodgings/:lodgingId
    • State: entities[:lodgings] <-> ui[:lodgingDisplay], ui[:loading][:lodgingShowLoading]
    • Note: It will look something like this:

    const mapStateToProps = (state) => ({
      lodging: state.entities.lodgings[state.ui.lodgingDisplay]
    })

    • Note: Each lodging in the index will be a link that redirects to the display (show) of that one lodging. Most likely a componentDidMount and componentWillReceiveProps will be used. In componentDidMount, a thunk action will be used, getting back more detailed information for the one lodging in our global state. The action will hit the lodging reducer and ui reducer (to change the lodgingDisplay and loading).
    • Note: Maybe I can incorporate a button to delete or update the lodging if the lodging belongs to the current user.

Reviews

• ReviewIndexContainer + ReviewIndex

  • Route: /#/lodgings/:lodgingId

  • State: entities[:reviews], entities[:lodgingId][:review_ids] -Note: Will probably use selector that uses state.entities.reviews (received when we used the thunk to get more data for one lodging) and review_ids.

  • Component: ReviewIndexItem

    • State: reviews[:id]

User Profile

• UserDisplayContainer + UserDisplay
  • Route: /users/:userId
  • State: entities[:session][:userDisplay] vs just getting the information from the route params
  • Note: Using a route maybe, we can redirect to the user show page if you click on a user next to his/her review. Maybe we will need another componentWillMount to fetch user information and update the state's viewedUser and ui.userdisplay (might be overkill to do both).

Bookings

• BookingIndexContainer + BookingIndex

  • Route: /users/:userId/bookings/

  • State: entities[:bookings]

  • Note: The current user should only see his/her own bookings and not others. Bookings in the entities will be fetched either when we enter the bookings url for the first time (componentWillMount) or maybe when the current user signs in.

  • Component: BookingIndexItem

    • State: entities[:bookings][:id]
    • Note: Need to be able to update or delete the booking.

Session

• SessionFormContainer + SessionForm
  • Route: /#/login and /#/signup
  • State: ui[:errors][login], ui[:errors][:signup]