Functional Component Hierarchy

• Root
  • App
    • NavBar
    • MainPage
    • Footer

Main Page

• Containers
  • RoutesIndexContainer (friend activity feed)/ProfileIndexContainer (own feed)
    • RoutesIndexItem component
      • State: routes[:id], users[:id]
  • StatsSidebarContainer
    • StatsSidebar component
      • State: users[:id].routes
• Route: /dashboard

NavBar

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

New Activity Hover

• Activities/routes dropdown

User Menu Hover

• User Menu Dropdown

Log In Page

• loginContainer
  • login component
• Route: /login
• State: errors.login

Sign Up Page

• signupContainer
  • signup component
• Route: /signup
• State: errors.signup

Splash Page

• Route: /
• State: ui

Past Routes

• RoutesContainer

  • RoutesIndex

    • Route: /routes
    • RoutesIndexItem
    • State: routes[:id], users[:id]

  • RouteShowContainer

    • RouteShow
    • Route: /routes/:id
    • State: routes[:id], comments[:id], photos[:id], users[:id]

New Activity/Route

• RouteForm
• Route: /routes/new
• State: errors.routeForm

• RouteBuilder component
  • Route: /routebuilder
  • State: ui