fix: Get triggers current_state efficiently

We used to query triggers with their `current_state` at Home startup. We
removed it for performances purposes, but now it is only made when the
focus event is fired. This means we can miss this state when entering a
konnector group, which is required to correctly display the icons.
So, we query the triggers when required, and mutualize it with the focus
queries to benefit from the redux store.

src/components/Sections/SectionView.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useRef } from 'react'
 import cx from 'classnames'
 
+import { useQuery } from 'cozy-client'
 import type { IOCozyKonnector } from 'cozy-client/types/types'
 import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
@@ -17,6 +18,7 @@ import {
 } from 'components/Sections/SectionsTypes'
 import { useSections } from './SectionsContext'
 import CandidateServiceTile from 'components/CandidateServiceTile'
+import { makeTriggersWithJobStatusQuery } from 'queries'
 
 export const SectionBody = ({ section }: SectionViewProps): JSX.Element => {
   const { isMobile } = useBreakpoints()
@@ -26,6 +28,13 @@ export const SectionBody = ({ section }: SectionViewProps): JSX.Element => {
   const shouldOpenStoreModal = section.type === 'category' && section.pristine
   const { isRunning, isInMaintenance } = useSections()
 
+  // This query is useful to fetch the triggers' current_state, used to display
+  // the konnector icon. The data is fetched from the store in KonnectorTile
+  useQuery(
+    makeTriggersWithJobStatusQuery.definition(),
+    makeTriggersWithJobStatusQuery.options
+  )
+
   return (
     <div
       className={cx(

src/containers/ReloadFocus.jsx

@@ -1,21 +1,24 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-
-import { withClient, Q } from 'cozy-client'
+import {
+  makeTriggersWithJobStatusQuery,
+  makeAppsQuery,
+  makeJobsQuery
+} from 'queries'
+import { withClient } from 'cozy-client'
 class RealoadFocus extends React.Component {
   static contextTypes = {
     store: PropTypes.object
   }
   componentDidMount() {
     const client = this.props.client
     window.addEventListener('focus', () => {
-      client.query(Q('io.cozy.jobs'))
+      client.query(makeJobsQuery.definition(), makeJobsQuery.options)
       client.query(
-        Q('io.cozy.triggers').where({
-          worker: { $in: ['client', 'konnector'] }
-        })
+        makeTriggersWithJobStatusQuery.definition(),
+        makeTriggersWithJobStatusQuery.options
       )
-      client.query(Q('io.cozy.apps'))
+      client.query(makeAppsQuery.definition(), makeAppsQuery.options)
     })
   }
 

src/queries.js

@@ -14,6 +14,14 @@ export const konnectorsConn = {
   fetchPolicy: defaultFetchPolicy
 }
 
+export const makeJobsQuery = {
+  definition: () => Q('io.cozy.jobs'),
+  options: {
+    as: 'io.cozy.jobs',
+    fetchPolicy: defaultFetchPolicy
+  }
+}
+
 export const makeAppsQuery = {
   definition: () => Q('io.cozy.apps'),
   options: {
@@ -39,7 +47,21 @@ export const makeTriggersQuery = {
       .limitBy(1000)
   },
   options: {
-    as: 'io.cozy.triggers/worker=konnector',
+    as: 'io.cozy.triggers/worker=client-or-konnector',
+    fetchPolicy: defaultFetchPolicy
+  }
+}
+
+export const makeTriggersWithJobStatusQuery = {
+  definition: () => {
+    return Q('io.cozy.triggers')
+      .where({
+        worker: { $in: ['client', 'konnector'] } // client is for CLISK
+      })
+      .limitBy(1000)
+  },
+  options: {
+    as: 'io.cozy.triggers/worker=client-or-konnector/withjobstatus',
     fetchPolicy: defaultFetchPolicy
   }
 }