Skip to content

Queue Frontend Development

Jump to bottom
Yoom Lam edited this page Apr 14, 2020 · 16 revisions

Definitions

Relevant files

  • task_action_repository.rb

    • referenced by func of actions in TASK_ACTIONS.json
    • defines a configuration used by QueueFlowModal.jsx
      • modal_title, modal_body
      • type: Task name
      • options: provided in dropdown menu in the modal
      • selected: initial selection in dropdown menu
      • modal_selector_placeholder: placeholder text for dropdown menu
      • redirect_after: redirect path after submit is pressed and there's no error
      • custom configurations: back_to_hearing_schedule

  • QueueFlowModal.jsx

    • modal window that pops up when a user selects a task action from the dropdown (in the Case Details page of an appeal)
    • Many modals simply feed props to QueueFlowModal in order to configure submit, success, pathAfterSubmit, validateForm, button, reloadPageAfterSubmit etc.
    • Some props also come from the Redux state, e.g., the success and error messages.

  • QueueLoadingScreen.jsx

    • used to (potentially) load queues: queueConfig, fetchAllAttorneys, fetchAmaTasksOfUser, loadAttorneys
    • sets common Redux state.ui properties, e.g. userId, userRole

  • An appeal's case detail pages shows available actions for the logged-in user.

  • A task defines available_actions which references constants in TASK_ACTIONS.json.

  • TaskActionHelper build a hash of available actions by returning the TASK_ACTIONS constants or calling func.

  • A task calls TaskActionHelper.build_hash to create the list of available actions.

  • The logic to determine available actions is sometimes defined in task_action_repository.rb and other times in the task itself.

Redux state

Ever see this in React components: export default (connect(mapStateToProps, mapDispatchToProps)(QueueLoadingScreen)). Here's what it's used for:

  • mapStateToProps maps Redux state to the component's props
    • it calls functions like getTasks and taskById (defined in selectors.js)
  • mapDispatchToProps maps results of functions (defined in uiActions.js) to props and Redux state
    • functions like setUserId and fetchAllAttorneys
    • The functions can be called within the file to update the state and hence the page.
    • These functions return an object with type being the Redux action (defined in uiConstants.js) and payload being the thing to be added to props.

Reducers are defined in uiReducer.js and are keyed off Redux action type and do the actual update to the Redux state.

  • When are these reducers called?

Selectors are defined in selectors.js and are what we use to read and filter through the Redux state. Here's a quick article with more on what selectors are and why we use them.

React Component Trees for reference

(Rough) React component tree for Case Details page

  • Queue
    • ReduxBase
      • QueueApp.jsx
        • CaseDetailsLoadingScreen.jsx
          • SomeCustomModal.jsx (e.g., AssignToView.jsx)
            • QueueFlowModal.jsx

(Rough) React component tree for Judge Case Assignment page

  • Queue
    • ReduxBase
      • QueueApp.jsx
        • QueueLoadingScreen.jsx
          • JudgeAssignTaskListView.jsx

Routes

Let's track how :user_id is propagated to components:

Route /queue/:user_id(*rest)(.:format) is handled by

If the request is for html, then controller will render "queue/index", which is provided by

QueueApp.jsx feeds the props (including userId) to other React components.

QueueLoadingScreen.jsx sets ui.loadedUserId in the Redux store based on props.userId.

Useful Links

Below are pages within the greater Caseflow wiki related to Frontend development

Clone this wiki locally