React Component Hierarchy

Functional Component Hierarchy

• Root
  • App
    • NavBar
    • MainPage
    • Footer

NavBar

• NavBar
  • Components:
    • SessionButtonsContainer + SessionButtons
      • State: session

Note: All other components are rendered inside of MainPage

Photos

• ProfileContainer + PhotoIndexContainer + PhotoIndex

  • Route: /#/profile
  • State: photos, users
  • Components:
    • PhotoIndexItem
      • State: photos[:id], users[:id], ui

• UserShowContainer + PhotoIndexContainer + PhotoIndex

  • Route: /#/users/:userId
  • State: photos, users
  • Components:
    • PhotoIndexItem
      • State: photos[:id], users[:id], ui

• PhotoShowContainer + PhotoShow

  • Route: /#/photos/:photoId
  • State: photos[:id], users[:id], ui

• PhotoFormContainer + PhotoForm

  • Route: /#/photos/create
  • State: errors.photoForm

Session

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

Feed

• FeedIndexContainer + FeedIndex
  • Route: /#/
  • State: photos, users
  • Components:
    • FeedIndexItem
    • State: photos[:id], users[:id]