From 8e518d9767a040b161627b990428cbe5c20f8609 Mon Sep 17 00:00:00 2001 From: Juan Cazala Date: Fri, 28 May 2021 10:41:45 -0300 Subject: [PATCH] fix: proceed loading (#306) * fix: proceed loading * fix: loading states --- .../AuthorizationModal.container.ts | 11 +---- .../AuthorizationModal/AuthorizationModal.tsx | 15 +++---- .../AuthorizationModal.types.ts | 25 +++-------- .../CancelSalePage.container.ts | 11 ++++- .../CancelSalePage/CancelSalePage.tsx | 5 ++- .../CancelSalePage/CancelSalePage.types.ts | 3 +- .../SellPage/SellModal/SellModal.tsx | 7 ++- .../SellPage/SellModal/SellModal.types.ts | 1 + .../components/SellPage/SellPage.container.ts | 8 ++-- webapp/src/components/SellPage/SellPage.tsx | 9 +++- .../src/components/SellPage/SellPage.types.ts | 6 ++- .../Authorization/Authorization.container.ts | 30 +++++++++++++ .../Authorization/Authorization.tsx | 24 ++++++++-- .../Authorization/Authorization.types.ts | 17 ++++++- .../SettingsPage/Authorization/index.ts | 2 +- .../SettingsPage/SettingsPage.container.ts | 10 +---- .../components/SettingsPage/SettingsPage.tsx | 23 ---------- .../SettingsPage/SettingsPage.types.ts | 20 +-------- webapp/src/modules/order/reducer.ts | 44 +++++++++++++++++++ 19 files changed, 168 insertions(+), 103 deletions(-) create mode 100644 webapp/src/components/SettingsPage/Authorization/Authorization.container.ts diff --git a/webapp/src/components/AuthorizationModal/AuthorizationModal.container.ts b/webapp/src/components/AuthorizationModal/AuthorizationModal.container.ts index ca96d65faa..235f429f1a 100644 --- a/webapp/src/components/AuthorizationModal/AuthorizationModal.container.ts +++ b/webapp/src/components/AuthorizationModal/AuthorizationModal.container.ts @@ -1,15 +1,12 @@ import { connect } from 'react-redux' import { - grantTokenRequest, GRANT_TOKEN_REQUEST, - revokeTokenRequest, REVOKE_TOKEN_REQUEST } from 'decentraland-dapps/dist/modules/authorization/actions' import { getData as getAuthorizations } from 'decentraland-dapps/dist/modules/authorization/selectors' import { isLoadingType } from 'decentraland-dapps/dist/modules/loading/selectors' import { getLoading } from 'decentraland-dapps/dist/modules/authorization/selectors' import { RootState } from '../../modules/reducer' -import { getPendingAuthorizationTransactions } from '../../modules/transaction/selectors' import { MapStateProps, MapDispatchProps, @@ -19,15 +16,11 @@ import AuthorizationModal from './AuthorizationModal' const mapState = (state: RootState): MapStateProps => ({ authorizations: getAuthorizations(state), - pendingTransactions: getPendingAuthorizationTransactions(state), - isLoading: + isAuthorizing: isLoadingType(getLoading(state), GRANT_TOKEN_REQUEST) || isLoadingType(getLoading(state), REVOKE_TOKEN_REQUEST) }) -const mapDispatch = (dispatch: MapDispatch): MapDispatchProps => ({ - onGrant: authorization => dispatch(grantTokenRequest(authorization)), - onRevoke: authorization => dispatch(revokeTokenRequest(authorization)) -}) +const mapDispatch = (_dispatch: MapDispatch): MapDispatchProps => ({}) export default connect(mapState, mapDispatch)(AuthorizationModal) diff --git a/webapp/src/components/AuthorizationModal/AuthorizationModal.tsx b/webapp/src/components/AuthorizationModal/AuthorizationModal.tsx index 6c5416a20d..3ff0e5bd6f 100644 --- a/webapp/src/components/AuthorizationModal/AuthorizationModal.tsx +++ b/webapp/src/components/AuthorizationModal/AuthorizationModal.tsx @@ -13,10 +13,8 @@ const AuthorizationModal = (props: Props) => { open, authorization, authorizations, - pendingTransactions, isLoading, - onGrant, - onRevoke, + isAuthorizing, onCancel, onProceed } = props @@ -57,11 +55,6 @@ const AuthorizationModal = (props: Props) => { @@ -69,7 +62,11 @@ const AuthorizationModal = (props: Props) => { @@ -216,6 +220,7 @@ const SellModal = (props: Props) => { diff --git a/webapp/src/components/SellPage/SellModal/SellModal.types.ts b/webapp/src/components/SellPage/SellModal/SellModal.types.ts index a7abb5bda5..c16d66e10a 100644 --- a/webapp/src/components/SellPage/SellModal/SellModal.types.ts +++ b/webapp/src/components/SellPage/SellModal/SellModal.types.ts @@ -10,6 +10,7 @@ export type Props = { wallet: Wallet | null authorizations: Authorization[] isLoading: boolean + isCreatingOrder: boolean onNavigate: (path: string) => void onCreateOrder: typeof createOrderRequest } diff --git a/webapp/src/components/SellPage/SellPage.container.ts b/webapp/src/components/SellPage/SellPage.container.ts index 49f852d8cb..c148ea55c3 100644 --- a/webapp/src/components/SellPage/SellPage.container.ts +++ b/webapp/src/components/SellPage/SellPage.container.ts @@ -3,17 +3,19 @@ import { push } from 'connected-react-router' import { FETCH_AUTHORIZATIONS_REQUEST } from 'decentraland-dapps/dist/modules/authorization/actions' import { getData as getAuthorizations, - getLoading + getLoading as getLoadingAuthorizations } from 'decentraland-dapps/dist/modules/authorization/selectors' import { isLoadingType } from 'decentraland-dapps/dist/modules/loading/selectors' import { RootState } from '../../modules/reducer' -import { createOrderRequest } from '../../modules/order/actions' +import { createOrderRequest, CREATE_ORDER_REQUEST } from '../../modules/order/actions' +import {getLoading as getLoadingOrders } from '../../modules/order/selectors' import { MapStateProps, MapDispatchProps, MapDispatch } from './SellPage.types' import SellPage from './SellPage' const mapState = (state: RootState): MapStateProps => ({ authorizations: getAuthorizations(state), - isLoading: isLoadingType(getLoading(state), FETCH_AUTHORIZATIONS_REQUEST) + isLoading: isLoadingType(getLoadingAuthorizations(state), FETCH_AUTHORIZATIONS_REQUEST), + isCreatingOrder: isLoadingType(getLoadingOrders(state), CREATE_ORDER_REQUEST) }) const mapDispatch = (dispatch: MapDispatch): MapDispatchProps => ({ diff --git a/webapp/src/components/SellPage/SellPage.tsx b/webapp/src/components/SellPage/SellPage.tsx index 2dbb94c04f..c91625b1ef 100644 --- a/webapp/src/components/SellPage/SellPage.tsx +++ b/webapp/src/components/SellPage/SellPage.tsx @@ -9,7 +9,13 @@ import { Props } from './SellPage.types' import './SellPage.css' const SellPage = (props: Props) => { - const { authorizations, isLoading, onNavigate, onCreateOrder } = props + const { + authorizations, + isLoading, + isCreatingOrder, + onNavigate, + onCreateOrder + } = props return ( <> @@ -24,6 +30,7 @@ const SellPage = (props: Props) => { wallet={wallet} authorizations={authorizations} isLoading={isLoading} + isCreatingOrder={isCreatingOrder} onNavigate={onNavigate} onCreateOrder={onCreateOrder} /> diff --git a/webapp/src/components/SellPage/SellPage.types.ts b/webapp/src/components/SellPage/SellPage.types.ts index 839efb189d..99f325a34c 100644 --- a/webapp/src/components/SellPage/SellPage.types.ts +++ b/webapp/src/components/SellPage/SellPage.types.ts @@ -9,11 +9,15 @@ import { export type Props = { authorizations: Authorization[] isLoading: boolean + isCreatingOrder: boolean onCreateOrder: typeof createOrderRequest onNavigate: (path: string) => void } -export type MapStateProps = Pick +export type MapStateProps = Pick< + Props, + 'authorizations' | 'isLoading' | 'isCreatingOrder' +> export type MapDispatchProps = Pick export type MapDispatch = Dispatch< CallHistoryMethodAction | CreateOrderRequestAction diff --git a/webapp/src/components/SettingsPage/Authorization/Authorization.container.ts b/webapp/src/components/SettingsPage/Authorization/Authorization.container.ts new file mode 100644 index 0000000000..8dfeabc49d --- /dev/null +++ b/webapp/src/components/SettingsPage/Authorization/Authorization.container.ts @@ -0,0 +1,30 @@ +import { connect } from 'react-redux' +import { + getData as getAuthorizations, + getLoading +} from 'decentraland-dapps/dist/modules/authorization/selectors' +import { + grantTokenRequest, + revokeTokenRequest +} from 'decentraland-dapps/dist/modules/authorization/actions' +import { RootState } from '../../../modules/reducer' +import { getPendingAuthorizationTransactions } from '../../../modules/transaction/selectors' +import { + MapStateProps, + MapDispatchProps, + MapDispatch +} from './Authorization.types' +import Authorization from './Authorization' + +const mapState = (state: RootState): MapStateProps => ({ + authorizations: getAuthorizations(state), + pendingTransactions: getPendingAuthorizationTransactions(state), + loading: getLoading(state) +}) + +const mapDispatch = (dispatch: MapDispatch): MapDispatchProps => ({ + onGrant: authorization => dispatch(grantTokenRequest(authorization)), + onRevoke: authorization => dispatch(revokeTokenRequest(authorization)) +}) + +export default connect(mapState, mapDispatch)(Authorization) diff --git a/webapp/src/components/SettingsPage/Authorization/Authorization.tsx b/webapp/src/components/SettingsPage/Authorization/Authorization.tsx index e5b5dffccb..47fea64414 100644 --- a/webapp/src/components/SettingsPage/Authorization/Authorization.tsx +++ b/webapp/src/components/SettingsPage/Authorization/Authorization.tsx @@ -6,14 +6,22 @@ import { Form, Radio, Loader, Popup, RadioProps } from 'decentraland-ui' import { locations } from '../../../modules/routing/locations' import { hasTransactionPending } from '../../../modules/transaction/utils' import { getContract } from '../../../modules/contract/utils' +import { + GrantTokenRequestAction, + GRANT_TOKEN_REQUEST, + RevokeTokenRequestAction, + REVOKE_TOKEN_REQUEST +} from 'decentraland-dapps/dist/modules/authorization/actions' +import { areEqual } from 'decentraland-dapps/dist/modules/authorization/utils' import { isAuthorized } from './utils' import { Props } from './Authorization.types' import './Authorization.css' -const Authorizations = (props: Props) => { +const Authorization = (props: Props) => { const { authorization, authorizations, + loading, pendingTransactions, onGrant, onRevoke @@ -27,7 +35,17 @@ const Authorizations = (props: Props) => { const { contractAddress, authorizedAddress } = authorization const isLoading = - props.isLoading || + loading.some(action => { + if ( + action.type === GRANT_TOKEN_REQUEST || + action.type === REVOKE_TOKEN_REQUEST + ) { + const { payload } = action as + | GrantTokenRequestAction + | RevokeTokenRequestAction + return areEqual(authorization, payload.authorization) + } + }) || hasTransactionPending( pendingTransactions, authorizedAddress, @@ -75,4 +93,4 @@ const Authorizations = (props: Props) => { ) } -export default React.memo(Authorizations) +export default React.memo(Authorization) diff --git a/webapp/src/components/SettingsPage/Authorization/Authorization.types.ts b/webapp/src/components/SettingsPage/Authorization/Authorization.types.ts index 67c9e4091c..68843d8450 100644 --- a/webapp/src/components/SettingsPage/Authorization/Authorization.types.ts +++ b/webapp/src/components/SettingsPage/Authorization/Authorization.types.ts @@ -1,15 +1,28 @@ import { grantTokenRequest, - revokeTokenRequest + GrantTokenRequestAction, + revokeTokenRequest, + RevokeTokenRequestAction } from 'decentraland-dapps/dist/modules/authorization/actions' import { Authorization } from 'decentraland-dapps/dist/modules/authorization/types' +import { LoadingState } from 'decentraland-dapps/dist/modules/loading/reducer' import { Transaction } from 'decentraland-dapps/dist/modules/transaction/types' +import { Dispatch } from 'redux' export type Props = { authorization: Authorization authorizations: Authorization[] pendingTransactions: Transaction[] - isLoading?: boolean + loading: LoadingState onGrant: typeof grantTokenRequest onRevoke: typeof revokeTokenRequest } + +export type MapStateProps = Pick< + Props, + 'authorizations' | 'pendingTransactions' | 'loading' +> +export type MapDispatchProps = Pick +export type MapDispatch = Dispatch< + GrantTokenRequestAction | RevokeTokenRequestAction +> diff --git a/webapp/src/components/SettingsPage/Authorization/index.ts b/webapp/src/components/SettingsPage/Authorization/index.ts index 253061a682..ca054f294e 100644 --- a/webapp/src/components/SettingsPage/Authorization/index.ts +++ b/webapp/src/components/SettingsPage/Authorization/index.ts @@ -1,2 +1,2 @@ -import Authorization from './Authorization' +import Authorization from './Authorization.container' export { Authorization } diff --git a/webapp/src/components/SettingsPage/SettingsPage.container.ts b/webapp/src/components/SettingsPage/SettingsPage.container.ts index ccb35281e6..a991aa5c7c 100644 --- a/webapp/src/components/SettingsPage/SettingsPage.container.ts +++ b/webapp/src/components/SettingsPage/SettingsPage.container.ts @@ -5,15 +5,10 @@ import { getLoading, getError } from 'decentraland-dapps/dist/modules/authorization/selectors' -import { - FETCH_AUTHORIZATIONS_REQUEST, - grantTokenRequest, - revokeTokenRequest -} from 'decentraland-dapps/dist/modules/authorization/actions' +import { FETCH_AUTHORIZATIONS_REQUEST } from 'decentraland-dapps/dist/modules/authorization/actions' import { RootState } from '../../modules/reducer' import { isLoadingType } from 'decentraland-dapps/dist/modules/loading/selectors' -import { getPendingAuthorizationTransactions } from '../../modules/transaction/selectors' import { getWallet, isConnecting } from '../../modules/wallet/selectors' import { MapStateProps, @@ -32,7 +27,6 @@ const mapState = (state: RootState): MapStateProps => { return { wallet, authorizations: getAuthorizations(state), - pendingTransactions: getPendingAuthorizationTransactions(state), isLoadingAuthorization: isLoadingType( getLoading(state), FETCH_AUTHORIZATIONS_REQUEST @@ -43,8 +37,6 @@ const mapState = (state: RootState): MapStateProps => { } const mapDispatch = (dispatch: MapDispatch): MapDispatchProps => ({ - onGrant: authorization => dispatch(grantTokenRequest(authorization)), - onRevoke: authorization => dispatch(revokeTokenRequest(authorization)), onNavigate: path => dispatch(push(path)) }) diff --git a/webapp/src/components/SettingsPage/SettingsPage.tsx b/webapp/src/components/SettingsPage/SettingsPage.tsx index eb6b3b60f7..61a77136f0 100644 --- a/webapp/src/components/SettingsPage/SettingsPage.tsx +++ b/webapp/src/components/SettingsPage/SettingsPage.tsx @@ -25,12 +25,9 @@ const SettingsPage = (props: Props) => { const { wallet, authorizations, - pendingTransactions, isLoadingAuthorization, isConnecting, hasError, - onGrant, - onRevoke, onNavigate } = props @@ -197,10 +194,6 @@ const SettingsPage = (props: Props) => { chainId: manaEthereum.chainId, type: AuthorizationType.ALLOWANCE }} - pendingTransactions={pendingTransactions} - authorizations={authorizations} - onGrant={onGrant} - onRevoke={onRevoke} /> { chainId: manaEthereum.chainId, type: AuthorizationType.ALLOWANCE }} - authorizations={authorizations} - pendingTransactions={pendingTransactions} - onGrant={onGrant} - onRevoke={onRevoke} /> { chainId: manaMatic.chainId, type: AuthorizationType.ALLOWANCE }} - pendingTransactions={pendingTransactions} - authorizations={authorizations} - onGrant={onGrant} - onRevoke={onRevoke} /> @@ -245,10 +230,6 @@ const SettingsPage = (props: Props) => { chainId: manaEthereum.chainId, type: AuthorizationType.ALLOWANCE }} - pendingTransactions={pendingTransactions} - authorizations={authorizations} - onGrant={onGrant} - onRevoke={onRevoke} /> @@ -266,10 +247,6 @@ const SettingsPage = (props: Props) => { authorization.contractAddress } authorization={authorization} - pendingTransactions={pendingTransactions} - authorizations={authorizations} - onGrant={onGrant} - onRevoke={onRevoke} /> ) })} diff --git a/webapp/src/components/SettingsPage/SettingsPage.types.ts b/webapp/src/components/SettingsPage/SettingsPage.types.ts index 3690b3eedf..d25d857b8c 100644 --- a/webapp/src/components/SettingsPage/SettingsPage.types.ts +++ b/webapp/src/components/SettingsPage/SettingsPage.types.ts @@ -1,24 +1,14 @@ import { Dispatch } from 'redux' import { CallHistoryMethodAction } from 'connected-react-router' import { Wallet } from 'decentraland-dapps/dist/modules/wallet/types' -import { Transaction } from 'decentraland-dapps/dist/modules/transaction/types' import { Authorization } from 'decentraland-dapps/dist/modules/authorization/types' -import { - grantTokenRequest, - GrantTokenRequestAction, - revokeTokenRequest, - RevokeTokenRequestAction -} from 'decentraland-dapps/dist/modules/authorization/actions' export type Props = { wallet: Wallet | null authorizations: Authorization[] - pendingTransactions: Transaction[] isLoadingAuthorization: boolean hasError: boolean isConnecting: boolean - onGrant: typeof grantTokenRequest - onRevoke: typeof revokeTokenRequest onNavigate: (path: string) => void } @@ -26,15 +16,9 @@ export type MapStateProps = Pick< Props, | 'wallet' | 'authorizations' - | 'pendingTransactions' | 'isLoadingAuthorization' | 'isConnecting' | 'hasError' > -export type MapDispatchProps = Pick< - Props, - 'onGrant' | 'onRevoke' | 'onNavigate' -> -export type MapDispatch = Dispatch< - GrantTokenRequestAction | RevokeTokenRequestAction | CallHistoryMethodAction -> +export type MapDispatchProps = Pick +export type MapDispatch = Dispatch diff --git a/webapp/src/modules/order/reducer.ts b/webapp/src/modules/order/reducer.ts index 095c1d93c5..696d5c7289 100644 --- a/webapp/src/modules/order/reducer.ts +++ b/webapp/src/modules/order/reducer.ts @@ -13,6 +13,26 @@ import { FetchNFTSuccessAction, FETCH_NFT_SUCCESS } from '../nft/actions' +import { + CancelOrderFailureAction, + CancelOrderRequestAction, + CancelOrderSuccessAction, + CANCEL_ORDER_FAILURE, + CANCEL_ORDER_REQUEST, + CANCEL_ORDER_SUCCESS, + CreateOrderFailureAction, + CreateOrderRequestAction, + CreateOrderSuccessAction, + CREATE_ORDER_FAILURE, + CREATE_ORDER_REQUEST, + CREATE_ORDER_SUCCESS, + ExecuteOrderFailureAction, + ExecuteOrderRequestAction, + ExecuteOrderSuccessAction, + EXECUTE_ORDER_FAILURE, + EXECUTE_ORDER_REQUEST, + EXECUTE_ORDER_SUCCESS +} from './actions' export type OrderState = { data: Record @@ -31,18 +51,39 @@ type OrderReducerAction = | FetchNFTsSuccessAction | FetchNFTsFailureAction | FetchNFTSuccessAction + | CreateOrderRequestAction + | CreateOrderFailureAction + | CreateOrderSuccessAction + | ExecuteOrderRequestAction + | ExecuteOrderFailureAction + | ExecuteOrderSuccessAction + | CancelOrderRequestAction + | CancelOrderFailureAction + | CancelOrderSuccessAction export function orderReducer( state: OrderState = INITIAL_STATE, action: OrderReducerAction ): OrderState { switch (action.type) { + case CREATE_ORDER_REQUEST: + case EXECUTE_ORDER_REQUEST: + case CANCEL_ORDER_REQUEST: case FETCH_NFTS_REQUEST: { return { ...state, loading: loadingReducer(state.loading, action) } } + case CREATE_ORDER_SUCCESS: + case EXECUTE_ORDER_SUCCESS: + case CANCEL_ORDER_SUCCESS: { + return { + ...state, + loading: loadingReducer(state.loading, action), + error: null + } + } case FETCH_NFTS_SUCCESS: { return { ...state, @@ -57,6 +98,9 @@ export function orderReducer( error: null } } + case CREATE_ORDER_FAILURE: + case EXECUTE_ORDER_FAILURE: + case CANCEL_ORDER_FAILURE: case FETCH_NFTS_FAILURE: { return { ...state,