Caseflow Dispatch Frontend - TISTATechnologies/caseflow GitHub Wiki

This page is a work in progress, capturing a quick dive into the components in Spring 2020.

             Rails Views                             React Components
 +---+app/views/dispatch/establish_claims/+-----------+client/app/containers/EstablishClaimPage/+---------------------------------------------------------------------------+
 |                                          |                                                                                                                               |
 |                                          |                                                                                                                               |
 |                                          |                                                                                                                               |
 +                                          +                                                                                                                               +
                                                EstablishClaimPage
                                                    index.jsx        EstablishClaimContainer.jsx
                                                  +-----------+     +--------------------------+
                                                  |           |     |                          |
    assigned_existing_ep.html.erb+--------+       |           |     |                          |
                                          |       |           |     |                          |                                       +--+
    canceled.html.erb+--------------------------------------------> | EstablishClaimCancel+------------>  EstablishClaimCancel.jsx        |    Complete and cancel handle 'end
                                          |       |           |     |                          |                                          +--+ states' for Establishing a claim
                                          +-----------------------> | EstablishClaimComplete+---------->  EstablishClaimComplete.jsx      |
                                          |       |           |     |                          |                                       +--+
                                       +--------------------------> | UnpreparedTasksIndex+------------>  UnpreparedTasksIndex.jsx
                                       |  |       |           |     |                          |
    canceled_tasks.html.erb+--------------------------------------> | CanceledTasksIndex+-------------->  CanceledTasksIndex.jsx
                                       |  |       |           |     |                          |
    complete.html.erb+--------------------+   +-------------------> | EstablishClaim+------------------>  EstablishClaim.jsx
                                       |      |   |           |     |                          |         +--------------------------+
                                       |      |   |           |     |                          |         |                          |
    show.html.erb+----------------------------+   |           |     |                          |         |                          |
                                       |          +-----------+     |                          |         |                          |
                                       |                            |                          |         | EstablishClaimDecision+--------->  EstablishClaimDecision.jsx
    unprepared_tasks.html.erb+---------+                            |                          |         |                          |
                                                                    |                          |         | AssociatePage+------------------>  EstablishClaimAssociateEP.jsx
                                                                    |                          |         |                          |
                                                                    |                          |         | EstablishClaimForm+------------->  EstablishClaimForm.jsx
                                                                    +--------------------------+         |                          |
                                                                                                         | EstablishClaimNote+------------->  EstablishClaimNote.jsx
                            +                                          +                                 |                          |
                            |                                          |                                 | EstablishClaimEmail+------------>  EstablishClaimEmail.jsx
                            |                                          |                                 |                          |
                            |                                          |                                 |                          |
                            +------------------------------------------+                                 |                          |
                                                 |                                                       |                          |
                                                 |                                                       |                          |
                                                 |                                                       |                          |
                                                 |                                                       +--------------------------+
                                                 |
                                                 +                                       +                                                                                 +
                               distinct rails views return the EstablishClaimPage        |                                                                                 |
                               component with a prop `page`. EstablishClaimPage          |                                                                                 |
                               does some react magic I don't understand and then         +---------------------------------------------------------------------------------+
                               invokes EstablishClaimContainer. That page sets up                     |
                               shared behavior and then invokes another component                     |
                               based on the `page` value                                              |
                                                                                                      +
                                                                                          EstablishClaim is a dynamic page that
                                                                                          determines what it is based a the state
                                                                                          it has set. Different states may invoke
                                                                                          their corresponding component