-
Notifications
You must be signed in to change notification settings - Fork 5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Creating SignatureRequestNavigation component and extracting the UI r…
…endering part into a single component
- Loading branch information
Showing
11 changed files
with
161 additions
and
105 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
98 changes: 10 additions & 88 deletions
98
...ontainer/confirm-page-container-navigation/confirm-page-container-navigation.component.js
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 @@ | ||
| export { default } from './navigation'; |
2 changes: 1 addition & 1 deletion
2
...firm-page-container-navigation/index.scss → ui/components/app/navigation/index.scss
100755 → 100644
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,96 @@ | ||
| import React, { useContext } from 'react'; | ||
| import { useParams } from 'react-router-dom'; | ||
| import PropTypes from 'prop-types'; | ||
| import { I18nContext } from '../../../contexts/i18n'; | ||
|
|
||
| export default function Navigation({ | ||
| enumUnapprovedTxsOrUnconfirmedMessages, | ||
| onNext, | ||
| }) { | ||
| const t = useContext(I18nContext); | ||
| const { id } = useParams(); | ||
|
|
||
| const currentPosition = enumUnapprovedTxsOrUnconfirmedMessages.indexOf(id); | ||
| const totalTx = enumUnapprovedTxsOrUnconfirmedMessages.length; | ||
| const positionOfCurrentTx = currentPosition + 1; | ||
| const nextTxId = enumUnapprovedTxsOrUnconfirmedMessages[currentPosition + 1]; | ||
| const prevTxId = enumUnapprovedTxsOrUnconfirmedMessages[currentPosition - 1]; | ||
| const showNavigation = enumUnapprovedTxsOrUnconfirmedMessages.length > 1; | ||
| const firstTx = enumUnapprovedTxsOrUnconfirmedMessages[0]; | ||
| const lastTx = | ||
| enumUnapprovedTxsOrUnconfirmedMessages[ | ||
| enumUnapprovedTxsOrUnconfirmedMessages.length - 1 | ||
| ]; | ||
|
|
||
| return ( | ||
| <div | ||
| className="navigation" | ||
| style={{ | ||
| display: showNavigation ? 'flex' : 'none', | ||
| }} | ||
| > | ||
| <div | ||
| className="navigation__container" | ||
| data-testid="navigation-container" | ||
| style={{ | ||
| visibility: prevTxId ? 'initial' : 'hidden', | ||
| }} | ||
| > | ||
| <button | ||
| className="navigation__arrow" | ||
| data-testid="first-page" | ||
| onClick={() => onNext(firstTx)} | ||
| > | ||
| <i className="fa fa-angle-double-left fa-2x" /> | ||
| </button> | ||
| <button | ||
| className="navigation__arrow" | ||
| data-testid="previous-page" | ||
| onClick={() => onNext(prevTxId)} | ||
| > | ||
| <i className="fa fa-angle-left fa-2x" /> | ||
| </button> | ||
| </div> | ||
| <div className="navigation__textcontainer"> | ||
| <div className="navigation__navtext"> | ||
| {positionOfCurrentTx} {t('ofTextNofM')} {totalTx} | ||
| </div> | ||
| <div className="navigation__longtext"> | ||
| {t('requestsAwaitingAcknowledgement')} | ||
| </div> | ||
| </div> | ||
| <div | ||
| className="navigation__container" | ||
| style={{ | ||
| visibility: nextTxId ? 'initial' : 'hidden', | ||
| }} | ||
| > | ||
| <button | ||
| className="navigation__arrow" | ||
| data-testid="next-page" | ||
| onClick={() => onNext(nextTxId)} | ||
| > | ||
| <i className="fa fa-angle-right fa-2x" /> | ||
| </button> | ||
| <button | ||
| className="navigation__arrow" | ||
| data-testid="last-page" | ||
| onClick={() => onNext(lastTx)} | ||
| > | ||
| <i className="fa fa-angle-double-right fa-2x" /> | ||
| </button> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| Navigation.propTypes = { | ||
| /** | ||
| * Returns the names of the enumerable string properties and methods of an object. | ||
| */ | ||
| enumUnapprovedTxsOrUnconfirmedMessages: PropTypes.array.isRequired, | ||
| /** | ||
| * The onNext handler to be passed to the Navigation component. | ||
| */ | ||
| onNext: PropTypes.func.isRequired, | ||
| }; |
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
1 change: 1 addition & 0 deletions
1
ui/components/app/signature-request/signature-request-navigation/index.js
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 @@ | ||
| export { default } from './signature-request-navigation'; |
36 changes: 36 additions & 0 deletions
36
...onents/app/signature-request/signature-request-navigation/signature-request-navigation.js
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,36 @@ | ||
| import React from 'react'; | ||
| import { useDispatch, useSelector } from 'react-redux'; | ||
| import { useHistory } from 'react-router-dom'; | ||
| import { unconfirmedMessagesHashSelector } from '../../../../selectors'; | ||
| import { | ||
| CONFIRM_TRANSACTION_ROUTE, | ||
| SIGNATURE_REQUEST_PATH, | ||
| } from '../../../../helpers/constants/routes'; | ||
| import { clearConfirmTransaction } from '../../../../ducks/confirm-transaction/confirm-transaction.duck'; | ||
| import Navigation from '../../navigation'; | ||
|
|
||
| const SignatureRequestNavigation = () => { | ||
| const dispatch = useDispatch(); | ||
| const history = useHistory(); | ||
|
|
||
| const unconfirmedMessages = useSelector(unconfirmedMessagesHashSelector); | ||
| const enumUnconfirmedMessages = Object.keys(unconfirmedMessages); | ||
|
|
||
| const onNextMessage = (txId) => { | ||
| if (txId) { | ||
| dispatch(clearConfirmTransaction()); | ||
| history.push( | ||
| `${CONFIRM_TRANSACTION_ROUTE}/${txId}${SIGNATURE_REQUEST_PATH}`, | ||
| ); | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <Navigation | ||
| enumUnapprovedTxsOrUnconfirmedMessages={enumUnconfirmedMessages} | ||
| onNext={onNextMessage} | ||
| /> | ||
| ); | ||
| }; | ||
|
|
||
| export default SignatureRequestNavigation; |
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