Component Hierachy

React Component Hierarchy

Functional Component Hierarchy

• Root
  • App
    • NavBar
    • MainPage
    • Footer

NavBar

• NavBarContainer
  • Components:
    • SessionButtonsContainer + SessionButtons
      • State: session
    • NavDropdown
      • NavDropDown
      • NavDropDownItem
      • State: n/a
      • Path: /#/dashboard/:mode
    • UserScore
      • UserScore
      • State: session.current_user[score]
    • NotificationsDropDown //extra mvp
      • NotificationsIndex
      • NotificationItem
      • State: session.current_user[notifications]
    • UserMenu
      • UserProfileInfo
      • UserScore
      • State: session.current_user[score], session.current_user[profile_pic], session.current_user[username]

Note: All other components are rendered inside of MainPage

Landing Page

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

NavContainer

• NavContainer
• Components:
  • NavItem
    • NavItemInfo1 & NavItemInfo2
• Route: /#/dashboard
• State:
  • session.current_user[challenges_solved]
  • session.current_user[challenges_shortest]
  • session.current_user[bots_beaten]
  • session.current_user[lvls_beaten]

Sub-Navs (Arcade, Bots)

• ArcadeSubNavContainer
  • Components:
    • ArcadeSubNav
      • LevelSetIndex +LevelSetIndexItem
  • Route: /#/arcade
  • State: entities.level_sets, session.current_user
• BotSubNavContainer
  • Components:
    • BotSubNav
      • BotIndex +BotIndexItem +BotStats
  • Route: /#/bots
  • State: entities.bots

REPL

• REPLContainer
  • Components:
    • Score
    • Description
    • IDE
      • LanguageDropDown
      • CodeArea
      • TestsIndex
        • TestsIndexItem
  • Route: /#/:mode/repl/:taskId/:language
  • State: current_tests, current_task