Component Hierarchy

Jump to bottom

Brice Powell edited this page Dec 28, 2017 · 9 revisions

React Component Hiearchy

Functional Component Hierarchy

Root

App
NavBar
MainPage
Footer

NavBar

Logo
- Link To Workouts Index
Nav Links Dropdown
- Workout Index
- Route Index
Current User Profile Pic
Add Workout/Routes Dropdown
- Create Workout
- Create Route

Workouts

Workout Create
- NavBar
- Create Workout Form Container
  - Workout Form
    - Distance Input
    - Elevation Gain Input
    - Duration Input
- Footer
Workout Index
- Nav Bar
- Workouts Container
  - Workout Post
    - User Profile Pic
    - Username
    - Title
    - Date
    - Description
    - Map Screen Shot
- Footer
Workout Show
- Nav Bar
- Workout DetailsContainer
  - User Info
    - User Profile Pic
    - Username
    - Title
    - Date
    - Description
  - Stats Info
    - Distance
    - Duration
    - Elevation Gain
    - Speed (Average)
- Work Out Route Container
  - Google Map Api
- Elevation Gain Graph Container
- Footer

Routes

Routes Create
- Nav Bar
- Google Map Container
  - Click to add route
  - Route Details container
    - Route Type
    - Distance
    - Estimated Duration
    - Elevation Gain -Footer
Routes Index
- NavBar
- Page Title Container
  - Title (My Routes)
  - Button to Create New Route
- Routes Index Container
  - Workout Type Selector
  - Route
    - Google Map Api
    - Route Details
      - Title
      - Distance
      - Elevation Gain
      - Estimated Moving Time
- Footer
Routes Show
- Nav Bar
- Route Title Container
  - Title
- Route Container
  - Google Map Api
- Route Details Container
  - Title
  - Distance
  - Elevation Gain
  - Estimated Moving Time
- Elevation Gain Graph Container
- Footer

Session

New Session
- Nav Bar
  - Logo
  - Sign Up
- Sign In Form Container
  - Username Input
  - Password Input
  - Sign In Button
  - Link to Sign up
- Footer
New User
- Current Page Hierarchy
- Sign Up Modal
  - Username Input
  - Password Input
  - Sign Up Button
  - Link to Sign In

Footer

Footer Container
- Links to Personal Sites