component hierarchy - Rmark92/Soundstorm GitHub Wiki

Functional Component Hierarchy

• Root
  • App
    • NavBar
    • MainPage
    • Footer
    • TrackPlayerContainer + TrackPlayer

NavBar

• NavBar
  • Components:
    • SessionContainer + Session
      • State: session, users[session[:id]]

TrackPlayer

• TrackPlayerContainer + TrackPlayer
  • State: currentTrack, tracks[currentTrack[:id]]

Session

• SessionFormContainer + SessionForm
  • Route: /#/log_in, /#/sign_up
  • State: errors.sessionForm

Tracks

• TrackIndexContainer + TrackIndex

  • Route: /#/, /#/users/:id, /#/users/:id/likes, /#/playlists/:id
  • State: tracks, users
  • Components:
    • TrackIndexItemContainer + TrackIndexItem

• TrackIndexItemContainer + TrackIndexItem

  • Route: /#/tracks, /#/users/:id, /#/users/:id/likes, /#/playlists/:id
  • State: tracks[:id], currentTrack

• TrackShowContainer + TrackShow

  • Route: /#/tracks/:id
  • State: tracks[:id], users[:id], currentTrack
  • Components:
    • CommentFormContainer + CommentForm
    • CommentIndexContainer + CommentIndex

• TrackFormContainer + TrackForm

  • Route: /#/tracks/new
  • State: errors.trackForm

Comments

• CommentFormContainer + CommentForm

  • Route: /#/tracks/:id
  • State: errors.commentForm

• CommentsIndexContainer + CommentsIndex

  • Route: /#/tracks/:id, /#/users/:id/comments
  • State: comments, users
  • Components:
    • CommentIndexItem

Users

• UserShowContainer + UserShow
  • Route: /#/users/:id
  • State: users[:id], tracks
  • Components:
    • TrackIndexContainer + TrackIndex
    • CommentIndexContainer + CommentIndex
    • PlaylistIndexContainer + PlaylistIndex