fix: total api calls handling (#2583)

frontend/common/services/useOrganisationUsage.ts

@@ -57,15 +57,12 @@ export async function getOrganisationUsage(
     typeof organisationUsageService.endpoints.getOrganisationUsage.initiate
   >[1],
 ) {
-  store.dispatch(
+  return store.dispatch(
     organisationUsageService.endpoints.getOrganisationUsage.initiate(
       data,
       options,
     ),
   )
-  return Promise.all(
-    store.dispatch(organisationUsageService.util.getRunningQueriesThunk()),
-  )
 }
 // END OF FUNCTION_EXPORTS
 

frontend/web/components/App.js

@@ -25,6 +25,7 @@ import Format from 'common/utils/format'
 import ConfigProvider from 'common/providers/ConfigProvider'
 import Permission from 'common/providers/Permission'
 import { getOrganisationUsage } from 'common/services/useOrganisationUsage'
+import AccountStore from 'common/stores/account-store'
 const App = class extends Component {
   static propTypes = {
     children: propTypes.element.isRequired,
@@ -35,6 +36,7 @@ const App = class extends Component {
   }
 
   state = {
+    activeOrganisation: 0,
     asideIsVisible: !isMobile,
     pin: '',
     totalApiCalls: 0,
@@ -48,9 +50,27 @@ const App = class extends Component {
   componentDidMount = () => {
     getBuildVersion()
     this.listenTo(ProjectStore, 'change', () => this.forceUpdate())
+    this.listenTo(AccountStore, 'change', this.getOrganisationUsage)
+    this.getOrganisationUsage()
     window.addEventListener('scroll', this.handleScroll)
   }
 
+  getOrganisationUsage = () => {
+    if (
+      AccountStore.getOrganisation()?.id &&
+      this.state.activeOrganisation !== AccountStore.getOrganisation().id
+    ) {
+      getOrganisationUsage(getStore(), {
+        organisationId: AccountStore.getOrganisation()?.id,
+      }).then((res) => {
+        this.setState({
+          activeOrganisation: AccountStore.getOrganisation().id,
+          totalApiCalls: res?.data?.totals.total,
+        })
+      })
+    }
+  }
+
   toggleDarkMode = () => {
     const newValue = !Utils.getFlagsmithHasFeature('dark_mode')
     flagsmith.setTrait('dark_mode', newValue)
@@ -237,17 +257,7 @@ const App = class extends Component {
     if (document.location.href.includes('widget')) {
       return <div>{this.props.children}</div>
     }
-    if (
-      AccountStore.getOrganisation() &&
-      AccountStore.getOrganisation().id &&
-      this.state.totalApiCalls == 0
-    ) {
-      getOrganisationUsage(getStore(), {
-        organisationId: AccountStore.getOrganisation()?.id,
-      }).then((res) => {
-        this.setState({ totalApiCalls: res[0]?.data?.totals.total })
-      })
-    }
+
     return (
       <Provider store={getStore()}>
         <AccountProvider