Component Hierarchy - lisza/storie GitHub Wiki

Storie's component hierarchy. Very first draft.

Top Level Components

  • Root
    • App
      • NavBar
      • MainContent

Session

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

NavBar

  • NavBarContainer + Navbar
    • Components:
      • SessionButtonsContainer + SessionButtons
        • state: session[:currentUser]
      • ProfilePic
        • state: session[:currentUser].img_url

Stories

  • StoriesIndexContainer + StoriesIndex
    • Route: /#/
    • State: stories
    • Components:
      • StoriesIndexThumb
        • State: stories Note: This is assuming that for the homepage we will return all stories. How is it different if we want to filter for the UserProfile page?

Story Show

  • StoryShowContainer + StoryShow
    • Route: /#/stories/:storyId
    • State: stories[:id], users[:id]
      • (We want to display: //Make this a separate Component StoryDetail? stories[:id].title, stories[:id].description, stories[:id].body, stories[:id].created_at, stories[:id].author_id.username, stories[:id].author_id.img_url, stories[:id].likers, // probs change to 'likes' in state shape stories[:id].liked_by_current_user)
    • Components:
      • EditStoryContainer + EditStory Where exactly does the edit story functionality come in?
        • ProtectedRoute: /#/stories/[:id]/edit
      • CommentFormContainer + CommentForm
        • CurrentUserThumb as a separate Component?
      • CommentsContainer + Comments
        • State: comments[:id]
        • Components:
          • CommentDetailContainer + CommentDetail
            • State: comments[:id], users[:id]
              • (We want to display: comments[:id].body, comments[:id].created_at, users[:author_id].username, users[:author_id].img_url)

Create Story

  • StoryFormContainer + StoryForm
    • ProtectedRoute: /#/stories/new
    • State: errors.storyForm //Fix name in state shape

Users

  • UserProfile
    • Route: /#/users/:userId
    • State: users[:id], stories[:id]
    • Components:
      • UserDetail (incl follows stuff)(Separate component or write out directly in UserProfile?)
      • StoryIndex - filtered by author_id, separate component or reusable?
        • Components:
          • StoryIndexThumb (map over stories pre-filtered by author_id, or include a user's authored stories in state.users?)