Skip to content

Component Hierarchy

Matt Ha edited this page Jan 30, 2018 · 18 revisions

Component Hierarchy

General

  • App
    • NavigationBar
    • Main
      • All components will be nested here.

NavigationBar

  • NavigationBarContainer, NavBar
    • State: session
  • Components
    • SearchBar
    • NavigationMenu
      • Will hold links to menu items.

Session Form / Login Screen

  • SessionFormContainer, SessionForm
    • Route: /#/signin and /#/signup
    • State: errors.session

Dashboard / Home Screen

  • PostIndexContainer
    • Route: #/posts
    • State: posts
  • Components:
    • PostList
      • Renders main feed of Posts
    • ProfileSidebar
      • UserHeader
        • Will be using boolean main: false to render main UserHeader in User Show screen
      • GeneralFooter

User Screen / Profile

  • UserShowContainer
    • Route: #/users/:userId
    • State: users[:id], posts
  • UserHeader
    • Renders User information
  • PostGrid
    • Renders feed of user Posts
  • Footer

Discover Feed

  • UserIndexContainer, PostsIndexContainer
    • Route: #/posts, #/users
    • State: users, posts
  • Components:
    • DiscoverPeopleBar
      • Renders people that user does not follow (will base on mutual follows)
    • PostsList
      • Will use explore: true boolean and type: grid boolean props to render trending posts in a grid view
    • Footer

Search Results Screen

  • PostsIndexContainer
    • Route: #/posts
    • State: posts
  • Components
    • PostsList
    • Footer

Edit Profile / Settings

  • UserEditContainer
    • Route: /#/users/:userId/edit
    • State: users[:id]
  • Components
    • EditUserSidebar
    • EditUserForm
      • Route: /#/users/:userId/edit
      • State: users[:id]
    • Footer

Clone this wiki locally