From 80d945e8e77550d876ad88a01785e0ffe61116fd Mon Sep 17 00:00:00 2001
From: Paul Tran-Van <paul.tranvan@gmail.com>
Date: Wed, 15 Jan 2025 11:30:22 +0100
Subject: [PATCH] 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 |  9 +++++++++
 src/containers/ReloadFocus.jsx          | 17 ++++++++++-------
 src/queries.js                          | 24 +++++++++++++++++++++++-
 3 files changed, 42 insertions(+), 8 deletions(-)

diff --git a/src/components/Sections/SectionView.tsx b/src/components/Sections/SectionView.tsx
index 5975b5eca3..ccb5fbd78a 100644
--- a/src/components/Sections/SectionView.tsx
+++ b/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(
diff --git a/src/containers/ReloadFocus.jsx b/src/containers/ReloadFocus.jsx
index ffc222ecb0..9011819148 100644
--- a/src/containers/ReloadFocus.jsx
+++ b/src/containers/ReloadFocus.jsx
@@ -1,7 +1,11 @@
 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
@@ -9,13 +13,12 @@ class RealoadFocus extends React.Component {
   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)
     })
   }
 
diff --git a/src/queries.js b/src/queries.js
index a5ae382f29..8b2b58984f 100644
--- a/src/queries.js
+++ b/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
   }
 }