fix: proceed loading (decentraland#306)

* fix: proceed loading * fix: loading states
Triex · May 28, 2021 · 8e518d9 · 8e518d9
1 parent 24cd8f9
commit 8e518d9
Show file tree

Hide file tree

Showing 19 changed files with 168 additions and 103 deletions.
diff --git 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
@@ -13,10 +13,8 @@ const AuthorizationModal = (props: Props) => {
     open,
     authorization,
     authorizations,
-    pendingTransactions,
     isLoading,
-    onGrant,
-    onRevoke,
+    isAuthorizing,
     onCancel,
     onProceed
   } = props
@@ -57,19 +55,18 @@ const AuthorizationModal = (props: Props) => {
         <Authorization
           key={authorization.authorizedAddress}
           authorization={authorization}
-          authorizations={authorizations}
-          pendingTransactions={pendingTransactions}
-          isLoading={isLoading}
-          onGrant={onGrant}
-          onRevoke={onRevoke}
         />
       </Modal.Content>
       <Modal.Actions>
         <Button onClick={onCancel}>{t('global.cancel')}</Button>
         <Button
           primary
           loading={isLoading}
-          disabled={!isAuthorized(authorization, authorizations)}
+          disabled={
+            isLoading ||
+            isAuthorizing ||
+            !isAuthorized(authorization, authorizations)
+          }
           onClick={onProceed}
         >
           {t('global.proceed')}

diff --git a/webapp/src/components/AuthorizationModal/AuthorizationModal.types.ts b/webapp/src/components/AuthorizationModal/AuthorizationModal.types.ts
@@ -1,31 +1,20 @@
 import { Dispatch } from 'redux'
-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 = {
   open: boolean
   authorization: Authorization
   authorizations: Authorization[]
-  pendingTransactions: Transaction[]
-  isLoading: boolean
-  onGrant: typeof grantTokenRequest
-  onRevoke: typeof revokeTokenRequest
+  isAuthorizing: boolean
+  isLoading?: boolean
   onCancel: () => void
   onProceed: () => void
 }
 
-export type MapStateProps = Pick<
+export type MapStateProps = Pick<Props, 'authorizations' | 'isAuthorizing'>
+export type MapDispatchProps = {}
+export type MapDispatch = Dispatch
+export type OwnProps = Pick<
   Props,
-  'authorizations' | 'pendingTransactions' | 'isLoading'
+  'open' | 'authorization' | 'onProceed' | 'isLoading'
 >
-export type MapDispatchProps = Pick<Props, 'onGrant' | 'onRevoke'>
-export type MapDispatch = Dispatch<
-  GrantTokenRequestAction | RevokeTokenRequestAction
->
-export type OwnProps = Pick<Props, 'open' | 'authorization' | 'onProceed'>
diff --git a/webapp/src/components/CancelSalePage/CancelSalePage.container.ts b/webapp/src/components/CancelSalePage/CancelSalePage.container.ts
@@ -1,15 +1,22 @@
 import { connect } from 'react-redux'
 import { push } from 'connected-react-router'
+import { isLoadingType } from 'decentraland-dapps/dist/modules/loading/selectors'
 import { RootState } from '../../modules/reducer'
-import { cancelOrderRequest } from '../../modules/order/actions'
+import { getLoading } from '../../modules/order/selectors'
+import {
+  cancelOrderRequest,
+  CANCEL_ORDER_REQUEST
+} from '../../modules/order/actions'
 import {
   MapStateProps,
   MapDispatchProps,
   MapDispatch
 } from './CancelSalePage.types'
 import CancelSalePage from './CancelSalePage'
 
-const mapState = (_state: RootState): MapStateProps => ({})
+const mapState = (state: RootState): MapStateProps => ({
+  isLoading: isLoadingType(getLoading(state), CANCEL_ORDER_REQUEST)
+})
 
 const mapDispatch = (dispatch: MapDispatch): MapDispatchProps => ({
   onNavigate: path => dispatch(push(path)),

diff --git a/webapp/src/components/CancelSalePage/CancelSalePage.tsx b/webapp/src/components/CancelSalePage/CancelSalePage.tsx
@@ -15,7 +15,7 @@ import { Props } from './CancelSalePage.types'
 import './CancelSalePage.css'
 
 const CancelSalePage = (props: Props) => {
-  const { onNavigate, onCancelOrder } = props
+  const { isLoading, onNavigate, onCancelOrder } = props
 
   return (
     <>
@@ -75,7 +75,8 @@ const CancelSalePage = (props: Props) => {
                       </Button>
                       <Button
                         primary
-                        disabled={isDisabled}
+                        loading={isLoading}
+                        disabled={isDisabled || isLoading}
                         onClick={() => onCancelOrder(order!, nft)}
                       >
                         {t('cancel_sale_page.submit')}

diff --git a/webapp/src/components/CancelSalePage/CancelSalePage.types.ts b/webapp/src/components/CancelSalePage/CancelSalePage.types.ts
@@ -6,11 +6,12 @@ import {
 } from '../../modules/order/actions'
 
 export type Props = {
+  isLoading: boolean
   onCancelOrder: typeof cancelOrderRequest
   onNavigate: (path: string) => void
 }
 
-export type MapStateProps = {}
+export type MapStateProps = Pick<Props, 'isLoading'>
 export type MapDispatchProps = Pick<Props, 'onNavigate' | 'onCancelOrder'>
 export type MapDispatch = Dispatch<
   CallHistoryMethodAction | CancelOrderRequestAction

diff --git a/webapp/src/components/SellPage/SellModal/SellModal.tsx b/webapp/src/components/SellPage/SellModal/SellModal.tsx
@@ -34,6 +34,7 @@ const SellModal = (props: Props) => {
     wallet,
     authorizations,
     isLoading,
+    isCreatingOrder,
     onNavigate,
     onCreateOrder
   } = props
@@ -206,7 +207,10 @@ const SellModal = (props: Props) => {
             <Button
               type="submit"
               primary
-              disabled={fromMANA(price) !== fromMANA(confirmPrice)}
+              disabled={
+                isCreatingOrder || fromMANA(price) !== fromMANA(confirmPrice)
+              }
+              loading={isCreatingOrder}
             >
               {t('global.proceed')}
             </Button>
@@ -216,6 +220,7 @@ const SellModal = (props: Props) => {
       <AuthorizationModal
         open={showAuthorizationModal}
         authorization={authorization}
+        isLoading={isCreatingOrder}
         onProceed={handleCreateOrder}
         onCancel={handleClose}
       />

diff --git 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
@@ -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
@@ -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 (
     <>
       <Navbar isFullscreen />
@@ -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
@@ -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<Props, 'authorizations' | 'isLoading'>
+export type MapStateProps = Pick<
+  Props,
+  'authorizations' | 'isLoading' | 'isCreatingOrder'
+>
 export type MapDispatchProps = Pick<Props, 'onNavigate' | 'onCreateOrder'>
 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
@@ -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
@@ -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
@@ -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<Props, 'onGrant' | 'onRevoke'>
+export type MapDispatch = Dispatch<
+  GrantTokenRequestAction | RevokeTokenRequestAction
+>
diff --git 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 }