Queue Frontend Development

Definitions

• "task actions"

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
  • In what order to these things happen?

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
  • 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

Useful Links

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

• Frontend Application State
• Frontend Basic Principles
• Frontend Best Practices
• Frontend Directory Structure
• Frontend Things to Avoid