-
Notifications
You must be signed in to change notification settings - Fork 19
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Set Up Container Component for MTV Checkout Workflows (#13334)
Connects #13318 ### Description This does multiple things: - refactors `QueueApp` to break out MTV routes into their own file - creates MotionToVacateContext for data handling as part of MTV checkout flow - creates MotionToVacateFlowContainer that will serve as a container for the MTV checkout flows ### Acceptance Criteria - [ ] Code compiles correctly
- Loading branch information
Showing
5 changed files
with
142 additions
and
88 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| import React, { useState } from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
|
|
||
| const defaultState = {}; | ||
|
|
||
| // This pattern allows us to access a shared object state using familiar functions | ||
| // Components that consume this context can simply use this syntax: | ||
| // const [state, setState] = useContext(MotionToVacateContext); | ||
| // setState({...state, foo: 'bar'}); | ||
| export const MotionToVacateContext = React.createContext([{}, () => null]); | ||
|
|
||
| export const MotionToVacateContextProvider = ({ initialState = { ...defaultState }, children }) => { | ||
| const [state, setState] = useState(initialState); | ||
|
|
||
| return <MotionToVacateContext.Provider value={[state, setState]}>{children}</MotionToVacateContext.Provider>; | ||
| }; | ||
| MotionToVacateContextProvider.propTypes = { | ||
| initialState: PropTypes.object, | ||
| children: PropTypes.element | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| import React from 'react'; | ||
| import { useSelector } from 'react-redux'; | ||
| import { useParams, useRouteMatch, Switch, Route } from 'react-router'; | ||
| import { taskById, appealWithDetailSelector } from '../selectors'; | ||
| import { MotionToVacateContextProvider } from './MotionToVacateContext'; | ||
|
|
||
| export const MotionToVacateFlowContainer = () => { | ||
| const { path } = useRouteMatch(); | ||
| const { taskId, appealId } = useParams(); | ||
| const task = useSelector((state) => taskById(state, { taskId })); | ||
| const appeal = useSelector((state) => appealWithDetailSelector(state, { appealId })); | ||
|
|
||
| // For linter while things are stubbed — remove once used | ||
| (() => ({ task, | ||
| appeal }))(); | ||
|
|
||
| return ( | ||
| <React.Fragment> | ||
| <MotionToVacateContextProvider> | ||
| {/* MTV Progress Bar (#13319) Here */} | ||
|
|
||
| <Switch> | ||
| <Route path={`${path}/review_vacatures`}> | ||
| {/* Insert component from #13007 here */} | ||
| {/* <ReviewVacatedDecisionIssuesView appeal={appeal} /> */} | ||
| <></> | ||
| </Route> | ||
| <Route path={`${path}/add_decisions`}> | ||
| {/* Insert component from #13071 here */} | ||
| {/* <AddDecisionsView appeal={appeal} /> */} | ||
| <></> | ||
| </Route> | ||
| </Switch> | ||
| </MotionToVacateContextProvider> | ||
| </React.Fragment> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| import React from 'react'; | ||
| import { Route, useParams, useHistory } from 'react-router'; | ||
| import PageRoute from '../../components/PageRoute'; | ||
|
|
||
| import TASK_ACTIONS from '../../../constants/TASK_ACTIONS.json'; | ||
| import ReviewMotionToVacateView from './ReviewMotionToVacateView'; | ||
| import { AddressMotionToVacateView } from './AddressMotionToVacateView'; | ||
| import { ReturnToLitSupportModal } from './ReturnToLitSupportModal'; | ||
| import { useDispatch } from 'react-redux'; | ||
| import { returnToLitSupport } from './mtvActions'; | ||
| import { MotionToVacateFlowContainer } from './MotionToVacateFlowContainer'; | ||
|
|
||
| const RoutedReturnToLitSupport = (props) => { | ||
| const { taskId } = useParams(); | ||
| const { goBack } = useHistory(); | ||
| const dispatch = useDispatch(); | ||
|
|
||
| return ( | ||
| <ReturnToLitSupportModal | ||
| onCancel={() => goBack()} | ||
| onSubmit={({ instructions }) => dispatch(returnToLitSupport({ instructions, | ||
| task_id: taskId }, props))} | ||
| /> | ||
| ); | ||
| }; | ||
|
|
||
| const PageRoutes = [ | ||
| <PageRoute | ||
| path={`/queue/appeals/:appealId/tasks/:taskId/${TASK_ACTIONS.ADDRESS_MOTION_TO_VACATE.value}`} | ||
| title="Address Motion to Vacate | Caseflow" | ||
| component={AddressMotionToVacateView} | ||
| />, | ||
|
|
||
| // This route handles the remaining checkout flow | ||
| <Route | ||
| path="/queue/appeals/:appealId/tasks/:taskId/motion_to_vacate_checkout" | ||
| component={MotionToVacateFlowContainer} | ||
| /> | ||
| ]; | ||
|
|
||
| const ModalRoutes = [ | ||
| <PageRoute | ||
| exact | ||
| path={[ | ||
| '/queue/appeals/:appealId/tasks/:taskId', | ||
| TASK_ACTIONS.ADDRESS_MOTION_TO_VACATE.value, | ||
| TASK_ACTIONS.JUDGE_RETURN_TO_LIT_SUPPORT.value | ||
| ].join('/')} | ||
| title="Return to Litigation Support | Caseflow" | ||
| component={RoutedReturnToLitSupport} | ||
| />, | ||
|
|
||
| <Route | ||
| path={`/queue/appeals/:appealId/tasks/:taskId/${TASK_ACTIONS.SEND_MOTION_TO_VACATE_TO_JUDGE.value}`} | ||
| component={ReviewMotionToVacateView} | ||
| /> | ||
| ]; | ||
|
|
||
| export const motionToVacateRoutes = { | ||
| page: PageRoutes, | ||
| modal: ModalRoutes | ||
| }; |