feat: Use global query specs and hasBeenLoaded

Not to show many spinners all the time
cozy · Sep 12, 2019 · e6bcb05 · e6bcb05
1 parent bf9c215
commit e6bcb05
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 24 deletions.
diff --git a/src/doctypes.js b/src/doctypes.js
@@ -1,7 +1,7 @@
 import fromPairs from 'lodash/fromPairs'
 import CozyClient, { QueryDefinition, HasManyInPlace } from 'cozy-client'
 
-export const RECIPIENT_DOCTYPE = 'io.cozy.mocks.recipients'
+export const RECIPIENT_DOCTYPE = 'io.cozy.bank.recipients'
 export const ACCOUNT_DOCTYPE = 'io.cozy.bank.accounts'
 export const GROUP_DOCTYPE = 'io.cozy.bank.groups'
 export const TRANSACTION_DOCTYPE = 'io.cozy.bank.operations'
@@ -199,3 +199,9 @@ export const settingsConn = {
   as: 'settings',
   fetchPolicy: older30s
 }
+
+export const recipientsConn = {
+  query: client => client.all(RECIPIENT_DOCTYPE),
+  as: 'recipients',
+  fetchPolicy: older30s
+}
diff --git a/src/ducks/settings/AccountsSettings.jsx b/src/ducks/settings/AccountsSettings.jsx
@@ -18,8 +18,9 @@ import {
   getAccountInstitutionLabel,
   getAccountType
 } from 'ducks/account/helpers'
+import { isCollectionLoading, hasBeenLoaded } from 'ducks/client/utils'
 
-import { ACCOUNT_DOCTYPE, APP_DOCTYPE } from 'doctypes'
+import { accountsConn, APP_DOCTYPE } from 'doctypes'
 
 // See comment below about sharings
 // import { ACCOUNT_DOCTYPE } from 'doctypes'
@@ -83,7 +84,10 @@ class AccountsSettings extends Component {
   render() {
     const { t, accountsCollection } = this.props
 
-    if (accountsCollection.fetchStatus === 'loading') {
+    if (
+      isCollectionLoading(accountsCollection) &&
+      !hasBeenLoaded(accountsCollection)
+    ) {
       return <Loading />
     }
 
@@ -141,10 +145,7 @@ const mapStateToProps = state => ({
 
 export default compose(
   queryConnect({
-    accountsCollection: {
-      query: client => client.all(ACCOUNT_DOCTYPE),
-      as: 'accounts'
-    },
+    accountsCollection: accountsConn,
     apps: { query: client => client.all(APP_DOCTYPE), as: 'apps' }
   }),
   connect(mapStateToProps),

diff --git a/src/ducks/settings/GroupsSettings.jsx b/src/ducks/settings/GroupsSettings.jsx
@@ -11,7 +11,7 @@ import plus from 'assets/icons/16/plus.svg'
 import styles from 'ducks/settings/GroupsSettings.styl'
 import btnStyles from 'styles/buttons.styl'
 import { sortBy, flowRight as compose, get } from 'lodash'
-import { isCollectionLoading } from 'ducks/client/utils'
+import { isCollectionLoading, hasBeenLoaded } from 'ducks/client/utils'
 
 const GroupList = compose(
   withRouter,
@@ -55,17 +55,13 @@ const Groups = withRouter(
   class _Groups extends Component {
     render() {
       const { t, groups, router } = this.props
-      if (isCollectionLoading(groups)) {
+      if (isCollectionLoading(groups) && !hasBeenLoaded(groups)) {
         return <Loading />
       }
 
       return (
         <div>
-          {groups.fetchStatus === 'loading' ? (
-            <Loading />
-          ) : (
-            <GroupList groups={sortBy(groups.data.filter(x => x), 'label')} />
-          )}
+          <GroupList groups={sortBy(groups.data.filter(x => x), 'label')} />
           <p>
             <Button
               icon={<Icon icon={plus} className="u-mr-half" />}

diff --git a/src/ducks/transfers/TransferPage.jsx b/src/ducks/transfers/TransferPage.jsx
@@ -6,6 +6,7 @@ import { translate, Text, Modal } from 'cozy-ui/transpiled/react'
 import { withClient, queryConnect } from 'cozy-client'
 import Realtime from 'cozy-realtime'
 import { logException } from 'lib/sentry'
+import { recipientsConn, accountsConn } from 'doctypes'
 
 import Loading from 'components/Loading'
 import Stepper from 'components/Stepper'
@@ -25,6 +26,7 @@ import ChooseAmount from 'ducks/transfers/steps/Amount'
 import Summary from 'ducks/transfers/steps/Summary'
 import Password from 'ducks/transfers/steps/Password'
 import { isLoginFailed } from 'ducks/transfers/utils'
+import { isCollectionLoading, hasBeenLoaded } from 'ducks/client/utils'
 
 const THIRTY_SECONDS = 30 * 1000
 
@@ -329,8 +331,8 @@ class TransferPage extends React.Component {
     } = this.state
 
     if (
-      recipients.fetchStatus === 'loading' ||
-      accounts.fetchStatus === 'loading'
+      (isCollectionLoading(recipients) && !hasBeenLoaded(recipients)) ||
+      (isCollectionLoading(accounts) && !hasBeenLoaded(accounts))
     ) {
       return (
         <Padded>
@@ -417,14 +419,8 @@ const enhance = compose(
   withClient,
   withRouter,
   queryConnect({
-    accounts: {
-      query: client => client.all('io.cozy.bank.accounts'),
-      as: 'accounts'
-    },
-    recipients: {
-      query: client => client.all('io.cozy.bank.recipients'),
-      as: 'recipients'
-    }
+    accounts: accountsConn,
+    recipients: recipientsConn
   }),
   translate()
 )